深刻javascript——原型链和继承

时间 2019-11-11

原文原文链接

在上一篇post中，介绍了原型的概念，了解到在javascript中构造函数、原型对象、实例三个好基友之间的关系：每个构造函数都有一个“守护神”——原型对象，原型对象内心面也存着一个构造函数的“位置”，两情相悦，而实例呢却又“暗恋”着原型对象，她也在内心留存了一个原型对象的位置。javascript

javascript自己不是面向对象的语言，而是基于对象的语言，对于习惯了其余OO语言的人来讲，起初有些不适应，由于在这里没有“类”的概念，或者说“类”和“实例”不区分，更不要期望有“父类”、“子类”之分了。那么，javascript中这一堆对象这么联系起来呢？
幸运的是，javascript在设计之初就提供了“继承”的实现方式，在认识“继承”以前，咱们如今先来了解下原型链的概念。java

原型链

咱们知道原型都有一个指向构造函数的指针，假如咱们让SubClass原型对象等于另外一个类型的实例new SuperClass()会怎么样？此时，SubClass原型对象包含一个指向SuperClass原型的指针，SuperClass原型中也包含一个指向SuperClass构造函数的指针。。。这样层层递进下去，就造成了一个原型链。c++

具体代码以下：segmentfault

function SuperClass(){
        this.name = "women"
    }
    SuperClass.prototype.sayWhat = function(){
        return this.name + ":i`m a girl!";
    }
    function SubClass(){
        this.subname = "your sister";
    }
    SubClass.prototype = new SuperClass();
    SubClass.prototype.subSayWhat = function(){
        return this.subname + ":i`m a beautiful girl";
    }
    var sub = new SubClass();
    console.log(sub.sayWhat());//women:i`m a girl!

使用原型链实现继承

经过上面的代码中能够看出SubClass继承了SuperClass的属性和方法，这个继承的实现是经过将SuperClass的实例赋值给SubClass的原型对象，这样SubClass的原型对象就被SuperClass的一个实例覆盖掉了，拥有了它的所有属性和方法，同时还拥有一个指向SuperClass原型对象的指针。
在使用原型链实现继承时有一些须要咱们注意的地方：数组

注意继承后constructor的变化。此处sub的constructor指向的是SuperClass，由于SubClass的原型指向了SuperClass的原型。在了解原型链时，不要忽略掉在末端还有默认的Object对象，这也是咱们能在全部对象中使用toString等对象内置方法的缘由。
经过原型链实现继承时，不能使用字面量定义原型方法，由于这样会重写原型对象（在上一篇post中也介绍过）：

function SuperClass(){
        this.name = "women"
    }
    SuperClass.prototype.sayWhat = function(){
        return this.name + ":i`m a girl!";
    }
    function SubClass(){
        this.subname = "your sister";
    }
    SubClass.prototype = new SuperClass();
    SubClass.prototype = {//此处原型对象被覆盖，由于没法继承SuperClass属性和方法
        subSayWhat:function(){
            return this.subname + ":i`m a beautiful girl";
        }
    }
    var sub = new SubClass();
    console.log(sub.sayWhat());//TypeError: undefined is not a function

实例共享的问题。在前面讲解原型和构造函数时，咱们曾经介绍过包含引用类型属性的原型会被全部的实例共享，一样，咱们继承而来的原型中也会共享“父类”原型中引用类型的属性，当咱们经过原型继承修改了“父类”的引用类型属性后，其余全部继承自该原型的实例都会受到影响，这不只浪费了资源，也是咱们不肯看到的现象：

function SuperClass(){
        this.name = "women";
        this.bra = ["a","b"];
    }
    function SubClass(){
        this.subname = "your sister";
    }
    SubClass.prototype = new SuperClass();
    var sub1 = new SubClass();
    sub1.name = "man";
    sub1.bra.push("c");
    console.log(sub1.name);//man
    console.log(sub1.bra);//["a","b","c"]
    var sub2 = new SubClass();
    console.log(sub1.name);//woman
    console.log(sub2.bra);//["a","b","c"]

注意：此处在数组中添加一个元素，全部继承自SuperClass的实例都会受到影响，可是若是修改name属性则不会影响到其余的实例，这是由于数组为引用类型，而name为基本类型。
如何解决实例共享的问题呢？咱们接着往下看...app

经典继承（constructor stealing）

正如咱们介绍过不多单独使用原型定义对象同样，在实际开发中咱们也不多单独使用原型链，为了解决引用类型的共享问题，javascript开发者们引入了经典继承的模式（也有人称为借用构造函数继承），它的实现很简单就是在子类型构造函数中调用超类型的构造函数。咱们须要借助javascript提供的call()或者apply()函数，咱们看下示例：函数

function SuperClass() {
    this.name = "women";
    this.bra = ["a", "b"];
}
function SubClass() {
    this.subname = "your sister";
    //将SuperClass的做用域赋予当前构造函数，实现继承
    SuperClass.call(this);
}

var sub1 = new SubClass();
sub1.bra.push("c");
console.log(sub1.bra);//["a","b","c"]
var sub2 = new SubClass();
console.log(sub2.bra);//["a","b"]

SuperClass.call(this);这一句话的意思是在SubClass的实例（上下文）环境中调用了SuperClass构造函数的初始化工做，这样每个实例就会有本身的一份bra属性的副本了，互不产生影响了。
可是，这样的实现方式仍不是完美的，既然引入了构造函数，那么一样咱们也面临着上篇中讲到的构造函数存在的问题：若是在构造函数中有方法的定义，那么对于没一个实例都存在一份单独的Function引用，咱们的目的实际上是想共用这个方法，并且咱们在超类型原型中定义的方法，在子类型实例中是没法调用到的：post

function SuperClass() {
        this.name = "women";
        this.bra = ["a", "b"];
    }
    SuperClass.prototype.sayWhat = function(){
        console.log("hello");
    }
    function SubClass() {
        this.subname = "your sister";
        SuperClass.call(this);
    }   
    var sub1 = new SubClass();
    console.log(sub1.sayWhat());//TypeError: undefined is not a function

若是你看过上篇文章关于原型对象和构造函数的，想必你已经知道解决这个问题的答案了，那就是沿用上篇的套路，使用“组合拳”！性能

组合式继承

组合式继承就是结合原型链和构造函数的优点，发出各自特长，组合起来实现继承的一种方式，简单来讲就是使用原型链继承属性和方法，使用借用构造函数来实现实例属性的继承，这样既解决了实例属性共享的问题，也让超类型的属性和方法获得继承：ui

function SuperClass() {
        this.name = "women";
        this.bra = ["a", "b"];
    }
    SuperClass.prototype.sayWhat = function(){
        console.log("hello");
    }
    function SubClass() {
        this.subname = "your sister";
        SuperClass.call(this);             //第二次调用SuperClass
    }
    SubClass.prototype = new SuperClass(); //第一次调用SuperClass
    var sub1 = new SubClass();
    console.log(sub1.sayWhat());//hello

组合继承的方式也是实际开发中咱们最经常使用的实现继承的方式，到此已经能够知足你实际开发的需求了，可是人对完美的追求是无止境的，那么，必然会有人对这个模式“吹毛求疵”了：你这个模式调用了两次超类型的构造函数耶！两次耶。。。你造吗，这放大一百倍是多大的性能损失吗？
最有力的反驳莫过于拿出解决方案，好在开发者找到了解决这个问题的最优方案：

寄生组合式继承

在介绍这个继承方式前，咱们先了解下寄生构造函数的概念，寄生构造函数相似于前面提到的工厂模式，它的思想是定义一个公共函数，这个函数专门用来处理对象的建立，建立完成后返回这个对象，这个函数很像构造函数，但构造函数是没有返回值的：

function Gf(name,bra){
    var obj = new Object();
    obj.name = name;
    obj.bra = bra;
    obj.sayWhat = function(){
        console.log(this.name);
    }
    return obj;
}

var gf1 = new Gf("bingbing","c++");
console.log(gf1.sayWhat());//bingbing

寄生式继承的实现和寄生式构造函数相似，建立一个不依赖于具体类型的“工厂”函数，专门来处理对象的继承过程，而后返回继承后的对象实例，幸运的是这个不须要咱们本身实现，道哥（道格拉斯）早已为咱们提供了一种实现方式：

function object(obj) {
    function F() {}
    F.prototype = obj;
    return new F();
}
var superClass = {
    name:"bingbing",
    bra:"c++"
}
var subClass = object(superClass);
console.log(subClass.name);//bingbing

在公共函数中提供了一个简单的构造函数，而后将传进来对象的实例赋予构造函数的原型对象，最后返回该构造函数的实例，很简单，但疗效很好，不是吗？这个方式被后人称为“原型式继承”，而寄生式继承正是在原型式基础上，经过加强对象的自定义属性实现的：

function buildObj(obj){
    var o = object(obj);
    o.sayWhat = function(){
        console.log("hello");
    }
    return o;
}
var superClass = {
    name:"bingbing",
    bra:"c++"
}
var gf = buildObj(superClass);
gf.sayWhat();//hello

寄生式继承方式一样面临着原型中函数复用的问题，因而，人们又开始拼起了积木，诞生了——寄生组合式继承，目的是解决在指定子类型原型时调用父类型构造函数的问题，同时，达到函数的最大化复用。基于以上基础实现方式以下：

//参数为两个构造函数
function inheritObj(sub,sup){
    //实现实例继承，获取超类型的一个副本
    var proto = object(sup.prototype);
    //从新指定proto实例的constructor属性
    proto.constructor = sub;
    //将建立的对象赋值给子类型的原型
    sub.prototype = proto;
}
function SuperClass() {
    this.name = "women";
    this.bra = ["a", "b"];
}
SuperClass.prototype.sayWhat = function() {
    console.log("hello");
}

function SubClass() {
    this.subname = "your sister";
    SuperClass.call(this);
}
inheritObj(SubClass,SuperClass);
var sub1 = new SubClass();
console.log(sub1.sayWhat()); //hello

这个实现方式避免了超类型的两次调用，并且也省掉了SubClass.prototype上没必要要的属性，同时还保持了原型链，到此真正的结束了继承之旅，这个实现方式也成为了最理想的继承实现方式！人们对于javascript的继承的争议还在继续，有人提倡OO，有人反对在javascript作多余的努力去实现OO的特性，管他呢，至少又深刻了解了些！