JavaScript——面向对象的程序设计——创建对象与继承

zoukankan html css js c++ java

JavaScript——面向对象的程序设计——创建对象与继承
Honesty is the best choice.

与大多数其他的面向对象的语言不同，ECMAScript 中没有类的概念。
ECMA-262 把对象定义为：“无序属性的集合，其属性可以包含基本值、对象或者函数”。这就相当于说，对象是一组没有特定顺序的值。对象的每个属性或方法都有一个名字，而每个名字都映射到一个值。因此，我们可以把 ECMAScript 的对象想象成散列表：包含一组组键值对，其中值可以是数据或者函数。
每个对象都是基于一个引用类型创建的，这个引用类型可以是原生类型，也可以是自定义的类型。

1.理解对象

创建自定义对象的最简单方式是创建一个 Object 的实例，然后为它添加属性和方法：
```
var person = new Object();
person.name = "Bob";
person.age = "29";
person.sayName = function(){
    alert(this.name);
};
```
你也可以通过字面量的形式创建对象：
```
var person = {
    name: "Bob",
    age: 29,
    sayName: function(){
        alert(this.name);
    }
};
```
1.1 属性类型

ECMA-262 第 5 版在定义只有内部才用的特性（attribute）时，描述了属性（property）的各种特征。在 JavaScript 中不能直接访问这些特性。为了表示特性是内部值，该规范把它们放在两对方括号中，例如[[Enumerable]]。

ECMAScript 中有两种属性：数据属性和访问器属性。
1. 数据属性
数据属性包含一个数据值的位置，在这个位置可以读取和写入值。
数据属性有 4 个描述其行为的特性：
- [[Configurable]]：可配置的，表示能否通过 delete 删除属性从而重新定义属性，能否修改属性的特性，或者能否把这个数据属性修改为访问器属性。直接在对象上定义的属性，它们的这个特性默认值为 true。
- [[Enumerable]]：可枚举的，表示能否通过 for-in 循环返回属性。直接在对象上定义的属性，它们的这个特性默认值为 true。
- [[Writable]]：表示能否修改属性的值。直接在对象上定义的属性，它们的这个特性默认值为 true。
- [[Value]]：包含这个属性的数据值。读取/写入属性值的时候，从这个位置读/写。这个特性的默认值为 undefined。
要修改属性默认的特性，必须使用 ECMAScript 5 的 Object.defineProperty() 方法。这个方法接受三个参数：属性所在对象、属性名字和一个描述符对象。其中描述符对象用于描述目标属性应该拥有的特性。如果目标属性是一个数据属性，则描述符对象的属性必须是以下四种中的一个或多个：configurable、enumerable、writable 和 value。例如：
```
var person = {};
Object.defineProperty(person, "name", {
    writable: false,    //将这个属性设置为只读
    value: "Bob"
});

alert(person.name); //"Bob"
person.name = "Alice";
alert(person.name); //"Bob"
```
把 configurable 设置为 false，表示不能从对象中删除这条属性。注意，这个操作是不可逆的，已经设置为不可配置的属性，就不能再变回可配置了。
你可以调用 Object.defineProperty() 方法来创建新属性，如果你没有指定，则 configurable、enumerable 和 writable 的默认值都是 false。如果你只是用这个方法修改已定义的属性的特性，则不会自动赋值。
1. 访问器属性
访问器属性不包含数据值，它包含一对 getter 和 setter 函数。在读取访问器属性时，会调用 getter 函数，函数将返回有效值；在写入访问器属性时，会调用 setter 函数并传入新值，函数将处理数据。
访问器属性有 4 个特性：
- [[Configurable]]：表示能否通过 delete 删除属性从而重新定义属性，能否修改属性的特性，或者能否把这个访问器属性修改为数据属性。直接在对象上定义的属性，它们的这个特性默认值为 true。
- [[Enumerable]]：表示能否通过 for-in 循环返回属性。直接在对象上定义的属性，它们的这个特性默认值为 true。
- [[Get]]：在读取属性时调用的函数。默认值为 undefined。
- [[Set]]：在写入属性时调用的函数。默认值为 undefined。
访问器属性不能直接定义，必须使用 Object.defineProperty() 来定义。因为我们现在要定义的属性是一个访问器属性，因此描述符对象的属性名必须是以下四种中的一个或多个：configurable、enumerable、get 和 set。非严格模式下，get 或 set 可以只写其一，不必成对出现。
```
var book = {
    _year: 2004,    //在属性名前面加下划线，表示只能通过对象方法访问的属性
    edition: 1
};
Object.defineProperty(book, "year", {
    get: function(){
        return this._year;
    },
    set: function(newDate){
        if (newDate > 2004) {
            this._year = newDate;
            this.edition += newDate - 2004;
        }
    }
});
book.year = 2005;
alert(book.edition);    //2
```
以上是使用访问器属性的常见方式，即设置一个属性的值会导致其他属性发生变化。

1.2 定义多个属性

ECMAScript 5 定义了一个 Object.defineProperties() 方法，它可以通过描述符一次定义多个属性。这个方法接收两个对象参数：第一个对象是要添加和修改其属性的对象，第二个对象的属性与第一个对象中要添加或修改的属性一一对应。例如：
```
var book = {};
Object.defineProperties(book, {
    _year: {    //数据属性
        writable: true,
        value: 2004
    },
    edition: {  //数据属性
        writable: true,
        value: 1
    },
    year: { //访问器属性
        get: function(){
            return this._year;
        },
        set: function(newDate){
            if (newDate > 2004) {
                this._year = newDate;
                this.edition += newDate - 2004;
            }
        }
    }
});
```
1.3 读取属性的特性

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

2.创建对象

使用 Object 构造函数或者对象字面量形式来创建大量相似对象，会产生大量重复代码，因此人们开始使用工厂模式及其变体来创建对象。

2.1 工厂模式

这种模式抽象了创建具体对象的过程。虽然 ECMAScript 中无法创建类，但我们可以用函数来实现封装过程。
```
function createPerson(name, age){
    var obj = new Object();
    obj.name = name;
    obj.age = age;
    obj.sayName = function(){
        alert(this.name);
    }
    return obj;
}
var person1 = createPerson("Alice", 29);    //注意，这里只是调用一个普通函数，没有用到 new 操作符

alert(person1 instanceof createPerson); //false
alert(person1.constructor == Person);   //true
```
虽然它解决了创建多个相似对象的问题，但却没有解决对象识别问题（如何确认一个对象的类型）。

2.2 构造函数模式

可以使用构造函数模式重写前面的例子：
```
function Person(name, age){
    this.name = name;
    this.age = age;
    this.sayName = function(){
        alert(this.name);
    };
}
var person1 = new Person("Alice", 29);

alert(person1 instanceof Person);   //true
alert(person1.constructor == Person);   //true
```
这段代码与上面有五点不同：
- 函数名首字母大写；
- 没有显式地创建对象；
- 直接将属性和方法赋给 this 对象；
- 没有 return 语句；
- 使用 new 操作符来创建实例。
按照惯例，构造函数应该以大写字母开头，非构造函数以小写字母开头。
使用 new 操作符调用构造函数创建新实例，会经历以下 4 个步骤：
1. 创建一个新对象；
2. 将构造函数的作用域赋给新对象，构造函数内部的 this 就指向这个新的空对象；
3. 执行构造函数中的代码，为这个新对象添加属性；
4. 返回新对象
构造函数与其他函数的唯一区别就是调用方式。任何函数，只要通过 new 操作符来调用，那它就可以作为构造函数。
以这种方式定义的构造函数，是定义在 Global 对象中的（在浏览器中是 window 对象）。

对象的 constructor 属性最初是用来标识对象类型的，但 instanceof 操作符要更可靠一点。

创建自定义的构造函数意味着将来可以将它的实例标识为一种特定的类型；而这就是构造函数模式胜过工厂模式的地方。
构造函数模式的主要缺点是：因为不同实例上的同名函数是不相等的，所以每个方法都要在每个实例上重新创建一遍。如果这些同名函数完成的任务相同，确实没有必要为每个实例都创建一个 Function 实例。
好在，这个问题可以通过使用原型模式来解决。

2.3 原型模式

我们创建的每个函数都有一个 prototype（原型）属性，这个属性是一个指针，指向函数的原型对象，而这个原型对象包含了大量的属性和方法，这些属性和方法可以被特定类型的所有实例共享。
prototype 就是通过调用构造函数（使用 new 操作符）而创建的那个对象实例的原型对象。
使用原型对象的好处，是可以让所有对象实例共享它所包含的属性和方法。现在你不必在构造函数中定义对象实例的信息，而是可以将这些信息添加到原型对象中。例如：
```
function Person(){
}
Person.prototype.name = "Alice";
Person.prototype.age = 29;
Person.prototype.sayName = function(){
    alert(this.name);
};

var person1 = new Person();
person1.sayName();  //"Alice" 
var person2 = new Person();
person1.sayName();  //"Alice" 

alert(person1.sayName == person2.sayName);  //true
```
通过这种原型模式创建的新对象，它们的属性和方法是由所有实例共享，而构造函数模式无法共享方法。
1. 理解原型对象
所有原型对象都有一个 constructor 属性，这个属性是一个指向 prototype 属性所在函数的指针。
在上面那个例子中，我们创建的 Person 函数会自动获得一个 prototype 属性，它指向函数的原型对象，而 Person.prototype 所指向的原型对象又会自动获得一个 constructor 属性（其余属性方法均继承自 Object），它指向 Person，即 Person.prototype.constructor 指向 Person。
当调用构造函数（使用 new 操作符）创建一个新实例后，这个新实例的内部将包含一个指针（内部属性），指向构造函数的原型对象。ECMAScript 5 称这个指针为[[Prototype]]。虽然没有标准的方式访问这个值，但 Firefox、Safari 和 Chrome 在每个对象上都支持一个属性__proto__；在其他浏览器实现中，这个属性则是完全不可见的。注意，[[Prototype]]连接的是实例与构造函数的原型对象，而不是实例与构造函数。
在上面那个例子中，通过 person1.__proto__ 我们可以获得构造函数的原型对象 Person.prototype，而不是构造函数 Person。
虽然访问不到[[Prototype]]，但可以通过 isPrototpeOf() 方法来确定对象之间是否存在这种连接，例如：
```
alert(Person.prototype.isPrototypeOf(person1)); //true
alert(Person.prototype.isPrototypeOf(person2)); //true
```
ECMAScript 5 增加了一个新方法：Object.getPrototypeOf()，这个方法可以方便地取得一个对象的原型。即[[Prototype]]的值，例如：
```
alert(Object.getPrototypeOf(person1) == Person.prototype); //true
```
支持这个方法的浏览器有 IE9+、Firefox 3.5+、Safari 5+、Opera 12+ 和 Chrome。

虽然我们可以通过对象实例访问保存在原型中的值，但却不能通过对象实例重写原型中的值。当我们在实例中添加属性，如果该属性与原型中的一个属性同名，则新增的属性会屏蔽原型中的那个属性。如果你删除了实例中的同名属性，你可以重新访问原型中的属性。

使用 hasOwnProperty() 方法可以检测出一个属性是存在于实例中，还是存在于原型中。如果你给定的属性存在于对象实例中，则返回 true。
```
person1.name = "Bob";
alert(person1.hasOwnProperty("name"));  //true
delete person1.name;
alert(person1.hasOwnProperty("name"));  //false
```
1. 原型与 in 操作符
有两种方式使用 in 操作符：单独使用和在 for-in 循环中使用。
在单独使用时，如果通过对象能够访问给定属性时，in 操作符会返回 true，无论该属性存在于实例中还是原型中。
```
alert("name" in person1);   //true
```
同时使用 hasOwnProperty() 方法和 in 操作符，就能确定该属性到底是存在于对象中，还是存在于原型中。

在使用 for-in 循环时，返回的是所有能通过对象访问的、可枚举的属性，其中既包括存在于实例中的属性，也包括存在于原型中的属性。注意，实例属性即便被设置为不可枚举的（[[Enumerable]]标记为 false），依然会在 for-in 循环中返回。

要取得对象上所有可枚举的实例属性，可以使用 ECMAScript 5 的 Object.keys() 方法。这个方法接收一个对象作为参数，返回一个包含所有可枚举的实例属性的字符串数组。例如：
```
function Person(){
}
Person.prototype.name = "Alice";
Person.prototype.age = 29;

alert(Object.keys(Person)); //""，空字符串
alert(Object.keys(Person.prototype)); //"name,age"

var person1 = new Person();
person1.friends = ["Jack", "Tom"];
alert(Object.keys(person1)); //"friends"，它只有这一个实例属性
```
如果要得到所有实例属性，不管它是否可枚举，都可以使用 Object.getOwnPropertyNames() 方法。
```
alert(Object.getOwnPropertyNames(Person.prototype));    //"constructor,name,age,sayName"
```
constructor 属性是不可枚举的。

Object.keys() 和 Object.getOwnPropertyNames() 方法都可以用来替代 for-in 循环。支持这两个方法的浏览器有 IE9+、Firefox 4+、Safari 5+、Opera 12+ 和 Chrome。
1. 更简单的原型语句
在前面的例子里，每往原型对象中添加一个属性和方法，我们就要敲一遍 Person.prototype。为了减少不必要的输入，同时保持代码简洁，常见的做法是用一个包含所有属性和方法的对象字面量来重写整个原型对象，例如：
```
function Person(){
}
Person.prototype = {
    name: "Alice",
    age: 29,
    sayName: function(){
        alert(this.name);
    }
};

var person1 = new Person();
alert(person1 instanceof Person);   //true
alert(person1 instanceof Object);   //true
alert(person1.constructor == Person);   //false
alert(person1.constructor == Object);   //true
```
我们将 Person.prototype 设置为等于一个以对象字面量形式创建的新对象，这样做与之前的唯一区别是，Person.prototype.constructor 属性不再指向 Person ，而是指向 Object。这意味着 person1.constructor 也不再指向 Person，而是指向 Object。但 person1 instanceof Person 依然能合乎预取地返回 true。
如果 constructor 的值很重要，你可以手动设置它的值为 Person，以确保通过该属性能访问到适当的值。这么做会带来一个问题，原本是不可枚举的 constructor 属性被重设之后会变成可枚举的（即它的[[Enumerable]]特性被设为 true）。要解决这个问题，你可以使用之前提到过的 ECMAScript 5 的 Object.defineProperty() 方法来修改属性的特性，前提是你使用的 JavaScript 引擎兼容 ECMAScript 5。
1. 原型的动态性
我们对原型对象所作的任何修改都会立即从实例上反映出来，即便是在创建实例之后再修改原型也照样如此。
在调用实例的方法或属性时，首先会在实例中搜索，没到到的情况下会继续搜索原型，因为实例与原型的连接是一个指针，而非一个副本，因此原型中的改动会实时反馈到实例上。除非你重写了整个原型对象，切断了实例与之前那个原型的联系。
1. 原生对象的模型
不仅是你自定义的类型，就连所有原生的引用类型，都是采用这种原型模式创建的。所有原生引用类型（Object、Array、String 等等）都在其构造函数的原型上定义了方法。
通过原生对象的原型，不仅可以取得所有默认方法的引用，而且可以定义新方法。可以像修改自定义对象的原型一样修改原生对象的原型，例如你可以随时给基本包装类型 String 添加自定义方法。
```
String.prototype.sayHi = function (){
    return "Hello " + this;
}
alert("Tom".sayHi()); //"Hello Tom"
```
不推荐在产品化的程序中修改原生对象的原型，这可能导致命名冲突，从而意外地覆盖掉已有的方法。
1. 原型对象存在的问题
原型模式省略了为构造函数传递初始化参数这一环节，结果所有实例在默认情况下都将取得相同的属性值。
```
function Person(){
}
Person.prototype = {
    name: "Alice",
    age: 29,
    friends: ["Jack","Tom"],
    sayName: function(){
        alert(this.name);
    }
};

var person1 = new Person();
var person1 = new Person();

person1.friends.push("David");

alert(person1.friends); //"Jack,Tom,David"
alert(person2.friends); //"Jack,Tom,David"
```
在上面这个例子中，我们只改动了 person1 这个实例，可是其他的实例也受到了影响。假如我们的初衷就是让所有实例共享一个数组，那固然好，可总有一些时候我们不想共享，那么这种特性将成为一个麻烦。
当我们共享一个包含基本值的属性，我们可以通过在实例上添加一个同名属性来屏蔽掉原型中的属性；可是，当我们共享一个包含引用类型值的属性时，通过重写来屏蔽原型的属性似乎是不可行的。

在原型模式中，重写包含引用类型的属性会引起哪些问题？

2.4 组合使用构造函数模式和原型模式

创建自定义对象最常见的方法，是组合使用构造函数模式和原型模式。
构造函数用于定义实例属性，而原型模式用于定义方法和共享的属性。
```
function Person(name, age){
    this.name = name;
    this.age = age;
    this.friends = ["Jack","Tom"];
}
Person.prototype = {
    constructor: Person,
    sayName: function(){
        alert(this.name);
    }
}
var person1 = new Person("Alice",29);
var person2 = new Person("Bob",27);
person1.friends.push("David");
alert(person1.friends === person2.friends);  //false
alert(person1.sayName === person2.sayName);  //true
```
这种混合模式集二者之长，是目前在 ECMAScript 中使用最广泛、认同度最高的一种创建自定义类型的方法。

2.5 动态原型模式

它把所有信息都封装在构造函数中，在构造函数中初始化原型（根据需要来决定是否进行初始化）。
```
function Person(name, age){
    this.name = name;
    this.age = age;
    this.friends: ["Jack","Tom"];
    if (typeof this.sayName != "function"){
        Person.prototype.sayName = function(){
            alert(this.name);
        };
    }
}
```
在初次调用构造函数时，sayName() 方法还不存在，此时 if 语句被执行， sayName() 方法被添加到原型中。此后，原型已经完成初始化，if 语句不再被执行。

注意，不要使用字面量重写原型，假如你已经创建了一些实例，重写原型会切断现有实例与新原型之间的联系。

2.6 寄生构造函数模式

该模式创建一个函数，用于封装对象的代码，然后再返回新创建的对象。
```
function Person(name, age){
    var obj = new Object();
    obj.name = name;
    obj.age = age;
    obj.sayName = function(){
        alert(this.name);
    }
    return obj; //返回的这个对象与 Person.prototype 并没有关系
}
var friend = new Person("Alice", 29);

alert(friend instanceof Person);    //false
```
它和工厂模式的不同之处在于，它使用了 new 操作符来创建实例。
这个模式可以在特殊情况下用来创建构造函数，假设我们要创建一个具有额外方法的特殊数组，直接修改 Array 构造函数显然不合适，就可以用这个模式。
```
function SpecialArray(){
    var arr = new Array();
    arr.push.apply(arr, arguments); //用构造函数接收到的参数初始化数组
    arr.toPipedString = function (){
        return this.join("+");  //使用加号作为分隔符
    }
    return arr;
}
var fruits = new SpecialArray("Apple", "Banana", "Orange");
alert(fruits.toPipedString());  //"Apple+Banana+Orange"

alert(fruits.constructor == Array); //true
alert(fruits instanceof == SpecialArray); //false
```
这种模式有着与工厂模式一样的问题，即无法通过 instanceof 操作符来确定对象类型，因此除非别无选择，不要使用这种模式。

2.7 稳妥构造函数模式

稳妥对象，指的是没有公共属性，而且其方法也不引用 this 的对象。在一些安全的环境中会禁止使用 this 和 new，稳妥对象就能很好地适应这种环境。
稳妥构造函数模式类似于寄生构造函数模式，但它们有两点不同：一是新创建对象的实例方法不引用 this；二是不使用 new 操作符调用构造函数。
```
function Person(name, age){
    var obj = new Object();
    obj.sayName = function(){
        alert(name);
    }
    return obj;
}
var person1 = Person("Alice", 29);
```
在以这种模式创建出的稳妥对象中，除了使用 sayName() 方法之外，没有其他办法访问到 name 的值。即使你给这个稳妥对象添加方法或数据属性，也无法访问传入到构造函数中的原始数据。
与寄生构造函数模式类似，稳妥构造函数模式也无法通过 instanceof 操作符来确定对象类型。

3.继承

许多面向对象语言都支持两种继承方式：接口继承和实现继承。接口继承只继承方法签名，而实现继承则继承实际的方法。而 ECMAScript 的函数没有签名，因此它无法实现接口继承，只支持实现继承。
ECMAScript 的实现继承主要依靠原型链来实现。

3.1 原型链

原型链的基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。
让我们复习一下：每个函数都有一个原型对象，构造函数也不例外。由构造函数创建的实例，内部包含一个指针指向构造函数的原型对象。
假如我们让某个构造函数 A 的原型对象等于另一个构造函数 B 的实例，此时 A 的原型对象将包含一个指向 B 的原型对象的指针。假如 B 的原型对象又是构造函数 C 的实例，以此类推，就构成了一条原型链。
```
function SuperType(){
    this.property = "father";
}
SuperType.prototype.getSuperValue = function(){
    return this.property;
}

function SubType(){
    this.subproperty = "son";
}

SubType.prototype = new SuperType();    //继承 SuperType 的实例中的所有属性和方法

SubType.prototype.getSubValue = function(){ //继承之后在自己的原型对象上新添一个方法 
    return this.subproperty;
}
var instance = new SubType();
alert(instance.property);   //"father"
alert(instance.getSuperValue());    //"father"
alert(instance.subproperty);    //"son"
alert(instance.getSubValue());  //"son"
alert(instance.constructor == SuperType);   //true
```
实现的本质是重写原型对象，代之以一个新类型的实例。
当以读取模式访问一个实例属性时，首先会在实例中搜索，没找到则继续搜索实例的原型，如果存在原型链，搜索过程可以沿着原型链继续向上。
1. 别忘记默认的原型
所有引用类型默认继承了 Object，这个继承也是通过原型链实现的。所有函数的默认原型都是 Object 的实例，因此默认原型都会包含一个内部指针 [[Prototype]]，指向 Object.protoytype，这正是所有自定义类型都会继承 toString()、valueOf() 等默认方法的根本原因。
1. 确定原型和实例的关系
有两种方式确定原型和实例的关系。
第一种是使用 instanceof 操作符，第二种是使用 isPrototypeOf() 方法。用这个两种方法测试实例与原型链中出现过的构造函数，结果会返回 true。
1. 谨慎地定义方法
子类型如果要覆盖父类型中的方法，或者添加父类型中不存在的方法，添加方法的语句一定要放在替换原型的语句之后。如果放在之前，覆盖或者新添的操作将无效。
在通过原型链实现继承时，不能使用字面量形式创建原型方法，因为字面量的原型对象会覆盖继承而来的原型对象，重写原型链。
1. 原型链的问题
前面介绍过，包含引用类型值的原型属性会被所有实例共享，所以我们通常会在构造函数中定义实例属性，在原型对象中定义方法和共享属性。
在通过原型来实现继承时，子类型的原型会变成父类型的一个实例，于是，父类型的实例属性会变成子类型的原型属性。假如父类型的实例属性包含了一个原本期望不被共享的引用类型的值，在被子类型继承之后，子类型的所有实例都会共享这个引用类型的值，只要任意一个实例改动了这个引用类型值，所有实例都会受影响。
另一个问题是，在创建子类型的实例时，不能向父类型的构造函数中传递参数。
因此，实践中很少会单独使用原型链。

3.2 借用构造函数

也称伪造对象或经典继承，基本思想是在子类型构造函数的内部调用父类型构造函数。
```
function SuperType(){
    this.colors = ["red", "green", "blue"];
}
function SubType(){
    SuperType.call(this);   //在子类型构造函数的内部调用父类型构造函数
}
```
通过这种方法，父类型的实例属性就不会被所有实例共享了，每个实例都有该属性的一个副本，互不干涉。
1. 传递参数
相当于原型链而言，借用构造函数有一个很大的优势，即可以在子类型构造函数中向父类构造函数传递参数。
```
function SuperType(name){
    this.name = name;
}
function SubType(){
    SuperType.call(this, "Alice");   //继承的同时还传递了参数
    this.age = 29;  //继承之后再添加子类型的实例属性
}
```
为了防止父类型的构造函数重写子类型的同名属性，尽量在继承之后再往子类型中添加添加属性。
1. 借用构造函数的问题
在父类型的原型中定义的方法，对子类型是不可见的。假如把方法都定义在构造函数中，函数复用就无从谈起。
因此，经典继承（借用构造函数）也是很少单独使用的。

3.3 组合继承

也叫做伪经典继承，即将原型链和借用构造函数组合到一起，取长补短的一种继承模式。它使用原型链实现对原型属性和方法的继承，使用经典继承（借用构造函数）实现对实例属性的继承，既实现了函数复用，又保证了每个实例都有只属于自己的属性。
```
function SuperType(name){
    this.name = name;
    this.colors = ["red", "green", "blue"];
}
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 的实例准确识别自己的类型
SubType.prototype.sayAge = function(){
    alert(this.age);
}

var instance1 = new SubType("Alice", 29);
instance1.sayName();    //"Alice"
instance1.sayAge(); //29
instance1.colors.push("yellow");
alert(instance1.colors);    //"red,green,blue,yellow"
var instance2 = new SubType("Bob", 27);
alert(instance2.colors);    //"red,green,blue"
```
组合继承是 JavaScript 中最常用的继承模式。instanceof 和 isPrototypeOf() 可以识别基于组合继承创建的对象。

3.4 原型式继承

这种实现继承的方法并没有使用严格意义上的构造函数，它只需借助原型就可以基于已有的对象创建新对象，而且不需要创建自定义类型。
```
function obj(proto){
    function F(){}
    F.prototype = proto;
    return new F();
}
```
本质上讲，上面这个函数对传入其中的 proto 对象执行了一次浅复制。
```
var person = {
    name: "Alice",
    friends: ["Jack", "Tom"]
}
var person2 = obj(person);    //原型式继承
person2.name = "Bob";
person2.friends.push("Jeff");
var person3 = obj(person);    //原型式继承
person3.name = "David";
person3.friends.push("Soctt");

alert(person.friends);  //"Jack,Tom,Jeff,Soctt"
```
ECMAScript 5 新增的 Object.create() 方法规范化了原型式继承，它接受两个参数，一个是新对象的原型，一个是新对象的额外属性（可选）。对额外属性的描述格式可以参照 Object.defineProperties()，新对象的同名属性会覆盖原型对象上的同名属性。
```
var person3 = Object.create(person, {
    name: {
        writable: true,
        value: "Sam"
    }
});
alert(person3.name);    //"Sam"
```
如果你只想让一个对象与另一个对象保持类似，就没有必要创建构造函数（通过原型链继承，经典继承和伪经典继承都需要创建构造函数），原型式继承就足以胜任了。
这种模式的缺点，就是包含引用类型值的属性会被所有实例共享，和原型链模式的继承一样。

3.5 寄生式继承

它与原型式继承紧密相关，它的思路与工厂模式类似，即创建一个仅用于封装继承过程的函数，该函数以某种方式增强对象，然后返回对象。
```
function createPerson(proto){
    var clone = obj(proto);   //采用原型式继承，即通过调用函数创建新对象
    clone.sayHi = function(){   //增强这个对象
        alert("hi");
    };
    return clone;   //返回这个对象
} 
var person = {
    name: "Alice",
    friends: ["Jack", "Tom"]
};
var person1 = createPerson(person);
person1.sayHi();    //"hi"
```
此处的 obj() 函数并非必需，任意能返回新对象的函数都行。
使用寄生式继承来为对象添加函数的话，每个实例创建的方法都是不同的，无法做到函数复用，就像经典继承一样。

3.6 寄生组合式继承

组合继承是 JavaScript 最常用的继承模式，但它也有不足之处，即无论在什么情况下，都会调用两次父类型的构造函数，那么在父类型的构造函数中定义的属性就会出现两份，一份在子类型的实例上，一份在子类型的原型上。这显然是一种资源浪费，子类型原型中已经存在的属性没必要在子类型的实例上重新创建一遍。使用寄生组合式继承就可以避免这个问题。
使用寄生式继承来继承父类型的原型，可以避免在指定子类型的原型时对父类型构造函数的调用，具体做法就是，将组合继承中为子类型原型赋值的 SubType.prototype = new SuperType(); 这行代码优化成以下代码：
```
function inherit(subType, superType){   //传入两个参数：子类型的构造函数和父类型的构造函数
    var prototype = obj(superType.prototype);   //创建新的原型对象，实质上就是父类型原型的一个副本
    prototype.constructor = subType;    //增强这个对象，弥补因重写原型而丢失的 constructor 属性
    subType.prototype = prototype;  //将新建的对象赋值给子类型的原型
}
```
寄生组合式继承通过经典继承来继承属性，通过原型链来继承方法。
```
function SuperType(name){
    this.name = name;
    this.colors = ["red", "green", "blue"];
}
SuperType.prototype.sayName = function(){
    alert(this.name);
}
function SubType(name, age){
    SuperType.call(this, name);   //经典继承，通过调用构造函数继承属性
    this.age = age;
}

inherit(SubType, SuperType);    //避免了对 SuperType() 的调用

SubType.prototype.sayAge = function(){  //通过原型链继承方法
    alert(this.age);
}
```
instanceof 和 isPrototypeOf() 可以识别基于寄生组合式继承创建的对象。因此，它被认为是引用类型最理想的继承模式。
查看全文

相关阅读:
&与&&的区别
 jsp之response方法
 一个数组先按照某个属性的大小排序，如果大小一样的就按照名称排序
 CSS内部div设置上min-height或max-height滚动条就会出现在父元素上
 300行代码手写简单vue.js，彻底弄懂MVVM底层原理
 JavaScript简单手写观察者模式
 javascript中replace还可以这样玩
 VUE中通过改变key去更新局部dom
element中select的change方法如何传多个参数
 react打包中不想要sourceMap，但是在命令里加'GENERATE_SOURCEMAP=false'后windows下报错'GENERATE_SOURCEMAP' 不是内部或外部命令，也不是可运行的程序或批处理文件。

原文地址：https://www.cnblogs.com/zhangjun2013551829/p/12829024.html

JavaScript——面向对象的程序设计——创建对象与继承

1.理解对象

1.1 属性类型

1.2 定义多个属性

1.3 读取属性的特性

2.创建对象

2.1 工厂模式

2.2 构造函数模式

2.3 原型模式

2.4 组合使用构造函数模式和原型模式

2.5 动态原型模式

2.6 寄生构造函数模式

2.7 稳妥构造函数模式

3.继承

3.1 原型链

3.2 借用构造函数

3.3 组合继承

3.4 原型式继承

3.5 寄生式继承

3.6 寄生组合式继承