JavaScript是一个脚本语言,它由LiveScript改名而来,只是为了更好地推广这个脚本语言,因此Netscape公司才决定改名为JavaScript。
一. JavaScript面向对象的概念
1.JS伪继承
Js是一个弱类型变量的语言, 虽然Js支持类和对象,但仍然不是面向对象的程序设计语言。面向对象设计的三大基本特征:继承、多态、封装, JS没有很好的实现继承和多态。
JS没有继承的概念,只能通过Prototype实现伪继承。
<!-- js不支持继承机制, 通过Prototype实现伪继承,对类实现动态添加属性或方法。 -->
<script type="text/javascript">
function Person(name,age)
{
this.name = name;
this.age = age;
this.info = function(){
document.writeln("姓名:"+this.name + "<br/>");
document.writeln("年龄:"+this.age + "<br/>");
}
}
var p1 = new Person('hardy', 29);
p1.info();
// p1无法调用walk方法, 因为暂时没有此方法
// p1.walk();
// prototype动态给Person类添加方法让实例对象去调用, 相当于iOS中类别扩展方法, 所以prototype称为伪继承。
Person.prototype.walk = function(){
document.writeln(this.name + '正在慢慢溜达...' + '<br/>');
}
// 这时p1可以调用walk方法了。
p1.walk();
</script>
2. JavaScript创建对象
js有三种创建对象的方法:new 构造法、 Object空对象、Json创建。
- 使用New方法构造一个对象
<script type="text/javascript">
// 1. 先定义一个类, 然后使用New构造一个对象
function Person(name, age)
{
this.name = name;
this.age= age;
}
// 使用new构造一个对象
var p = new Person('hardy', 30);
document.writeln(p.name + '<br/>');
</script>
- 使用Object创建对象
<script type="text/javascript">
//2. Object创建一个空对象, 然后逐步添加属性和方法
var emptyObject = new Object();
// 添加属性
emptyObject.name = 'yeeku';
emptyObject.age = 29;
document.writeln(emptyObject.name + "<br/>");
</script>
- 使用Json语法创建一个对象
<script type="text/javascript">
//3. 使用Json语法创建对象
var jsObj = {
name: 'Vita',
age : 24
}
alert(jsObj.name);
</script>
3. JS对象属性访问
JS对象与纯碎的面向对象语言的对象存在一定的区别:JS中的对象本质上是一个关联数组,或者说更像Java里面Map数据结构,由一组key-value对组成。
<script type="text/javascript">
function Person(name, age)
{
this.name = name;
this.age = age;
this.info = function(){
alert('info method');
}
}
var p = new Person('hardy', 30);
// 将p当做一个map, 遍历获取其属性
for(var keyName in p)
{
// 如果写成 p.keyName, 浏览器会将keyName当做p的一个属性, 但实际是p并没有keyName这个属性。
document.writeln('p对象的' + keyName + '属性值为:'+p[keyName] + '<br />');
}
</script>
在遍历对象的属性时,要将keyName当做一个Map的key来使用。当然平时访问对象的某个属性时依然是使用.语法,如p.name获取p对象的名字。
document.writeln('p对象的' + name + '属性值为:'+p.name + '<br />');
二. JS函数
1. JS函数概念及定义
JS是一种基于对象的脚步语言,JS代码复用的单位依然是函数。定义函数的三种方法:
- 定义命名函数, function开头+ 函数名 + (参数名)
<script type="text/javascript">
// 函数名: functionName
// 参数:parameters, JS不需要指定参数的类型。
function functionName (parameters){
// 函数的实现
alert(parameters);
}
// 函数的调用
functionName("hardy_hu");
</script>
- 定义匿名函数:function+(参数名), 然后将这个实现语句赋给一个变量。
<script type="text/javascript">
var f = function(parameters){
alert(parameters);
};
// 调用函数
f("我是你们函数");
</script>
iOS中的Block就是你们函数。匿名函数是实现代码,需要赋给变量。
- 使用Function类匿名函数
<script type="text/javascript">
var fun = new Function('name', "document.writeln('Function 定义的函数<br/>');" + "document.writeln('你好'+name);");
fun("hardy_hu");
</script>
Function类的构造器的参数个数可以不受限制,可以接受一系列的字符串参数,前面的各字符串参数是函数的参数,后面的字符串参数是函数的执行体,执行体的各语句以分号隔开。new Function()更像一个Object的通用构造器,只是当函数执行体比较多时会变得十分臃肿,所以这种方式定义函数的可读性不好。
2. JS函数、方法、对象和类
函数是JS编程里面非常重要的一个概念,当使用JS定义一个函数后,实际上可以得到如下4项:
- 函数:像java方法一样,这个函数可以被调用
- 对象:定义一个函数时,系统会创建一个对象,该对象是Function 的实例。
- 方法:定义一个函数是,该函数通常都会附加给某个对象,作为该对象的方法。
- 类:在定义函数的同时,也得到了一个函数同名的类。
<script type="text/javascript">
//定义一个函数
var test = function(name)
{
return "你好" + name;
}
// 调用函数、 方法
var result = test('hardy')
// 类构造器, 创建一个对象
var obj = new test('hardy');
</script>
3. 函数的3种调用方法
函数有3种调用方法:直接调用, call调用, apply调用
<script type="text/javascript">
var myfun = function(a,b){
document.writeln("<br/>a的值是:" +a +" b的值是:"+b);
}
// call方法动态调用函数
myfun(23,33);
myfun.call(window, 12, 23);
myfun.apply(window,[33, 44]);
</script>
三. 函数的实例属性和类的属性
JS函数不仅是一个函数,也是一个类,且是此类的唯一的构造器。
<script type="text/javascript">
function Person(national, age)
{
// 实例属性,类似iOS中的-方法
this.age= age;
// 类属性, 类似iOS中的+方法
Person.national= national;
// 局部变量, 实例对象不可以访问!!!
var bb =0;
}
var p = new Person('china', 30);
document.writeln('实例属性:'+ p.age + '类属性:'+Person.national + '局部变量:'+ p.bb);
</script>
运行效果如下,可以看到无法访问局部变量bb的值。
局部变量.png
- JS支持类和对象的概念,但不是面向对象的程序设计语言,而是基于对象的脚本语言。
- JS函数更多的是执行某个方法,求得某个值并返回。 JS类,更多的是获取某个对象自己身上的属性值。
网友评论