前端继承方式汇总

1 原型链继承

核心：让子类的原型指向父类的实例

ChildType.prototype = new ParentType() // 全部涉及到原型链继承的继承方式都要修改子类构造函数的指向，不然子类实例的构造函数会指向PerentType。

ChildType.prototype.constructor =ChildType;

优势：父类方法能够复用
缺点：

• 父类的引用属性会被全部子类实例共享
• 子类构建实例时不能向父类传递参数

2 .构造函数继承

核心：将父类构造函数的内容复制给了子类的构造函数。这是全部继承中惟一一个不涉及到prototype的继承。

ParentType.call(ChildType);

优势：和原型链继承彻底反过来。

• 父类的引用属性不会被共享
• 子类构建实例时能够向父类传递参数

缺点：父类的方法不能复用，子类实例的方法每次都是单首创建的。

3 .组合继承

核心：原型式继承和构造函数继承的组合，兼具了两者的优势。

function ParentType() { this.name = 'parent'; this.arr = [1, 2, 3]; }

ParentType.prototype.say = function() { console.log('this is parent') }
function ChildType() {
ParentType.call(this) 
// 第二次调用ParentType
} 
ChildType.prototype = new ParentType() // 第一次调用ParentType

优势：

• 父类的方法能够被复用
• 父类的引用属性不会被共享
• 子类构建实例时能够向父类传递参数

缺点：
调用了两次父类的构造函数，第一次给子类的原型添加了父类的name, arr属性，第二次又给子类的构造函数添加了父类的name, arr属性，从而覆盖了子类原型中的同名参数。这种被覆盖的状况形成了性能上的浪费。

4 原型式继承

核心：原型式继承的object方法本质上是对参数对象的一个浅复制。
优势：父类方法能够复用
缺点：

• 父类的引用属性会被全部子类实例共享
• 子类构建实例时不能向父类传递参数

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"

上文中代码能够转变为

var yetAnotherPerson = object(person); => var yetAnotherPerson = Object.create(person);

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"

6 寄生组合继承

刚才说到组合继承有一个会两次调用父类的构造函数形成浪费的缺点，寄生组合继承就能够解决这个问题。

function inheritPrototype(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(){ alert(this.name); }; function SubType(name, age){ SuperType.call(this, name); this.age = age; } // 核心：由于是对父类原型的复制，因此不包含父类的构造函数，也就不会调用两次父类的构造函数形成浪费
inheritPrototype(SubType, SuperType); SubType.prototype.sayAge = function(){ alert(this.age);

优缺点：这是一种完美的继承方式。

7:ES6 Class extends

核心： ES6继承的结果和寄生组合继承类似，本质上，ES6继承是一种语法糖。可是，寄生组合继承是先建立子类实例this对象，而后再对其加强；而ES6先将父类实例对象的属性和方法，加到this上面（因此必须先调用super方法），而后再用子类的构造函数修改this。

class A {} class B extends A { constructor() { super(); } }

class A { } class B { } Object.setPrototypeOf = function (obj, proto) { obj.__proto__ = proto; return obj; } // B 的实例继承 A 的实例
Object.setPrototypeOf(B.prototype, A.prototype); // B 继承 A 的静态属性
Object.setPrototypeOf(B, A);

ES6继承与ES5继承的异同：
相同点：本质上ES6继承是ES5继承的语法糖
不一样点：

• ES6继承中子类的构造函数的原型链指向父类的构造函数，ES5中使用的是构造函数复制，没有原型链指向。
• ES6子类实例的构建，基于父类实例，ES5中不是。