JavaScript 继承

前言

理解对象和继承是我们学习设计模式，甚至是阅读各种框架源码的第一步。上一篇文章，笔者已经把JavaScript对象进行了梳理，今天我们来一起学习继承。

继承

原型链

基本思想：利用原型让一个引用类型继承另一个引用类型的属性和方法，也就是将一个原型对象指向另一个引用类型的实例。
Example:

function Parent() {
  this.property = true
}
Parent.prototype.getParentValue = function() {
   return this.property
} 

function Child() {
  this.childProperty = false
}

Child.prototype = new Parent()
Child.prototype.getChildValue = function () {
   return this.childProperty
}

let instance = new Child()
console.log(instance.getParentValue()) // true

Child 通过创建 Parent 实例，并将实例赋值给 Child.prototype 的方式，继承了 Parent 。本质是利用实例重写了原型对象。这样，Child.prototype 拥有了 Parent 的全部属性和方法，同时其内部指针也指向了 Parent.prototype 。
通过实现原型链，本质上拓展了原型搜索机制。

添加方法（谨慎）：
字类型有时需要重写超类型中的某个方法，或新增超类型中不存在的方法，一定要将给原型添加方法的代码放在被替换原型的语句后面。
Example：

function Parent() { 
   this.property = true; 
}

Parent.prototype.getParentValue = function () {
 this.property
}

function Child() { 
   this.childProperty = false; 
}

//继承了 SuperType 
Child.prototype = new Parent();

//添加新方法 
Child.prototype.getChildValue = function () {
 return this.childProperty
}

//重写超类型中的方法 
Child.prototype.getParentValue = function () {
 return false
}

let instance = new ChildType(); 
console.log(instance.getParentValue());   //false

原型链继承存在的问题：

1. 创建子类型实例时，不能向父类的构造函数中传递参数
2. 父子构造函数的原型对象之间存在共享问题
   example：

function Parent(){ 
    this.colors = ["red", "blue", "green"];
}
function Child() {}
Child.prototype = new Parent();

let instanceChild = new Child();
instance1.colors.push("black");
console.log(instanceChild.colors);   //"red", "blue", "green","black"
//当我们改变colors的时候, 父构造函数的原型对象的也会变化
let instanceParent = new Parent();
console.log(instanceParent.colors);   //"red", "blue", "green","black"

构造函数

基本思想：在子类构造函数的内部，调用父类的构造函数
Example:

function Parent(name) {
    this.name = name;
    this.colors = ["red", "blue", "green"];
}
function Child() {
    Parent.call(this, "jerry");  // 继承了 Parent
    this.age = 22;
}

let instanceChild = new Child();
instanceChild.colors.push("black");
console.log(instanceChild.name);    // jerry
console.log(instanceChild.colors);   //"red", "blue", "green","black"

let instanceParent = new Parent();
console.log(instanceParent.colors);   //"red", "blue", "green"

构造函数问题：

1. 方法都在构造函数中定义，因此函数很难复用
2. 在父类原型对象中定义的方法，子类无法继承

组合继承

简单的说：原型链+构造函数
基本思想：原型链实现对原型属性和方法的继承，构造函数实现对实例属性的继承
Example：

function Parent(name) {
    this.name = name;
    this.colors = ["red", "blue", "green"];
}
Parent.prototype.sayName = function () {
  console.log(this.name) 
}

function Child(name, age) {
    Parent.call(this, name);    // 继承属性
    this.age = age;
}

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

let instanceChild = new Child("jerry", 23);
instanceChild.colors.push("black"); 
console.log(instanceChild.colors);  //"red", "blue", "green","black"
instanceChild.sayName();        // jerry
instanceChild.sayAge();         // 23

存在问题：

1. 若再添加一个子类型，给其原型单独添加一个方法，那么其他子类型也同时拥有了这个方法，因为它们都指向同一个父类型的原型
2. 无论在什么情况下都会调用两次父类的构造函数，我们不得不在调用子类构造函数时，重写这些属性。

原型式继承

基本思想： 本质是对继承对象执行了一次浅拷贝。
example：

function object(o) {
    function F() {}
    F.prototype = o;
    return new F();
}
// ES5内置了object.create()方法可以以上方法的功能。
let parent = {
    name: "jerry",
    friends: ["marry", "sandy"]
}

let Child1 = object(parent);
Child1.name = "barbie";
Child1.friends.push("Rob");

let Child2 = object(parent);
Child2.name = "Cos";
Child2.friends.push("Linda");

console.log(parent.friends);    //"marry", "sandy","Rob","Linda"

存在问题：

1. 与原型链继承一样，父子对象之间存在共享问题
2. 无法实现复用

寄生式继承

基本思路：在原型式继承外面套了一层函数，在该函数内部增强对象。

function object(o) {
    function F() {}
    F.prototype = o;
    return new F();
}

// 壳子
function createAnother(original) {
    let clone = object(original);
    clone.sayHi = function(){
      console.log("Hi")
    }
    return clone;
}

存在问题：

1. 复用率贼低

寄生组合式继承

基本思想： 利用构造函数来继承属性，利用原型链的混成形式来继承方法。
example:

function object(o) {
    function F() {}
    F.prototype = o;
    return new F();
}

function inheritPrototype(child, parent) {
    let prototype = object(parent.prototype)
    prototype.constructor = child;
    child.prototype = prototype;
}

function Parent(name) {
    this.name = name;
    this.colors = ["red", "blue", "green"];
}
Parent.prototype.sayName = function () {
  console.log(this.name)
}

function Child(name, age) {
    Parent.call(this, name);    // 继承属性
    this.age = age;
}
inheritPrototype(Child, Parent)

Child.prototype.sayAge = () => this.age

目前来说，这是最好的继承方式。

结束

懒癌发作，明明早就写好了，一直把他丢弃在电脑硬盘里。几周之后，我挣扎着打开MWeb，稍做修葺，赶个结束语。算是画上一个句号吧。最后，不得不说，高级3，真是一本不可多得的好书，把对象、继承讲得如此清晰明了。

参考

• 《JavaScript高级程序设计》第3版