JavaScript高级程序设计笔记-面向对象的编程

1.理解对象

1.1属性类型数据属性：[[Configurable]] ：表示能否通过 delete 删除属性从而重新定义属性，能否修改属性的特性，或者能否把属性修改为访问器属性。像前面例子中那样直接在对象上定义的属性，它们的这个特性默认值为 true 。[[Enumerable]] ：表示能否通过 for-in 循环返回属性。像前面例子中那样直接在对象上定义的属性，它们的这个特性默认值为 true 。[[Writable]] ：表示能否修改属性的值。像前面例子中那样直接在对象上定义的属性，它们的这个特性默认值为 true 。[[Value]] ：包含这个属性的数据值。读取属性值的时候，从这个位置读；写入属性值的时候，把新值保存在这个位置。这个特性的默认值为 undefined 。要修改属性默认的特性，必须使用 ECMAScript 5 的 Object.defineProperty() 方法。这个方法接收三个参数：属性所在的对象、属性的名字和一个描述符对象。其中，描述符（descriptor）对象的属性必须是： configurable 、 enumerable 、 writable 和 value。设置其中的一或多个值，可以修改对应的特性值。

var person = {};

Object.defineProperty(person, "name", {

writable: false,

value: "Nicholas"

});

alert(person.name); //"Nicholas"

person.name = "Greg";

alert(person.name); //"Nicholas"

[/code]访问器属性：[[Configurable]] ：表示能否通过 delete 删除属性从而重新定义属性，能否修改属性的特性，或者能否把属性修改为数据属性。对于直接在对象上定义的属性，这个特性的默认值为true 。[[Enumerable]] ：表示能否通过 for-in 循环返回属性。对于直接在对象上定义的属性，这个特性的默认值为 true 。[[Get]] ：在读取属性时调用的函数。默认值为 undefined 。[[Set]] ：在写入属性时调用的函数。默认值为 undefined 。

var book = {

_year: 2004,// _year 前面的下划线是一种常用的记号，用于表示只能通过对象方法访问的属性

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

[/code]1.2定义多个属性利用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;

}

}

}

});

[/code]1.3读取属性的特性 使用 ECMAScript 5 的 Object.getOwnPropertyDescriptor() 方法，可以取得给定属性的描述符。这个方法接收两个参数：属性所在的对象和要读取其描述符的属性名称。返回值是一个对象，如果是访问器属性，这个对象的属性有 configurable 、 enumerable 、 get和 set ；如果是数据属性，这个对象的属性有 configurable 、 enumerable 、 writable 和 value 。

var descriptor = Object.getOwnPropertyDescriptor(book, "_year");

alert(descriptor.value); //2004

alert(descriptor.configurable); //false

[/code]

2.创建对象

Object构造函数或对象字面量创建单个对象的缺点：使用同一个接口创建很多对象，会产生大量的重复代码。2.1工厂模式用函数来封装以特定接口创建对象的细节。

function createPerson(name,age,job){

var o = new Object();

o.name = name;

o.age = age;

o.job = job;

o.sayName = function(){

alert(this.name);

}

return o;

}

var person = createPerson("Grey",27,"doctor");

[/code]工厂模式虽然解决了创建多个相似对象的问题，但却没有解决对象识别的问题（即怎样知道一个对象的类型）。2.2构造函数模式创建自定义的构造函数，从而定义自定义对象类型的属性和方法。

function Person(name,age,job){

this.name = name;

this.age = age;

this.job = job'

this.sayName = function(){

alert(this.name);

}

}

var person = new Person("Grey",27,"doctor");

[/code]person对象有一个constructor构造函数属性，该属性指向Person与工厂模式的区别：没有显式地创建对象；直接将属性和方法赋给了this对象；没有return语句。优点：创建自定义的构造函数意味着将来可以将它的实例标识为一种特定的类型。a.将构造函数当作函数构造函数与其它函数唯一的区别，就在于调用它们的方式不一样，任何函数，只要通过new操作符来调用，那它就可以作为构造函数。

// 当作构造函数使用

var person = new Person("Nicholas", 29, "Software Engineer");

person.sayName(); //"Nicholas"

// 作为普通函数调用

Person("Greg", 27, "Doctor"); // 添加到 window

window.sayName(); //"Greg"

// 在另一个对象的作用域中调用

var o = new Object();

Person.call(o, "Kristen", 25, "Nurse");

o.sayName(); //"Kristen"

[/code]b.构造函数的问题每个方法都要在每个实例上重新创建一遍，会导致不同的作用域链和标识符解析。可以把构造函数中的函数放在全局作用域里，然后在构造函数内部调用，可以解决两个函数做同一件事的问题。但是在全局作用域中定义的函数实际上只能被某个对象调用，如果对象需要定义很多方法，那么就要定义很多个全局函数。例如：

function Person(name, age, job){

this.name = name;

this.age = age;

this.job = job;

this.sayName = sayName;

}

function sayName(){

alert(this.name);

}

var person1 = new Person("Nicholas", 29, "Software Engineer");

var person2 = new Person("Greg", 27, "Doctor");

[/code]2.3原型模式每个函数都有一个prototype属性，这个属性是一个指针，指向一个对象，而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法，即prototype就是通过调用构造函数而创建的那个对象实例的原型对象。好处是可以让所有对象实例共享它所包含的属性和方法，不必在构造函数中定义对象实例的信息，而是将这些信息直接添加到原型对象中。

function Person(){}

Person.prototype.name = "Nicholas";

Person.prototype.age = 29;

Person.prototype.job = "Software Engineer";

Person.prototype.sayName = function(){

alert(this.name);

};

var person1 = new Person();

person1.sayName(); //"Nicholas"

var person2 = new Person();

person2.sayName(); //"Nicholas"

alert(person1.sayName == person2.sayName); //true

[/code]a.理解原型对象只要创建了一个新函数，就会根据一组特定的规则为该函数创建一个prototype属性，这个属性指向函数的原型对象，在默认情况下，所有原型对象都会自动获得一个constructor构造函数属性，这个属性包含一个指向prototype属性所在函数的指针，通过这个构造函数我们还可以继续为原型对象添加其他属性和方法。创建了自定义的构造函数之后，其原型对象默认只会取得 constructor 属性；至于其他方法，则都是从 Object 继承而来的。当调用构造函数创建一个新实例后，该实例的内部将包含一个指针（内部属性），指向构造函数的原型对象。ECMA-262第 5 版中管这个指针叫 [[Prototype]] 。虽然在脚本中没有标准的方式访问 [[Prototype]] ，但 Firefox、Safari 和 Chrome 在每个对象上都支持一个属性__proto__ ；而在其他实现中，这个属性对脚本则是完全不可见的。不过，要明确的真正重要的一点就是，这个__proto__连接存在于实例与构造函数的原型对象之间，而不是存在于实例与构造函数之间。ECMAScript 5 增加了一个新方法，叫 Object.getPrototypeOf() ，在所有支持的实现中，这个方法返回 [[Prototype]] 的值。例如：

alert(Object.getPrototypeOf(person1) == Person.prototype); //true

alert(Object.getPrototypeOf(person1).name); //"Nicholas"

[/code]虽然可以通过对象实例访问保存在原型中的值，但却不能通过对象实例重写原型中的值。如果我们在实例中添加了一个属性，而该属性与实例原型中的一个属性同名，那我们就在实例中创建该属性，该属性将会屏蔽原型中的那个属性。ECMAScript 5 的 Object.getOwnPropertyDescriptor() 方法只能用于实例属性，要取得原型属性的描述符，必须直接在原型对象上调用 Object.getOwnPropertyDescriptor() 方法。b.原型与in操作符有两种方式使用 in 操作符：单独使用和在 for-in 循环中使用。在单独使用时， in 操作符会在通过对象能够访问给定属性时返回 true ，无论该属性存在于实例中还是原型中。由于 in 操作符只要通过对象能够访问到属性就返回 true ， hasOwnProperty() 只在属性存在于实例中时才返回 true ，因此只要 in 操作符返回 true 而 hasOwnProperty() 返回 false ，就可以确定属性是原型中的属性。要取得对象上所有可枚举的实例属性，可以使用 ECMAScript 5 的 Object.keys() 方法。这个方法接收一个对象作为参数，返回一个包含所有可枚举属性的字符串数组。例如：

function Person(){}

Person.prototype.name = "Nicholas";

Person.prototype.age = 29;

Person.prototype.job = "Software Engineer";

Person.prototype.sayName = function(){

alert(this.name);

};

var keys = Object.keys(Person.prototype);

alert(keys); //"name,age,job,sayName"

var p1 = new Person();

p1.name = "Rob";

p1.age = 31;

var p1keys = Object.keys(p1);

alert(p1keys); //"name,age"

[/code]如果你想要得到所有实例属性，无论它是否可枚举，都可以使用 Object.getOwnPropertyNames()方法。

var keys = Object.getOwnPropertyNames(Person.prototype);

alert(keys); //"constructor,name,age,job,sayName"

[/code]c.更简单的原型语法用一个包含所有属性和方法的对象字面量来重写整个原型对象。

function Person(){}

Person.prototype = {

name : "Nicholas",

age : 29,

job: "Software Engineer",

sayName : function () {

alert(this.name);

}

};

[/code]constructor 属性不再指向 Person 了，可以通过constructor : Person设置回适当的值d.原型的动态性即使是先创建了实例后修改原型能够立即从实例上反映出来。原因可以归结为实例与原型之间的松散连接关系。当我们调用 person.sayHi()时，首先会在实例中搜索名为 sayHi 的属性，在没找到的情况下，会继续搜索原型。因为实例与原型之间的连接只不过是一个指针，而非一个副本，因此就可以在原型中找到新的sayHi 属性并返回保存在那里的函数。

var friend = new Person();

Person.prototype.sayHi = function(){

alert("hi");

};

friend.sayHi(); //"hi"

[/code]如果是重写整个原型对象，那么情况就不一样了。我们知道，调用构造函数时会为实例添加一个指向最初原型的[[Prototype]] 指针，而把原型修改为另外一个对象就等于切断了构造函数与最初原型之间的联系。请记住：实例中的指针仅指向原型，而不指向构造函数。

function Person(){}

var friend = new Person();

Person.prototype = {

constructor: Person,

name : "Nicholas",

age : 29,

job : "Software Engineer",

sayName : function () {

 alert(this.name);

}

};

friend.sayName(); //error

[/code]d.原生对象的原型所有原生引用类型（ Object 、 Array 、 String ，等等）都在其构造函数的原型上定义了方法。例如，在 Array.prototype 中可以找到 sort() 方法，而在 String.prototype 中可以找到substring() 方法。通过原生对象的原型，不仅可以取得所有默认方法的引用，而且也可以定义新方法。可以像修改自定义对象的原型一样修改原生对象的原型，因此可以随时添加方法。下面的代码就给基本包装类型String添加了一个名为 startsWith() 的方法：

String.prototype.startsWith = function (text) {

return this.indexOf(text) == 0;

};

var msg = "Hello world!";

alert(msg.startsWith("Hello")); //true

[/code]e.原型对象的问题原型模式的最大问题是由其共享的本性所导致的，通过在实例上添加一个同名属性，可以隐藏原型中的对应属性。然而，对于包含引用类型值的属性来说，问题就比较突出了。

function Person(){}

Person.prototype = {

constructor: Person,

name : "Nicholas",

age : 29,

job : "Software Engineer",

friends : ["Shelby", "Court"],

sayName : function () {

 alert(this.name);

}

};

var person1 = new Person();

var person2 = new Person();

person1.friends.push("Van");

alert(person1.friends); //"Shelby,Court,Van"

alert(person2.friends); //"Shelby,Court,Van"

alert(person1.friends === person2.friends); //true

[/code]2.4组合使用构造函数模式和原型模式构造函数模式用于定义实例属性，而原型模式用于定义方法和共享的属性。结果，每个实例都会有自己的一份实例属性的副本，但同时又共享着对方法的引用，最大限度地节省了内存。另外，这种混成模式还支持向构造函数传递参数；可谓是集两种模式之长。

function Person(name, age, job){//构造函数定义实例属性

this.name = name;

this.age = age;

this.job = job;

this.friends = ["Shelby", "Court"];

}

Person.prototype = {//原型模式定义方法和共享的属性

constructor : Person,

sayName : function(){

 alert(this.name);

}

}

var person1 = new Person("Nicholas", 29, "Software Engineer");

var person2 = new Person("Greg", 27, "Doctor");

person1.friends.push("Van");

alert(person1.friends); //"Shelby,Count,Van"

alert(person2.friends); //"Shelby,Count"

alert(person1.friends === person2.friends); //false

alert(person1.sayName === person2.sayName); //true

[/code]2.5动态原型模式把所有信息都封装在了构造函数中，而通过在构造函数中初始化原型（仅在必要的情况下），又保持了同时使用构造函数和原型的优点。换句话说，可以通过检查某个应该存在的方法是否有效，来决定是否需要初始化原型。

function Person(name, age, job){

//属性

this.name = name;

this.age = age;

this.job = job;

// 方法

if (typeof this.sayName != "function"){// if 语句检查的可以是初始化之后应该存在的任何属性或方法

Person.prototype.sayName = function(){

alert(this.name);

};

}

}

var friend = new Person("Nicholas", 29, "Software Engineer");

friend.sayName();

[/code]2.6寄生构造函数模式这种模式的基本思想是创建一个函数，该函数的作用仅仅是封装创建对象的代码，然后再返回新创建的对象。

function Person(name, age, job){

var o = new Object();

o.name = name;

o.age = age;

o.job = job;

o.sayName = function(){

 alert(this.name);

};

return o;

}

var friend = new Person("Nicholas", 29, "Software Engineer");

friend.sayName(); //"Nicholas"

[/code]构造函数在不返回值的情况下，默认会返回新对象实例。而通过在构造函数的末尾添加一个 return 语句，可以重写调用构造函数时返回的值。2.7稳妥构造函数模式所谓稳妥对象，指的是没有公共属性，而且其方法也不引用 this 的对象。稳妥对象最适合在一些安全的环境中（这些环境中会禁止使用 this 和 new ），或者在防止数据被其他应用程序（如Mashup程序）改动时使用。

function Person(name, age, job){

//创建要返回的对象

var o = new Object();

//可以在这里定义私有变量和函数

//添加方法

o.sayName = function(){

alert(name);

};

//返回对象

return o;

}

var friend = Person("Nicholas", 29, "Software Engineer");

friend.sayName(); //"Nicholas"

[/code]

3.继承

ECMAScript只支持实现继承，主要是依靠原型链来实现的。3.1原型链基本思想：利用原型让一个引用类型继承另一个引用类型的属性和方法。构造函数、原型和实例的关系：每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，而实例都包含一个指向原型对象的内部指针。假如我们让原型对象等于另一个类型的实例，结果会怎么样呢？显然，此时的原型对象将包含一个指向另一个原型的指针，相应地，另一个原型中也包含着一个指向另一个构造函数的指针。假如另一个原型又是另一个类型的实例，那么上述关系依然成立，如此层层递进，就构成了实例与原型的链条。

function SuperType(){

this.property = true;

}

SuperType.prototype.getSuperValue = function(){

return this.property;

};

function SubType(){

this.subproperty = false;

}

//继承了 SuperType

SubType.prototype = new SuperType();

SubType.prototype.getSubValue = function (){

return this.subproperty;

};

var instance = new SubType();

alert(instance.getSuperValue()); //true

[/code]实现的本质是重写原型对象，代之以一个新类型的实例。1.别忘记默认的原型所有函数的默认原型都是 Object 的实例，因此默认原型都会包含一个内部指针，指向 Object.prototype 。这也正是所有自定义类型都会继承 toString() 、valueOf() 等默认方法的根本原因。2.确定原型和实例的关系方法1：使用instanceof操作符，测试实例与原型链中出现过的构造函数，结果就会返回true

alert(instance instanceof Object); //true

alert(instance instanceof SuperType); //true

alert(instance instanceof SubType); //true， instance 是 Object 、 SuperType 或 SubType 中任何一个类型的实例。

[/code]方法2：使用isPrototypeOf()方法，只要是原型链中出现过的原型，都可以说是该原型链所派生的实例的原型

alert(Object.prototype.isPrototypeOf(instance)); //true

alert(SuperType.prototype.isPrototypeOf(instance)); //true

alert(SubType.prototype.isPrototypeOf(instance)); //true

[/code]3.谨慎地定义方法给原型添加方法的代码一定要放在替换原型的语句之后。

function SuperType(){

this.property = true;

}

SuperType.prototype.getSuperValue = function(){

return this.property;

};

function SubType(){

this.subproperty = false;

}

//继承了 SuperType

SubType.prototype = new SuperType();

// 添加新方法

SubType.prototype.getSubValue = function (){

return this.subproperty;

};

// 重写超类型中的方法

SubType.prototype.getSuperValue = function (){

   return false;

};

var instance = new SubType();

alert(instance.getSuperValue()); //false

[/code]通过原型链实现继承时，不能使用对象字面量创建原型方法，这样会重写原型链，导致原型链被切断。4.原型链的问题在通过原型来实现继承时，原型实际上会变成另一个类型的实例。于是，原先的实例属性也就顺理成章地变成了现在的原型属性了。原型链的第二个问题是：在创建子类型的实例时，不能向超类型的构造函数中传递参数。实际上，应该说是没有办法在不影响所有对象实例的情况下，给超类型的构造函数传递参数。有鉴于此，再加上前面刚刚讨论过的由于原型中包含引用类型值所带来的问题，实践中很少会单独使用原型链。3.2借用构造函数基本思想：在子类型构造函数的内部调用超类型构造函数，因此通过使用 apply() 和 call() 方法也可以在（将来）新创建的对象上执行构造函数。

function SuperType(){

this.colors = ["red", "blue", "green"];

}

function SubType(){

// 继承了 SuperType

SuperType.call(this);

}

var instance1 = new SubType();

instance1.colors.push("black");

alert(instance1.colors); //"red,blue,green,black"

var instance2 = new SubType();

alert(instance2.colors); //"red,blue,green"

[/code]1.传递参数借用构造函数可以在子类型构造函数中向超类型构造函数传递参数。

function SuperType(name){

this.name = name;

}

function SubType(){

//继承了 SuperType，同时还传递了参数

SuperType.call(this, "Nicholas");

//实例属性

this.age = 29;

}

var instance = new SubType();

alert(instance.name); //"Nicholas";

alert(instance.age); //29

[/code]2.借用构造函数的问题方法都在构造函数中定义，因此函数复用就无从谈起了，而且在超类型的原型中定义的方法，对子类型而言也是不可见的，结果所有类型都只能使用构造函数模式。3.3组合继承（伪经典继承）思路：使用原型链实现对原型属性和方法的继承，而通过借用构造函数来实现对实例属性的继承，这样既通过在原型上定义方法实现了函数复用，又能保证每个实例都有它自己的属性。最大的问题是无论什么情况下，都会调用两次超类型构造函数：一次是创建子类型原型的时候，另一次是在子类型构造函数内部。

function SuperType(name){

this.name = name;

this.colors = ["red", "blue", "green"];

}

SuperType.prototype.sayName = function(){

alert(this.name);

};

function SubType(name, age){

//继承属性

SuperType.call(this, name);//第二次调用SuperType()

this.age = age;

}

//继承方法

SubType.prototype = new SuperType();//第一次调用SuperType()

SubType.prototype.constructor = SubType;

SubType.prototype.sayAge = function(){

alert(this.age);

};

var instance1 = new SubType("Nicholas", 29);

instance1.colors.push("black");

alert(instance1.colors); //"red,blue,green,black"

instance1.sayName(); //"Nicholas";

instance1.sayAge(); //29

var instance2 = new SubType("Greg", 27);

alert(instance2.colors); //"red,blue,green"

instance2.sayName(); //"Greg";

instance2.sayAge(); //27

[/code]3.4原型式继承借助原型可以基于已有的对象创建新对象，要求你必须有一个对象可以作为另一个对象的基础

function object(o){    //object()对传入其中的对象执行了一次浅复制

function F(){}    //创建临时性的构造函数

F.prototype = o;    //将传入的对象作为这个构造函数的原型

return new F();    //返回这个临时类型的一个新实例

}

var person = {

name: "Nicholas",

friends: ["Shelby", "Court", "Van"]

};

var anotherPerson = object(person);

anotherPerson.name = "Greg";

anotherPerson.friends.push("Rob");

var yetAnotherPerson = object(person);

yetAnotherPerson.name = "Linda";

yetAnotherPerson.friends.push("Barbie");

alert(person.friends); //"Shelby,Court,Van,Rob,Barbie"

[/code]ECMAScript 5 通过新增 Object.create() 方法规范化了原型式继承。这个方法接收两个参数：一个用作新对象原型的对象和（可选的）一个为新对象定义额外属性的对象。在传入一个参数的情况下，Object.create() 与 object() 方法的行为相同。

var person = {

name: "Nicholas",

friends: ["Shelby", "Court", "Van"]

};

var anotherPerson = Object.create(person);

anotherPerson.name = "Greg";

anotherPerson.friends.push("Rob");

var yetAnotherPerson = Object.create(person);

yetAnotherPerson.name = "Linda";

yetAnotherPerson.friends.push("Barbie");

alert(person.friends); //"Shelby,Court,Van,Rob,Barbie"

[/code]Object.create() 方法的第二个参数与 Object.defineProperties() 方法的第二个参数格式相同：每个属性都是通过自己的描述符定义的。以这种方式指定的任何属性都会覆盖原型对象上的同名属性。例如：

var person = {

name: "Nicholas",

friends: ["Shelby", "Court", "Van"]

};

var anotherPerson = Object.create(person, {

name: {

value: "Greg"

}

});

alert(anotherPerson.name); //"Greg"

[/code]只想让一个对象与另一个对象保持类似的情况下，原型式继承是完全可以胜任的。3.5寄生式继承思路：创建一个仅用于封装继承过程的函数，该函数在内部以某种方式来增强对象，再返回对象。

function createAnother(original){

var clone = object(original); //通过调用函数创建一个新对象

clone.sayHi = function(){ //以某种方式来增强这个对象

    alert("hi");

};

return clone; //返回这个对象

}

var person = {

name: "Nicholas",

friends: ["Shelby", "Court", "Van"]

};

var anotherPerson = createAnother(person);

anotherPerson.sayHi(); //"hi"

[/code]在主要考虑对象而不是自定义类型和构造函数的情况下，寄生式继承也是一种有用的模式。使用寄生式继承来为对象添加函数，会由于不能做到函数复用而降低效率；这一点与构造函数模式类似。3.6寄生组合式继承通过借用构造函数来继承属性，通过原型链的混成形式来继承方法。基本思路：不必为了指定子类型的原型而调用超类型的构造函数，我们所需要的无非就是超类型原型的一个副本，本质上就是使用寄生式继承来继承超类型的原型，然后再将结果指定给子类型的原型。