JavaScript高级程序设计读书笔记(3)
面向对象程序设计
1.创建对象
<script type="text/javascript"> var person=new Object(); preson.name="zhangsan" person.age=13; person.sayAge=function(){ alert(this.age); } </script>
这种方式有一个明显的缺点:使用同一个接口创建很多对象,会产生大量的重复代码。
2.工厂模式
<script type="text/javascript"> function creatPerson(name,age){ var o=new Object(); o.name=name; o.age=age; o.sayAge=function(){ alert(this.age); } return o; } var person1=creatPerson("zhangsan",12); var person2=creatPerson("lisi",15) person1.sayAge();//12 person2.sayAge();//15 </script>
3.构造函数创建对象
<script type="text/javascript"> function Person(name,age){ this.name=name; this.age=age; this.sayAge=function(){ alert(this.age); } } var person1 =new Person("zhangsan",19); var person2 =new Person("lisi",20); person1.sayAge();//19 person2.sayAge();//20 </script>
person1和person2都保存着Person的一个不同实例。这两个对象都有一个costructor属性,该属性指向Person。
alert(person1.constructor==Person);//true alert(person2.constructor==Person);//true
构造函数的调用:
1.作为构造函数调用
2.作为普通函数调用
Person("zhangsan",17); window.sayAge();//17
在另一个对象的作用域中调用
var obj=new Object(); Person.call(obj,"zhangsan",18); obj.sayAge();//18
构造函数模式虽然好用,但是每个方法要在么个实例上重新创建一遍,前面的例子中,person1和person2都有一个名为sayName()的方法,但那两个方法不是同一个Function的实例。因此每定义一个函数,也就是实例化了一个对象。所以构造函数也可以 这样定义:
function Person(name, age){ this.name = name; this.age = age; this.sayAge =new Function("alert(this.age)"); }
为了避免创建多个Function对象,可以将函数定义到构造函数外部
function Person(name, age){ this.name = name; this.age = age; this.sayAge =sayAge; } function sayAge(age){ alert(this.age); }
原型模型:
创建的每一个函数都有一个prototype属性,这个属性是一个对象,它的用途是包含可以由特定类型的所有实例共享的属性和方法。那么prototype就是通过调用构造函数而创建的那个对象的原型对象。使用原型的好处是可以让所有对象实例共享它所包含的属性和方法。换句话说,不必在构造函数中定义对象信息,而是可以将这些信息直接添加到原型对象中。
<script type="text/javascript"> function Person(){} Person.prototype.name="zhangsan"; Person.prototype.age=12; Person.prototype.setAge=function(){ alert(this.age); } var person1=new Person(); var person2=new Person(); person1.setAge();//12 person2.setAge();//12 </script>
更简单的原型模型
<script type="text/javascript"> function Person(){} Person.prototype={ name:"zhangsan", age:14, sayAge:function(){ alert(this.age); } } var person1=new Person(); var person2=new Person(); person1.sayAge();//14 person2.sayAge();//14 </script>
原型模型的动态性
<script type="text/javascript"> function Person(){} Person.prototype={ name:"zhangsan", age:14, sayAge:function(){ alert(this.age); } } var person1=new Person(); Person.prototype.sayHi=function(){ alert("hi"); } person1.sayHi(); </script>
通过构造函数初始化原型
<script type="text/javascript"> function Person(name,age){ this.name=name; this.age=age; if(typeof this.sayAge!="function"){ Person.prototype.sayAge=function(){ alert(this.age); } } } var person=new Person("zhangsan",13); person.sayAge(); </script>