js的继承

2017-01-25

先要有那么一个父类

function Dad (x,y){
    this.x = 100;
    this.y = 200;
    this.sleep = function(){
        console.log('zzzzzz');
    }
}
Dad.prototype.eat = function(food){
    return 'I am eating'+food;
}

一. ES5下可以这么多的继承

原型链继承

将父类的实例作为子类的原型，较为简单，但无法实现多继承，子类实例化时，无法向父类的构造函数传值。

function Child(){
}
Child.prototype = new Dad();
Child.prototype.constructor = Child;//构造函数指向自己而不是默认的指向父类，避免继承紊乱
Child.protoytpe.name = 'Son';
//实例
var son = new Child();

构造继承

使用父类的构造函数来增强子类，等同复制父类实例属性给子类,引入call()方法.
这个方法可以实现多继承，但无法继承父类的实例属性和方法，无法复用。

function Child(x,y,name){
    Dad.call(this);
    this.name = name;
 
}
Child.prototype.constructor = Child;
//实例
var son = new Child(son);

实例继承

这个比较有意思，为父类添加新特性，作为子类实例返回。
不限制调用方法，但是不支持多继承

function Child(name){
    var instance = new Dad();
    instance.name = name;
    return instance;
}
//实例
var son = new Child(son);

拷贝继承

即通过for in循环，将父类属性枚举并拷贝，但该方法无法获取父类不可枚举的方法,且太耗性能，基本不推荐

function Child(name){
    var dad = new Dad();
    for (var key in dad){
        Child.protoytpe[key] = dad[key];
    }
    Child.prototype.name = name;
}
//实例
var son = new Child(son);

组合继承（常用方法）

调用父类构造，继承父类属性，父类实例作为子类原型，可复用，可传参，但调用了两次父类构造函数，内存会消耗一点。

function Child(name){
    Dad.call(this);
    this.name = name;
}
Child.prototype = new Dad();
Child.prototype.constructor = Child;
//实例
var son = new Child(son);

寄生

寄生的形式，砍掉父类的实例属性，节省了组合继承的内存消耗问题，但实现较为复杂

function Child(name){
    Dad.call(this);
    this.name = name;
}
(function(){
    var Super = function(){}
    Super.prototype = Dad.prototype;
    Child.prototype = new Super();
})()
    Super = null;//节省内存
    var son = new Child(son);

proto继承

ES6可以直接再定义对象时直接通过属性进行继承

function Child(name){
     this.name = name;
     Dad.call(this);
 }
//实例
var son = new Child('son');
son.__proto__ = Dad.prototype;

二. ES6下可以这样继承

ES5的继承实质上是先创造子类的实例对象this,然后将父类的方法添加到子类this上，但是由于ES6的继承机制不同，是先创造父类的实例this,然后用子类的构造修改this.

EXTENDS 关键词继承

ES6将使用关键词extends，熟悉java编程的应该不陌生，对ES6的样子很像java.

class Child extends Dad{
    constructor(x,y,name){//直接给一个construor方法作为构造方法
        super(x,y);//父类的构造函数，只有调用super方法才能使用this,因为子类没有自己的this.换句话说，this必须再super方法调用之后使用
        this.name = name;
    }
    eat(){
        return this.name+super.eat();
    }
}
//实例
let son = new Child(son);

PROTO继承

ES6可以直接再定义对象时直接通过属性进行继承

son = {__proto__:Dad};