面试复习之Js实现继承

Js中继承的实现主要依靠原型链，但

原型链虽然强大，也存在一些问题：

1.最主要的问题来自包含引用类型的原型属性。（牵一发动全身）
(这也是为什么定义属性我们写在构造函数中，而不写在原型对象中的原因)
当我们通过原型去实现继承一个构造函数的时候，就把构造函数里的引用类型的属性给放到原型中去了。
这时候我们继承得到的这个新对象它的原型中有引用类型属性，大家的属性的修改就是共享的
看下面例子：

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

function SubType() {
}

//继承了superType()
SubType.prototype = new SuperType();

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,black

所以实际中很少单独使用原型链去实现继承

改进：

借用构造函数

通过使用call（）或apply（）方法在新创建环境下执行构造函数，改变this指向，这样每一个实例就都有自己属性的副本了。
（相当于继承的属性还在放在构造函数中，没有放在原型中）

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

function SubType() {
  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

单纯使用构造函数的问题：方法都在构造函数中定义，函数复用无从谈起
改进：

组合继承(js最常用的继承模式)

原理：使用原型链实现对原型属性和方法的继承，通过借用构造函数实现对实例属性的继承。

// 组合继承
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);
  this.age = age;
}
// 继承方法
SubType.prototype = new SuperType();
SubType.prototype.constuctor = SubType;
SubType.prototype.sayAge = function () {
  alert(this.age);
}

var instance1 = new SubType("sdsd", 29);
instance1.colors.push("black");
alert(instance1.colors);    //red,blue,green,black
instance1.sayName();       //sdsd
instance1.sayAge();
var instance2 = new SubType("sdssssd", 23);
alert(instance2.colors);    //red,blue,green
instance2.sayName();           // sdssssd
instance2.sayAge();

接下来几种继承方式比较像对上面方式的进一步封装

原型式继承（同样存在着单纯原型链继承的缺陷）

function object(o){
            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"

es5封装的原型式继承

Object.create()

该方法接受两个参数：一个用作新对象原型的对象，一个为新对象定义额外属性的对象。

寄生式继承（不能作用函数复用而降低效率）

创建一个仅用于封装继承过程的函数，该函数在内部以某种方式来增强对象，最后返回对象

//传入要继承的对象
function createAnother(original) {
  var clone = object(original)  //不一定要用前面的Object方法，能返回新对象就可以了
  clone.sayHi = function () {
    alert('hi')
  }
}

升级

寄生组合式继承

组合式继承虽然最常用，但仍存在不足：无论什么情况下，都会调用两次超类型构造函数

看下面例子

// 组合继承
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.constuctor = SubType;
SubType.prototype.sayAge = function () {
  alert(this.age);
}

var instance1 = new SubType("sdsd", 29);
instance1.colors.push("black");
alert(instance1.colors);    //red,blue,green,black
instance1.sayName();       //sdsd
instance1.sayAge();
var instance2 = new SubType("sdssssd", 23);
alert(instance2.colors);    //red,blue,green
instance2.sayName();           // sdssssd
instance2.sayAge();

在上例子中，有两组Name和colors，一组在SubType()原型中，一组在实例上， 这就是两次调用SuperType构造函数的结果，解决办法：

寄生组合式继承

原理：通过构造函数继承属性，通过原型链的混成形成来继承方法。
思路：不必为了指定子类型的原型而调用超类型的构造函数，我们所需要的无非就是超类型原型的一个副本而已；

基本模式如下

function inheritPrototype(subType, SuperType) {
  var prototype = object(SuperType.prototype);   //创建对象
  prototype.constuctor = subType;                //增强对象
  subType.prototype = prototype;                 //指定对象
}

这样就可以用inheritPrototype去替换组合继承中为子类型原型赋值的语句了

// 寄生组合式继承
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);  
  this.age = age;
}
// 继承方法
inheritPrototype(SubType, SuperType);
SubType.prototype.sayAge = function () {
  alert(this.age);
}