JavaScript实现继承的7种方式

1. 原型链继承
   通过将子类的原型等于父类的实例来实现的Child.prototype = new Person()

'use strict'
// 原型链继承
function Person(name){
    this.name=name;
}
Person.prototype.sayHello=function(){
    console.log("Hello "+this.name);
}

function Child(){
    this.name="Charlie";
}

//通过将子类原型指向父类实例实现
Child.prototype=new Person();
var child=new Child();
child.sayHello(); //输出Hello Charlie

注意事项：

• 新实例无法向父类构造函数传参
• 继承单一
• 所有新实例都会共享父类实例的属性。（原型上的属性是共享的，一个实例修改了原型属性，另一个实例的原型属性也会被修改）
  
  

2. 构造函数继承
   用call或apply将父类构造函数引入子类函数

'use strict'
//构造函数式继承
function Person(name){
    this.name=name;
}
Person.prototype.sayHello=function(){
    console.log("Hello "+this.name);
}

function Child(){
    Person.call(this,"Dan");
}
var child=new Child();
console.log(child.name);
child.sayHello(); //报错，无法继承父类原型上的东西

注意事项：

• 只继承了父类构造函数的属性，没有继承父类原型的属性
• 解决了原型链继承的注意事项3点
• 可以继承多个构造函数的属性（call可以多个）
  
  

3. 组合式继承
   组合继承是原型链继承和构造函数继承的组合

'use strict'
//组合式继承
function Person(name){
    this.name=name;
}
Person.prototype.sayHello=function(){
    console.log("Hello "+this.name);
}

function Child(name){
    Person.call(this,name);
}

Child.prototype=new Person();
var child=new Child("Emma");
child.sayHello(); //Hello Emma

关键点：结合了两种模式的优点：向父类传参（call）和复用（可以继承父类prototype上的函数和属性）

特点：可以继承父类原型的属性，可以传参，可以复用

4. 原型式继承
   封装一个函数容器，用来承载继承的原型和输出对象。然后返回这个函数的调用，这个函数就变成了可以随意增添属性的实例或对象。

'use strict'
//原型式继承
function Person(name){
    this.name=name;
}
Person.prototype.sayHello=function(){
    console.log("Hello "+this.name);
}

//封装一个函数容器，用来承载继承的原型和输出对象
function object(obj){
    function F() {};
    F.prototype=obj;
    return new F();
}

var super0=new Person();
var super1=object(super0);
super1.name="Frank"; //加入这句话后下面的语句正常输出Hello Frank
super1.sayHello();  //如果没有加上面的语句，输出Hello undefined，因为没有输入参数

5. 寄生式继承
   关键点：给原型式继承外面套个壳子来传递参数

'use strict'
//寄生式继承，给原型式继承套一个函数用来传参
function Person(name){
    this.name=name;
}
Person.prototype.sayHello=function(){
    console.log("Hello "+this.name);
}

//封装一个函数容器，用来承载继承的原型和输出对象
function object(obj){
    function F() {};
    F.prototype=obj;
    return new F();
}

//套个函数用来传参
function subobject(obj){
    var sub=object(obj);
    sub.name="Gina";
    return sub;
}

var person=new Person();
var sub=subobject(person);
sub.sayHello();  //Hello Gina

6. 寄生组合式继承
   和组合继承一样，都比较常用。寄生：在函数内返回对象然后调用
   组合：函数的原型等于另一个实例；在函数中调用apply或call引入另一个构造函数，可传参

// 寄生
function object(obj) {
    function F(){}
    F.prototype = obj;
    return new F();
}
// object是F实例的另一种表示方法
var obj = object(Person.prototype);
// obj实例（F实例）的原型继承了父类函数的原型
// 上述更像是原型链继承，只不过只继承了原型属性

// 组合
function Sub() {
    this.age = 100;
    Person.call(this); // 这个继承了父类构造函数的属性
} // 解决了组合式两次调用构造函数属性的特点

// 重点
Sub.prototype = obj;
console.log(Sub.prototype.constructor); // Person
obj.constructor = Sub; // 一定要修复实例
console.log(Sub.prototype.constructor); // Sub
var sub1 = new Sub();
// Sub实例就继承了构造函数属性，父类实例，object的函数属性
console.log(sub1.job); // frontend
console.log(sub1 instanceof Person); // true

7. es6新定义class和extends继承

'use strict'
// 用class实现继承
class Person{
    constructor(name){
        this.name=name;
    }
    sayHello(){
        console.log('Hello '+this.name);
    }
}

class Child extends Person{
    constructor(name){
        super(name);
    }
}

var child=new Child('Alice');
child.sayHello();

最简洁易懂。子类中必须定义super函数来调用父类的构造函数实现继承。