js的13种继承

js继承的13种方式

也可以说只有12种，ES6的extend 也是12种方法之一-寄生继承的语法糖

1、原型链法

代码示例

Child.prototype = new Parent();

所属模式：

1、基于构造器工作方式

2、使用原型链模式

技术注解

1、默认继承机制

2、提示：我们可以将方法与属性集中可重用的部分迁移到原型链中，而将不可重用的那部分设置为对象的自身属性

详细代码解释

2、仅从原型链继承法

代码示例

Child.prototypo = Parent.prototype

所属模式

1、基于构造器工作模式

2、原型拷贝模式（不存在原型链，所有对象共享一个原型）

技术注解

1、由于该模式在构建继承关系时不需要新建实例，效率上有较好的表现

2、原型链上的查询也会比较快，因为这里根本不存在链

3、缺点在于，对子对象的修改会直接影响其父对象

详细代码注解

3、临时构造器法

代码示例

function extend(Child, Parent){
    var F = function(){};
    F.prototype = Parent.prototype;
    Child.prototype = new F();
    Child.prototype.constructor = Child;
    Child.uber =  Parent.prototype
}

所属模式

1、基于构造器工作的模式

2、使用原型链模式

技术注解

1、此模式不同于1号方法，它只继承父对象的原型属性，而对其自身属性（也就是被构造器添加到this值中的属性）则不予继承；

2、另外，该模式还为我们访问父对象提供了便利的方法（通过uber 属性）

详细代码注解

4、原型属性拷贝法

代码示例

function extend2(Child, Parent){
    var p = Parent.prototype;
    var c = Child.prototype;
    for(var i in p) {
        c[i] = p[i]
    }
    c.uber =  p
}

所属模式

1、基于构造器工作的模式

2、使用原型链模式

3、拷贝属性模式

技术注解

1、将父对象原型中的内容全部转换成子对象原型属性

2、无须为继承单独创建对象实例

3、原型链本身也更短

详细代码注解

5、全属性拷贝法（浅拷贝法）

代码示例

function extend2(p){
    var c = {};
    for(var i in p) {
        c[i] = p[i]
    }
    c.uber =  p
    return c
}

所属模式

1、基于对象工作模式

3、拷贝属性模式

技术注解

1、非常简单

2、没有使用原型属性

详细代码注解

6、深拷贝法

代码示例

let deepCopy = function (child, parent){
    var child = child || {};
    for(var i in parent) {
        if(typeof parent[i] === "object") { // 引用类型的判断
            child[i] = Array.isArray(parent[i]) ? [] : {}; // child[i] 跟这个parent[i] 走
            deepCopy(child[i], parent[i]);
        } else {
            child[i] = parent[i]
        }
    }
    return child;
}

所属模式

1、基于对象工作模式

3、拷贝属性模式

技术注解

1、非常简单

2、没有使用原型属性

3、所有对象执行的都是值传递

详细代码注解

7、原型继承法

代码示例

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

所属模式

1、基于对象工作模式

2、使用原型链模式

技术注解

1、丢开仿类机制，直接在对象之间构造继承关系

2、发挥原型固有优势

详细代码注解

8、扩展与增强模式

代码示例

function objectPlus(o, stuff){
    var n ;
    function F(){};
    F.prototype = o;
    n = new F();
    n.uber = o;
    for(var i in stuff) {
        n[i] = stuff[i];
    }
    return n;
}

所属模式

1、基于对象工作模式

2、使用原型链模式

3、属性拷贝模式

技术注解

1、原型继承法和属性拷贝法的混合应用

2、它通过一个函数一次性完成对象的继承和扩展

详细代码注解

9、多重继承法

代码示例

function multi(){
    var n = {}, stuff, j, len = arguements.length;
    for(j = 0; j < len; j++) {
        stuff = arguments[j];
        for(var i in stuff) {
            n[i] = stuff[i]
        }
    }
    return n
}

所属模式

1、基于对象工作模式

2、属性拷贝模式

技术注解

1、混合插入式继承实现

2、它会按照父对象的出现顺序一次对它们执行属性全拷贝

详细代码注解

10、寄生继承法

代码示例

function parasite(){
    var that = Object.create(victim);
    that.more = 1;
    return that;
}

所属模式

1、基于对象工作模式

2、使用原型链模式

技术注解

1、该方法通过一个类似构造器的函数来创建对象

2、该函数会执行相应的对象拷贝，并对其进行扩展，然后返回该拷贝

详细代码注解

11、构造器借用法

代码示例

function Child(){
    Parent.apply(this, arguements)
}

所属模式

1、基于构造器工作模式

技术注解

1、该方法可以只继承父对象的自身属性

2、可以与方法1结合使用，以便从原型中继承相关内容

3、它便于我们的子对象继承某个对象具体属性（并且还有可能是引用类型属性）时，选择最简单的处理方式

详细代码注解

12、构造器借用与属性拷贝

代码示例

function Child(){
    Parent.apply(this, arguements)
}
extend2(Child, Parent)

所属模式

1、使用构造器工作模式

2、使用原型链模式

3、属性拷贝模式

技术注解

1、该方法是构造器借用与属性拷贝法结合体

2、允许我们在不重复调用父对象构造函数的情况下同时继承其自身属性和原型属性

详细代码注解

13、ES6 extend

代码示例

let Parent = function () {};

class Child extend Parent {
    constructor(){
        super(this)
    }
}

所属模式

1、基于对象工作模式

2、使用原型链模式

技术注解

1、该方法是寄生继承法的语法糖

2、可以用babel 将其转化一下，就能看到它实际的工作模式（寄生继承, Object.create(obj)）

详细代码注解

参考

《javascript面向对象编程指南》