JS继承

一、原型链

1、构造函数、原型、实例的关系：
（1）每个［构造函数］都有一个［原型对象］
（2）［原型对象］都包含一个指向［构造函数］的指针
（3）每个［实例］包含一个指向［原型对象］的内部指针

        －－－－>构造函数原型对象<－－－－（内部指针）  ^  |  |  | 实例

2、默认原型对象：Object
这正是所有自定义类型都会拥有toString( )，ValueOf( )等方法

3、确定原型以及实例的关系
（1）instanceof
测试实例与原型链中出现的构造函数

alert(instance instanceof Object) //true

（2）isPrototypeof( )
只要原型链中出现的原型，都是［实例］的原型

alert(Object.protype.isPrototypeof(instance)); //true

4、原型链的问题：
（1）包含引用类型值的原型
假设父类有一个color数组（引用类型值），而且每个子类也都有一个color数组。问题在于，当子类继承自父类时，相当于每个子类共享父类的color数组，而不是每个子类独自拥有一个color数组的属性。

function superType() {    this.color = ["red", "blue"];}function subType() {}subType.prototype = new superType();var ins1 = new subType();ins1.color.push("black");alert(ins1.color);  // red, blue, blackvar ins2 = new subType();alert(ins2.color);  // red, blue, black

（2）在创建子类时，不能向超类的构造函数传递参数

二 、借用构造函数

目的：解决原型链中出现的问题
思想：在子类构造函数中，调用超类构造函数

function superType() {    this.color = ["red", "blue"];}function subType() {    superType.call(this);}subType.prototype = new superType();var ins1 = new subType();ins1.color.push("black");alert(ins1.color);  // red, blue, blackvar ins2 = new subType();alert(ins2.color);  // red, blue

三、组合继承

思想：将原型链和借用构造函数组合在一起
原型链：实现对原型属性和方法的继承
借用构造函数：实现对实例属性的继承
最终目的：每个实例有自己的属性，却也能够使用原型的方法

function superType(name) {      this.name = name;    this.color = ["red", "blue"];}superType.prototype.sayName = function () {    console.log(this.name);}function subType(name, age) {    //继承属性    superType.call(this, name);    this.age = age;}//继承方法subType.prototype = new superType();subType.prototype.constructor = subType;subType.prototype.sayAge = function () {    console.log(this.age);}var ins1 = new subType("Nicholas", 29);ins1.color.push("black");console.log(ins1.color);    // red, blue, blackins1.sayName();ins1.sayAge();var ins2 = new subType("Greg", 27);console.log(ins2.color);  // red, blueins2.sayName();ins2.sayAge();

四、原型式继承

思想：借助原型，基于原有的对象创建新对象

function object(o) {    //临时性构造函数    function F() {}    //将传入对象作为构造函数的原型    F.prototype = o;    //返回临时类型的一个实例    return new F();}

ES5中：object.create( )规范化了原型式继承
与object( )方法的的行为相同

var person = {    name: "Nick",    friends: ["she", "he", "it"]};//第一个参数为被继承的原型对象var A = Object.create(person);A.name = "Greg";A.friends.push("Bob");//第二个可选参数是，为新对象设置属性var B = Object.create(person, {    name : {        value: "Greg"   }    });console.log(person.friends);console.log(B.name);

五、寄生式继承

思想：创建一个仅用于封装继承过程的函数

//寄生式继承(类似于工厂模式)function create(o) {    var clone = Object(o);    clone.sayHi = function () {        console.log("hi");    };    return clone;}var person = {    name: "Nick",    friends: ['A', 'B', 'C']}var D = create(person);D.sayHi();

六、寄生组合式继承

组合继承的问题：无论什么情况下，都会调用两次超类构造函数

function superType(name) {      this.name = name;    this.color = ["red", "blue"];}superType.prototype.sayName = function () {    console.log(this.name);}function subType(name, age) {    superType.call(this, name);       //第二次调用superType    this.age = age;}subType.prototype = new superType();  //第一次调用superTypesubType.prototype.constructor = subType;subType.prototype.sayAge = function () {    console.log(this.age);}

寄生组合式继承思想：借助构造函数来继承属性，通过原型链的混合模式来继承方法

//寄生组合式继承function inherit(subType, superType) {    var prototype = Object (superType.prototype); //创建对象    prototype.constructor = subType;              //增强对象    subType.prototype = prototype;                //指定对象}function superType (name) {    this.name = name;    this.colors = ['red', 'blue', 'green'];}superType.prototype.sayName = function() {    console.log(this.name);};//通过借用构造函数继承属性function subType(name, age) {    superType.call(this, name);    this.age = age;}inherit(subType, superType);subType.prototype.sayAge = function() {    console.log(this.age);};var A = new superType("Apple");var B = new subType("Bob", 15);B.colors.push("Black");console.log(A.colors);  //[ 'red', 'blue', 'green' ]  console.log(B.colors);  //[ 'red', 'blue', 'green', 'Black' ]A.sayName();            //AppleB.sayName();            //BobB.sayAge();             //15

七、总结: 创建对象的模式

• 工厂模式
• 构造函数模式
• 原型模式
• 原型式模式
• 寄生式模式
• 寄生组合继承