面向对象的程序设计
一.理解对象
1.ECMAScript中对象是一组没有特定顺序的值。每个属性或方法都有一个名字，而每个名字都映射到一个值。
2.创建对象最简单方式(对象字面量语法)：
var person={
name:"liu",
age:21,
sayName:function{
alert(this.name);
}
};
3.属性类型
①数据属性
(1)数据属性包含一个数据值的位置，在这个位置可以读取和写入值。
(2)4个描述其行为的特性：(由于是内部值，要放到两对方括号中)
[[Configurable]] 能否用delete删除属性，能否修改属性的特性
[[Enumerable]] 能否通过for-in循环返回属性
[[Writable]] 能否修改属性的值
[[Value]] 属性的数据值
[[Configurable]]，[[Enumerable]]，[[Writable]]特性默认为true，[[Value]]特性被设置为指定的值
(3)Object.defineProperty()方法用于修改属性默认的特性
三个参数：Object.defineProperty(属性所在的对象，"属性的名字"，{描述符对象})
var person={};
Object.defineProperty(person,"name",{
writable:false,
value:"liu"
});
alert(person.name); //"liu"
person.name="zhong";
alert(person.name); //"liu" 无法修改
(4)调用Object.defineProperty()方法时，configurable,enumerable,writable特性默认都是false
(5)可以多次调用Object.defineProperty()修改同一属性，但把configurable设置为false之后，将只能修改writable特性
②访问器属性
(1)不包含数据值，包含一对getter和setter函数。在读取访问器属性时调用getter，返回有效的值。在写入访问器属性时，调用setter函数并传入新值，负责如何处理数据
(2)4个特性：
[[Configurable]]
[[Enumerable]]
[[Get]]
[[Set]]
(3)Object.defineProperty()定义访问器属性
var book={
_year:2004; //下划线表示只能通过对象方法访问的属性
edition:1;
};
Object.defineProperty(book,"year",{
get:function(){
return this._year;
},
set:function(newValue){ //参数怎么传递
if(newValue>2004){
this._year=newValue; //能否读取函数声明
this.edition+=newValue-2004;
}
}
});
book.year=2005;
alert(book.edition); //2
(4)不一定同时指定getter setter
4.定义多个属性
用Object.defineProperties()方法同时定义多个属性
var book={};
Object.defineProperties(book,{
_year:{
value:2004
},
edition:{
value:1
},
year:{
get:function(){
return this._year;
},
set:function(newValue){
if(newValue>2004){
this._year=newValue; //能否读取函数声明
this.edition+=newValue-2004;
}
}
}
});
5.读取属性的特性
Object.getOwnPropertyDescriptor(属性所在对象，"属性名称”)
返回一个对象
二.创建对象
Object构造函数和对象字面量可以创建单个对象，但多个相似对象会产生大量重复代码
1.工厂模式
function creatPerson(name,age){
var o=new Object();
o.name=name;
o.age=age;
o.sayName=function(){
alert(this.name);
}
return o;
}
var person=creatPerson("liu",21);
无法知道一个对象的类型
2.构造函数模式
function Person(name,age){
this.name=name;
this.age=age;
this.sayName=function(){
alert(this.name);
}; //构造函数问题所在 var sayName=new Function("alert(this.name)");
}
var person1=new Person("liu",21);
var person2=new Person("zhong",22);
(1)构造函数第一个字母大写
(2)构造函数也是函数，调用方法：
①通过new操作符，作为构造函数
②不使用new操作符，作为普通函数
③在另一个对象的作用域中调用
(3)构造函数的问题
①每个方法都要在每个实例上重新创建一遍，所以每个Person实例都会包含一个不同的Function实例，会导致不同的作用域链和标识符解析
alert(person1.sayName==person2.sayName); //false
②将函数定义转移到函数外部，在构造函数内部，将sayName属性设置为等于全局的sayName函数，但全局作用域中定义的函数只能被某个对象调用。而且有多个方法时要定义多个全局函数。
function Person(name,age){
this.name=name;
this.age=age;
this.sayName=sayName;
}
function sayName(){
alert(this.name);
}
3.原型模式
prototype(原型)属性：每个函数都有一个prototype属性，是一个指针，指向一个对象，这个对象包含特定类型的所有实例共享的属性和方法。即prototype属性指向函数的原型对象
function Person(){}
person.prototype.name="liu";
person.prototype.age=21;
person.prototype.sayName=function(){
alert(this.name);
};
var person1=new Person();
person1.sayName(); //"liu"
var person2=new Person();
person2.sayName(); //"liu"
alert(person1.sayName==person2.sayName); //true
(1)理解原型对象
①Person.prototype指向构造函数的原型对象
Person.prototype.constructor指向prototype所在函数 即构造函数Person
创建的实例包含[[Prototype]](内部属性)指向构造函数的原型对象
②isPrototypeOf()方法
[[Prototype]]指向调用isPrototypeOf()方法的对象 返回true
alert(Person.prototype.isPrototype(person1)); //true
③Object.getPrototypeOf()
通过实例取得一个对象的原型：alert(Object.getPrototype(person1).name); //”liu”
④属性的搜索过程
先搜索对象实例本身，若找到了给定名字的属性则返回属性的值，若没有，搜索原型对象
在实例中添加属性会屏蔽原型中的同名属性，但不会修改原型中的属性，因为先搜索对象实例本身
delete操作符可以删除以定义的实例中的属性，从而使用原型中的属性
⑤hasOwnProperty()检测属性存在于实例中还是原型中，存在实例中返回true
alert(person1.hasOwnProperty(“name”)); //false
(2)原型与in操作符
①单独使用：对象能访问给定属性时返回true，无论属性存在于实例中还是原型中
alert(“name” in person1); //true
与hasOwnProperty()配合使用
function hasPrototypeProperty(object,name){
return !object.hasOwnProperty(name) && (name in object);
} //name属性存在且存在于原型中返回true
②for-in循环
返回所有能通过对象访问的，可枚举的属性
所有开发人员定义的属性都是可枚举的
bug：toString(),hasOwnPrpperty(),propertyIsEnumerable(),toLocaleString(),toString(),valueOf() [[Enumerable]]默认为false 即不可枚举
③Object.keys()方法 //得到实例属性,原型属性呢？
接受一个对象作为参数
var keys=Object.keys(Person.prototype);
alert(keys); //”name,age,sayName”
④Object.getOwnPropertyNames()方法得到所有实例属性 //实例属性？那原型属性呢
var keys=Object.getOwnPropertyNames(Person.prototype);
alert(keys);
(3)简单的原型语法
function Person(){
}
Person.prototype={
constructor:Person,/*本质上重写了prototype对象,所以constructor
name:"liu", *属性变成了新对象的constructor属性，不再指向
age:29, */Person函数(指向Object)，可将其设为Person
sayName:function(){
alert(this.name);
}
};
(4)原型的动态性
可以随时为原型添加属性和方法，但重写整个原型对象，实例的[[Prototype]]还是指向原来的原型对象
function Person(){
}
var person1=new Person();
Person.prototype={
constructor:Person,
name:"liu",
age:29,
sayName:function(){
alert(this.name);
}
};
person1.sayName(); // error
(5)原生对象的原型
可以像修改自定义对象的原型一样修改原生对象的原型
String.prototype.start=function(text){
return this.indexOf(text)==0;
};
var mes="hello world";
alert(mes.start("hello")); //true
(6)原型对象的问题
①不能为构造函数传递初始化参数
②原型中如果包含引用类型，修改一个实例对象的引用类型属性，会影响另一个实例对象
function Person(){
}
Person.prototype={
friend:["jin","yang"]
};
var person1=new Person();
var person2=new Person();
person1.friend.push("liu");
alert(person1.friend); //"jin,yang,liu"
alert(person2.friend); //"jin,yang,liu" 会影响到person2实例对象4.组合使用构造函数模式和原型模式
构造函数模式用于定义实例属性，原型模式用于定义方法和共享的属性
function Person(name,age){
this.name=name;
this.age=age;
this.friend=["jin","yang"];
}
Person.prototype={
constructor:Person,
sayName:function(){
alert(this.name);
}
}
var person1=new Person("liu",21);
5.动态原型模式
6.寄生构造函数模式
7.稳妥构造函数模式
三.继承
ECMAScript通过原型链实现继承，让一个引用类型继承另一个引用类型的属性和方法
1.原型链
(1)原型链的构建：将一个类型的实例赋值给另一个构造函数的原型
实例中都包含一个指向原型对象的内部指针[[prototype]],实例赋值给另一个原型后，这个原型也将包含这个[[prototype]]指针，从而指向第一个原型对象，它的constructor属性也将指向第一个构造函数，存在于实例中的属性和方法，将存在于这个原型对象中
function SuperType(){
this.property=true; //一个实例属性
}
SuperType.prototype.getSuperValue=function(){
return this.property; //一个原型方法
};
function SubType(){
this.subproperty=false; //一个实例属性
}
SubType.prototype=new SuperType(); //实现继承SuperType
SubType.prototype.getSubValue=function(){
return this.subproperty;
};
var instance=new SubType();
alert(instance.getSuperValue()); //true 继承了SuperType原型对象中的方法 (2)原型链扩展了原型搜索机制：①搜索实例②搜索SubType.prototype③搜索SuperType.prototype
(3)默认的原型Object
所有引用类型默认都继承了Object
所有函数的默认原型都是Object的实例，因此默认原型都包含一个内部指针，指向Object.prototype
(4)确定原型和实例的关系
instanceof操作符
alert(instance instanceof Object); //true instance是Object类型的实例
isPrototypeOf()方法
alert(Object.prototype.isPrototypeOf(instance)); //true
(5)重写或添加方法
给原型重写或添加方法的代码一定要放在替换原型的语句(一个类型的实例赋值给另一个构造函数的原型)之后
function SuperType(){
this.property=true;
}
SuperType.prototype.getSuperValue=funtion(){
return this.property;
};
function SubType(){
this.subproperty=false;
}
SubType.property=new SuperType(); //替换原型
//添加新方法
SubType.prototype.getSubValue=function(){
return this.subproperty;
};
//重写超类型中的方法
SubType.prototype.getSuperValue=function(){
return false;
};
var subinstance=new SubType();
alert(subinstance.getSuperValue()); //false 调用的重新写的方法
var superinstance=new SuperType();
alert(superinstance.getSuperValue()); //true 调用的原型中的方法
注意：不能使用对象字面量添加或重写原型方法，因为相当于重写了原型链(原型将包含Object的实例，而非SuperType的实例)
SubType.prototype=new SuperType();
SubType.prototype={
getSubValue:function(){
return this.subproperty;
}
}; //不能用对象字面量法
(6)原型链问题
①包含引用类型的原型
原型继承实例属性后(即拥有了自己的一套属性 this指向的作用域)，这个原型的所有实例都将共享这个属性，如果这个这个属性是引用类型值，修改属性将影响所有实例
②在创建子类型的实例时，不能向超类型的构造函数中传递参数
2.借用构造函数
在子类型构造函数的内部调用超类型的构造函数。
function SuperType(){
this.color=["red","blue"];
}
function SubType(){
SuperType.call(this); //继承SuperType
}
var instance1=new SubType(); /*在新创建的SubType实例的环境下调用了
instance1.color.push("black");*SuperType构造函数，每个实例将拥有自己的 alert(instance1.color); */color属性副本
//"red,blue,black"
var instance2=new SubType(); //this指向这个实例作用域
alert(instance.color); //"red,blue"
①传递参数
function.SuperType(name){
this.name=name;
}
funtion SubType(){
//继承SuperType，同时传递参数
SuperType.call(this,"liu");
//实例属性
this.age=21;
}
var instance=new SubType();
alert(instance.name); //"liu"
alert(instance.age); //21
实际上在函数内部调用SuperType构造函数时，为SubType的实例设置了name属性
要在调用完构造函数之后，再为子类型中添加属性，防止被构造函数重写
②借用构造函数的问题
方法都在构造函数中定义，没法函数复用，而且在超类型的原型中定义的方法，对于子类型是不可见的，结果所有类型都只能使用构造函数模式
3.组合继承
使用原型链实现对原型属性和方法的继承，通过借用构造函数实现对实例属性的继承
function SuperType(name){
this.name=name;
this.colors=["red","blue"];
}
SuperType.prototype.sayName=function(){
alert(this.name);
};
function SubType(name,age){
//继承属性
SuperType.call(this,name);
this.age=age;
}
//继承方法
SubType.prototype=new SuperTypr();
SubType.prototype.constructor=SubType;
SubType.prototype.sayAge=function(){
alert(this.age);
};
var instance=new SubType("liu",21);
instance.colors.push("green");
alert(instance.colors); //"red,blue,green"
instance.sayName(); //"liu"
instance.sayAge(); //21
var instance1=new SubType("zhong",22);
alert(instance1.colors); //"red,blue"
instance1.sayName(); //"zhong"
instance1.sayAge(); //22
SubType实例分别拥有了自己的属性：colors，age
相同的方法：sayName(),sayAge()
4.原型式继承
5.寄生式继承
6.寄生组合式继承
浙公网安备 33010602011771号