js零散笔记04--实现继承的方法及优缺点总结

#JavaScript实现继承的方法及优缺点总结
本文内容参考《JavaScript高级程序设计》第三版

原型链

ECMAScript中描述了原型链的概念，并将原型链作为实现继承的主要方法。
原型链继承的基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。
简单回顾一下构造函数、原型和实例的关系：每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，而实例都包含一个指向原型对象的内部指针。

那么，假如我们让原型对象等于另一个类型的实例，结果会怎么样呢？显然，此时的原型对象将包含一个指向另一个原型的指针，相应地，另一个原型中也包含着一个指向另一个构造函数的指针。假如另一个原型又是另一个类型的实例，那么上述关系依然成立，如此层层递进，就构成了实例与原型的链条。这就是所谓原型链的基本概念。

原型继承：

function SuperType(){
 this.colors = ["red", "blue", "green"];
}

function SubType(){
}
//继承了SuperType
SubType.prototype = new SuperType();

var instance1 = new SubType();
instance1.colors.push("black");
console.log(instance1.colors);  //"red,blue,green,black"

var instance2 = new SubType();
console.log(instance2.colors);  //"red,blue,green,black"

let Super = functioin(name) {
    this.name = name;
    this.setName = (newName) => {
        this.name = name;
    };
    this.getName = () => {
        return this.name;
    }
}

let Sub = function(sex) {
    this.sex = sex;
}
Sub.prototype = new Super('eric');  //通过改变原型对象实现继承
let sub1 = new Sub('male')
     sub2 = new Sub('female');

sub1.setName('ada');
// 这里必须通过setName方法来修改继承来的name属性。
// 如果通过sub1.name== 'ada',就打不到目的，因为此时sub1对象上没有name属性，
// 这样等于为该对象添加了新的属性，而不是修改继承而来的name属性。
console.log(sub2.name); // ada,可见此sub2的name也会被修改掉
console.log(sub1.getName === sub2.getName) // true,复用了方法

原型链的问题

原型链虽然很强大，可以用它来实现继承，但它也存在一些问题。其中，最主要的问题来自包含引用类型值的原型。
原型链的第二个问题是：在创建子类型的实例时，不能向超类型的构造函数中传递参数。实际上，应该说是没有办法在不影响所有对象实例的情况下，给超类型的构造函数传递参数。有鉴于此，再加上前面刚刚讨论过的由于原型中包含引用类型值所带来的问题，实践中很少会单独使用原型链。

总结：原型链的优点是父类的方法得到了复用；缺点是父类的属性得到了复用从而使得子类实例不能有自己的属性。这是由于原型链的共享性造成的，这样的话，一个子类实例改变属性，那么其他子类实例也会改变相应的属性。

借用构造函数

在子类型构造函数的内部调用超类型构造函数

function SuperType() {
 this.colors = ['red', 'blue', 'green'];
}
function SubType() {
 SuperType.call(this);
}
var instance1 = new SubType();
instance1.colors.push("black");
console.log(instance1.colors); //"red,blue,green,black"

var instance2 = new SubType();
console.log(instance2.colors); //"red,blue,green"

通过使用call()方法（或apply()方法也可以），我们实际上是在（未来将要）新创建的SubType实例的环境下调用了SuperType构造函数。这样一来，就会在新SubType对象上执行SuperType()函数中定义的所有对象初始化代码。结果，SubType的每个实例就都会具有自己的colors属性的副本了。

借用构造函数的问题

方法都在构造函数中定义，因此函数复用就无从谈起了。而且，在超类型的原型中定义的方法，对子类型而言也是不可见的，结果所有类型都只能使用构造函数模式

总结:优点：子类的每个实例都有自己的属性（name），不会相互影响。
缺点：但是继承父类方法的时候就不需要这种特性，没有实现父类方法的复用。

组合式继承

组合继承（combination inheritance），有时候也叫做伪经典继承，指的是将原型链和借用构造函数的技术组合到一块，从而发挥二者之长的一种继承模式。其背后的思路是使用原型链实现对原型属性和方法的继承，而通过借用构造函数来实现对实例属性的继承。这样，既通过在原型上定义方法实现了函数复用，又能够保证每个实例都有它自己的属性.

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;
}

//继承方法
SubType.prototype = new SuperType();
SubType.prototype.sayAge = function(){
 console.log(this.age);
};

var instance1 = new SubType("Nicholas", 29);
instance1.colors.push("black");
console.log(instance1.colors);  //"red,blue,green,black"
instance1.sayName();   //"Nicholas";
instance1.sayAge();   //29

var instance2 = new SubType("Greg", 27);
console.log(instance2.colors);  //"red,blue,green"
instance2.sayName();   //"Greg";
instance2.sayAge();   //27

组合继承避免了原型链和借用构造函数的缺陷，融合了它们的优点，成为JavaScript中最常用的继承模式。而且，instanceof和isPrototypeOf也能够用于识别基于组合继承创建的对象。

无论什么情况下，都会调用两次超类型构造函数：一次是在创建子类型原型的时候，另一次是在子类型构造函数内部.

总结:优点：继承了上述两种方式的优点，摒弃了缺点，复用了方法，子类又有各自的属性。
缺点：因为父类构造函数被执行了两次，子类的原型对象(Sub.prototype)中也有一份父类的实例属性，而且这些属性会被子类实例(sub1,sub2)的属性覆盖掉，也存在内存浪费。

寄生式继承

创建一个仅用于封装继承过程的函数，该函数在内部以某种方式来增强对象，最后再像真的是它做了所有工作一样返回对象

function createAnother(original){
 var clone = Object.create(original); //通过调用函数创建一个新对象
 clone.sayHi = function(){   //以某种方式来增强这个对象
  console.log("hi");
 };
 return clone;     //返回这个对象
}

在这个例子中，createAnother()函数接收了一个参数，也就是将要作为新对象基础的对象。然后，把这个对象（original）传递给object()函数，将返回的结果赋值给clone。再为clone对象添加一个新方法sayHi()，最后返回clone对象。可以像下面这样来使用createAnother()函数：

var person = {
 name: "Nicholas",
 friends: ["Shelby", "Court", "Van"]
};

var anotherPerson = createAnother(person);
anotherPerson.sayHi(); //"hi"

这个例子中的代码基于person返回了一个新对象——anotherPerson。新对象不仅具有person的所有属性和方法，而且还有自己的sayHi()方法

使用寄生式继承来为对象添加函数，会由于不能做到函数复用而降低效率；这一点与构造函数模式类似

寄生组合式继承

组合继承最大的问题就是无论什么情况下，都会调用两次超类型构造函数：一次是在创建子类型原型的时候，另一次是在子类型构造函数内部。没错，子类型最终会包含超类型对象的全部实例属性，但我们不得不在调用子类型构造函数时重写这些属性。

let Super = function(name) {
    this.name = name;
}
Super.prototype = {
    constructor: Super,
    getName() {
        return this.name;
    }
}
let Sub = function(sex,name) {
    Super.call(this,name);
    this.sex = sex;
}

组合继承的缺点就是在继承父类方法的时候调用了父类构造函数，从而造成内存浪费，现在只要解决了这个问题就完美了。那在复用父类方法的时候，使用Object.create方法也可以达到目的，没有调用父类构造函数，问题解决。

1 2	Sub.prototype = Object.create(Super.prototype); Sub.prototype.constructor = Sub;

再看下面的例子：

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);   //第二次调用SuperType()

 this.age = age;
}

SubType.prototype = new SuperType(); //第一次调用SuperType()
SubType.prototype.constructor = SubType;
SubType.prototype.sayAge = function(){
 console.log(this.age);
};

在第一次调用SuperType构造函数时，SubType.prototype会得到两个属性：name和colors；它们都是SuperType的实例属性，只不过现在位于SubType的原型中。当调用SubType构造函数时，又会调用一次SuperType构造函数，这一次又在新对象上创建了实例属性name和colors,于是，这两个属性就屏蔽了原型中的两个同名属性

所谓寄生组合式继承，即通过借用构造函数来继承属性，通过原型链的混成形式来继承方法。
其背后的基本思路是：不必为了指定子类型的原型而调用超类型的构造函数，我们所需要的无非就是超类型原型的一个副本而已。本质上，就是使用寄生式继承来继承超类型的原型，然后再将结果指定给子类型的原型。寄生组合式继承的基本模式如下所示

function inheritPrototype(subType, superType){
 var prototype = Object.create(superType.prototype);  //创建对象
 prototype.constructor = subType;     //增强对象
 subType.prototype = prototype;      //指定对象
}

这个示例中的inheritPrototype()函数实现了寄生组合式继承的最简单形式。这个函数接收两个参数：子类型构造函数和超类型构造函数。在函数内部，第一步是创建超类型原型的一个副本。第二步是为创建的副本添加constructor属性，从而弥补因重写原型而失去的默认的constructor属性。最后一步，将新创建的对象（即副本）赋值给子类型的原型。这样，我们就可以用调用inheritPrototype()函数的语句，去替换前面例子中为子类型原型赋值的语句了

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;
}

inheritPrototype(SubType, SuperType);

SubType.prototype.sayAge = function(){
 console.log(this.age);
};

这个例子的高效率体现在它只调用了一次SuperType构造函数，并且因此避免了在SubType.prototype上面创建不必要的、多余的属性。与此同时，原型链还能保持不变；因此，还能够正常使用instanceof和isPrototypeOf()。开发人员普遍认为寄生组合式继承是引用类型最理想的继承范式。

es6中的class

class Super() {
    constructor(props = { name: 'eric' }) {
        this.name = props.name;
    }
    setName(name) {
        this.name = name;
    }
    getName() {
        return this.name;
    }
}
class Sub extends Super {
    constructor(props) {
        super(props = { sex: 'male' }); // 创建实例，继承父类属性和方法
        this.sex = props.sex;
    }
}
let sub1 = new Sub({
    name: 'eric',
    sex: 'male'
})
let sub2 = new Sub({
    name: 'eric',
    sex: 'female'
})