2017-12-27

继承

类式继承

function SuperClass() {
    this.spValue = true;
}
SuperClass.prototype.getSuperValue = function () {
    return this.spValue;
}
function SubClass() {
    this.subValue = false;
}
SubClass.prototype = new SuperClass();
SubClass.prototype.getSubValue = function () {
    return this.subValue;
}

类式继承的简单原理就是，子类的原型是父类的一个实例对象。但是这中方式有个问题，对于父类中的引用类型的属性，就有问题了。看下面代码：

function SuperClass() {
    this.spValue = true;
    this.myThings = ['css', 'js', 'html'];
}
SuperClass.prototype.getSuperValue = function () {
    return this.spValue;
}
function SubClass() {
    this.subValue = false;
}
SubClass.prototype = new SuperClass();
SubClass.prototype.getSubValue = function () {
    return this.subValue;
}
let instance1 = new SubClass();
let instance2 = new SubClass();
console.log(instance1.myThings);  //['css', 'js', 'html']
console.log(instance2.myThings);  //['css', 'js', 'html']
instance1.myThings.push('acss');
console.log(instance2.myThings);  //['css', 'js', 'html','acss']

对于父类的共有属性(meThings)子类的一个对象修改会导致其他对象全跟着修改。所以有了构造函数继承

构造函数继承

//声明一个父类
function SuperClass(id) {
    this.books = ['html', 'css'];
    this.id = id;
}
SuperClass.prototype.showBooks = function () {
    console.log(this.books);
}
//声明子类
function SubClass(id) {
    SuperClass.call(this, id);
}
let instance1 = new SubClass(1);
let instance2 = new SubClass(2);
instance1.books.push('javaScript');
console.log(instance1);//{books:["html", "css", "javaScript"],id:1}
console.log(instance2);//{books:["html", "css"],id:1}
instance1.showBooks();  //error

构造函数继承就是把子类的变量利用父类的构造函数复制一遍，由于子类没有涉及父类的prototype，所以最后一句输出出错。如果想要继承父类的原型方法的话，把原型赋值放到构造函数里即可

组合继承
由于结构函数继承存在执行两次

//声明一个父类
function SuperClass(id) {
    this.books = ['html', 'css'];
    this.id = id;
}
SuperClass.prototype.showBooks = function () {
    console.log(this.books);
}
//声明子类
function SubClass(id, time) {
    SuperClass.call(this, id);
    this.time = time;
}
SubClass.prototype = new SuperClass();
SubClass.prototype.getTime = function () {
    console.log(this.time);
}

组合继承融合了类式继承和构造函数继承，但是有个缺点就是父类的构造函数执行了两遍，分别在子类使用父类的构造函数和子类的原型类式继承父类的时候。

原型式继承
2006年道格拉斯•克罗克福德发表一篇《JavaScript中原型式继承》的文章，其中提到，借助原型prototype可以根据已有的对象创建一个新的对象，看代码

function inheritObejct(o) {
    function F() {}
    F.prototype = o;
    return new F();
}
//这个很像类式继承，而且也会影响共有属性看个例子
var house = {
    furniture: ['desk', 'sofa'],
    name: 'B211'
}
let newHouse = inheritObejct(house);
let anotherHouse = inheritObejct(house);
newHouse.furniture.push('chair');
newHouse.name = 'newB211';
anotherHouse.furniture.push('bed');
anotherHouse.name = 'anotherB211';
console.log(newHouse.furniture);    //["desk", "sofa", "chair", "bed"]
console.log(anotherHouse.furniture);//["desk", "sofa", "chair", "bed"]

寄生式继承

function createObject(obj) {
    let o = new inheritObejct(obj);
    o.getName = function () {
        console.log(this.name);
    }
    return o;
}

但是其依然摆脱不了共有属性被公用篡改的缺点，所以有了以下寄生组合继承

寄生组合继承

function inheritPrototype(subClass, superClass) {
    var p = inheritObejct(superClass.prototype);
    p.construct = subClass;
    subClass.prototype = p;
}

看起来很复杂是不，先看个例子加深理解：

function inheritObejct(o) {
    function F() {}
    F.prototype = o;
    return new F();
}
/**
 * 寄生式继承方法继承原型
 * @param subClass
 * @param superClass
*/
function inheritPrototype(subClass, superClass) {
    var p = inheritObejct(superClass.prototype);
    p.construct = subClass;
    subClass.prototype = p;
}
//声明一个父类
function SuperClass(id) {
    this.books = ['html', 'css'];
    this.id = id;
}
SuperClass.prototype.showBooks = function () {
    console.log(this.books);
}
//声明子类
function SubClass(id, time) {
    SuperClass.call(this, id);
    this.time = time;
}
inheritPrototype(SubClass, SuperClass);
SubClass.prototype.getTime = function () {
    console.log(this.time);
}

var instance1 = new SubClass('js', 2017);
var instance2 = new SubClass('python', 2016);

instance1.books.push('设计模式');
console.log(instance1.books);//["html", "css", "设计模式"]
console.log(instance2.books);//["html", "css"]

see,you must know why.

2017-12-27

继承

推荐阅读更多精彩内容