JavaScript继承(1)

1、子类的原型对象–类式继承

    //声明父类
    function SuperClass() {
        this.superValue = true;
    }

    //为父类添加共有方法
    SuperClass.prototype.getSuperValue = function () {
        return this.superValue;
    }

    //声明子类
    function SubClass() {
        this.subValue = false;
    }

    //继承父类
    SubClass.prototype = new SuperClass();
    //为子类添加共有方法
    SubClass.prototype.getSubValue = function () {
        return this.subValue;
    }

    var instance = new SubClass();
    console.log(instance.getSuperValue());//true
    console.log(instance.getSubValue());//false

简单理解

类式需要先声明两个类，并将第一类的实例赋值给第二个类的原型。
我们实例化一个父类的时候，新创建的对象复制了父类的属性和方法并且将原型指向了父类的原型对象。新创建的对象可以访问到父类原型上的属性和方法与从父类构造函数中复制的属性和方法。

2个缺点

1、 某个子类的实例更改子类原型从父类构造函数中继承来共有属性，就会直接影响其他子类。

2、子类实现的继承是靠原型对父类的实例化实现的，因此创建父类的时候，是无法传递参数以及对父类构造函数初始化。

2、创建即继承–构造函数继承

 //构造函数式继承
    //声明父类
    function SuperClass(id) {
        //引用类型共有属性
        this.books = ['JavaScript', 'HTML', 'CSS'];
        //值类型共有属性
        this.id = id;
    }
    //父类声明原型方法
    SuperClass.prototype.showBooks = function () {
        console.log(this.books);
    }

    //声明子类
    function SubClass(id) {
        //继承父类
        SuperClass.call(this, id);
    }

    //创建实例
    var instance1 = new SubClass(1);
    var instance2 = new SubClass(2);

    instance1.books.push('设计模式');
    console.log(instance1.books);//["JavaScript", "HTML", "CSS", "设计模式"]
    console.log(instance1.id);//1
    console.log(instance2.books);//["JavaScript", "HTML", "CSS"]
    console.log(instance2.id);//2
    console.log(instance1.showBooks());//TypeError

简单理解

SuperClass.call(this, id);这句话是构造函数继承的精华，由于call这个函数可以改变函数的作用环境，父类中的是this绑定的，因此在子类中自然也就继承了父类的属性。

缺点

父类的原型方法自然不会被子类继承，继承就要放在构造函数中。这样创造的实例都会单独拥有一份而不能共用，违背了代码复用的原则。

3、将优点为我所用–组合继承

//组合式继承
    //声明父类
    function SuperClass(name) {
        //引用类型共有属性
        this.books = ['JavaScript', 'HTML', 'CSS'];
        //值类型共有属性
        this.name = name;
    }

    //父类声明原型方法
    SuperClass.prototype.getName = function () {
        console.log(this.name);
    }

    //声明子类
    function SubClass(name, time) {
        //构造函数式继承父类
        SuperClass.call(this, name);
        this.time = time;
    }
    //类式继承
    SubClass.prototype = new SuperClass();
    //子类声明原型方法
    SuperClass.prototype.getTime = function () {
        console.log(this.time);
    }

    //创建实例
    var instance1 = new SubClass("小红", "2016");
    var instance2 = new SubClass("小绿", "2017");
    instance2.books.push("设计模式");

    instance1.getName();// 小红
    instance2.getTime();// 2017
    console.log(instance1.books);// ["JavaScript", "HTML", "CSS"]
    console.log(instance2.books);// ["JavaScript", "HTML", "CSS", "设计模式"]

简单分析

组合继承就是将前两种方法综合到一起，在子类构造函数中执行父类构造函数，在子类原型上实例化父类。融合了优点，过滤缺点。

缺点

父类构造函数执行了2次。

---

其余继承方法，下次分享~