Javascript中的继承

很多语言中都有继承的概念，继承这种东西为什么会出现？

简而言之，继承之所以出现，就是为了减少重复无用功。
好比爸爸有10万块，并且还有一项技能：用各种理财手段把10万变成100万，儿子们都想手里有钱并精通理财，那么只需要从爸爸那儿继承钱和理财的方法，不用再自己苦哈哈得挣钱学理财了。

第一种：原型链继承

原型链继承非常的简单粗暴，就是让子类的prototype指向父类的一个实例，如下：

function Parent(name){
  this.name = name;
  this.friends = ['a','b','c','d'];
}
function Child() {
}
// 子类的原型是父类的一个实例
Child.prototype = new Parent('father');
let child1 = new Child();
let child2 = new Child();

console.log(child1.friends, child2.friends);  // [ 'a', 'b', 'c', 'd' ] [ 'a', 'b', 'c', 'd' ]

可以看到，孩子轻轻松松就认识了父亲的朋友～
如果孩子把friends改掉会怎样？

// child1.friends = ['a', 'b']; 
console.log(child1.friends, child2.friends); // [ 'a', 'b' ] [ 'a', 'b', 'c', 'd' ]

为什么 child1.friends = ['a', 'b']; 对 child2 没有影响？ 因为这种操作相当于给子类自己加了个自己的属性而已。

child1.friends.push('e');
console.log(child1.friends, child2.friends); // [ 'a', 'b' ] [ 'a', 'b', 'c', 'd' ]
[ 'a', 'b', 'c', 'd', 'e' ] [ 'a', 'b', 'c', 'd', 'e' ]

这样写结果就不一样了，因为这相当于修改了父亲属性，所有实例都会共享。
这就是原型链继承的一个缺点：一个变了其余都会变。
原型链的另一个缺点就是子类无法向父类构造函数传递参数，如果我想用new Children('name')就行不通了。

基于以上缺点，出现了借助构造函数的继承方式。

第二种：借助构造函数的继承

这种继承方式其实是在子类的构造函数里调用父类的构造函数，如下：

function Parent(name){
   this.name = name;
   this.friends =  ['a','b','c'];
   this.sayName = function(){
      console.log('I am '+this.name);
   }
}
function Child(name){
   Parent.call(this, name);
}
const child1 = new Child('kid1'); //向父亲构造函数传参
const child2 = new Child('kid2');
console.log(child1, child2);
child1.sayName(); // 用到了父亲的方法
child1.friends.push('d');
console.log(child2.friends);//  ['a','b','c'] 没被受影响

借助构造函数，完美解决的以上两个问题，但是仔细想想，sayName方法没必要为每个实例都带一个，完全可以放在父类的prototype中。

第三种：组合继承

其实这种方法就是将上面两种结合起来，取长补短，相得益彰。把需要共享的方法，属性用原型链继承，不需要共享的就用构造函数。

function Parent(name){
   this.name = name;
   this.friends =  ['a','b','c'];
}
Parent.prototype.sayName = function(){
      console.log('I am '+this.name);
}
function Child(name){
   Parent.call(this, name);
}
Child.prototype = new Parent();

有时我只是仅仅想让子类把父类的属性复制粘贴到自己身上，也要写各种构造函数，各种原型链指向么？不需要！

第四种：原型继承

你只需要一行代码：
const child = Object.create({name: 'parent', friends: ['a', 'b', 'c']});

image.png

那么Object.create方法做了什么？

function create(parent){
   let o = function(){};
   o.prototype = parent;
   return new o();
}

就是这么的简单粗暴！创建->原型指向->new一个返回去，一套步骤封装好，用的时候就只要一行代码就OK了。

引申：

1. Object.create() 和 new有什么不同？
   new的过程实际上是：

• new一个空的Object
• 让this指向刚new出来的object
• 完成构造函数里的赋值操作
• 返回这个Object
  以上是我比较粗糙的理解，在网上搜索了一番之后，发现我的理解还是有些偏差；
  首先，新建的空对象的[[prototype]]指向构造函数的prototype对象；
  其次，绑定this实际上是通过constructor.call(obj)来实现的；
  学术一点儿的步骤：
• 创建一个新的对象，这个对象的类型是object；
• 设置这个新的对象的内部、可访问性和[[prototype]]属性为构造函数（指prototype.construtor所指向的构造函数）中设置的；
• 执行构造函数，当this关键字被提及的时候，使用新创建的对象的属性；
• 返回新创建的对象（除非构造方法中返回的是‘无原型’）。
  可以得知，new 并不涉及“继承”，只是单纯的按模版（构造函数）创建对象。

2. instanceOf 和 isPrototype有什么不同？
   都是只要是出现在原型链中的构造函数就会判true

console.log(child1 instanceof Child); // true
console.log(child1 instanceof Parent); // true
console.log(child1 instanceof Object); // true

console.log(Parent.prototype.isPrototypeOf(child1)); // true
console.log(Child.prototype.isPrototypeOf(child1)); // true
console.log(Object.prototype.isPrototypeOf(child1)); // true

A.isPrototypeOf(B) 判断的是A对象是否存在于B对象的原型链之中
A instanceof B 判断的是B.prototype是否存在与A的原型链之中

3. ES6中Class继承如何实现？
   ES5 的继承，实质是先创造子类的实例对象this，然后再将父类的方法添加到this上面（Parent.apply(this)）。
   ES6 的继承机制完全不同，实质是先创造父类的实例对象this（所以必须先调用super方法），然后再用子类的构造函数修改this。

class Component{
    constructor(componentName){
        // console.log(this); // Input {}
        this.componentName = componentName;
    }
    getName(){
        console.log('componentName:', this.componentName);
    }
}

class Input extends Component{
    constructor(name, model){
        // Component.prototype.constructor.call(this, name);
        super(name);
        // 如果不调super报错：
        // ReferenceError: 
        // Must call super constructor in derived class before accessing 'this' or returning from derived constructor
        this.model = model;
    }
    static myMethod(msg) {
        super.myMethod(msg);
    }
    getModel(){
        console.log('model:', this.model);
        // super作为对象时，在普通方法中，指向父类的原型对象；在静态方法中，指向父类。
        console.log(super.getName); // [Function: getName]
    }
}

const input = new Input('input', 'inputModel');
input.getName(); // componentName: input
input.getModel(); // model: inputModel

参考内容

[JavaScript中的new关键词]https://www.w3cplus.com/javascript/javascript-new-keyword.html
[instanceOf 和 isPrototype]http://www.cnblogs.com/ArthurXml/p/6555509.html
[ES6继承]http://es6.ruanyifeng.com/#docs/class-extends