day19_JS_继承进阶

1.JS中的继承

继承是面向对象中一个比较核心的概念。

其他正统面向对象语言都会有两种方式实现继承：一个是接口实现，一个是继承。

而JS只是继承，不支持接口实现，而实现继承的方式依靠原型链完成。

原型链继承.png

在js里，被继承的函数称为超类型（父类，基类也行，其他语言叫法）

继承的函数称为子类型（子类，派生类）。

继承也有之前问题，比如字面量重写原型会中断关系，使用引用类型的原型，并且子类型还无法给超类型传递参数。

为了解决引用共享和超类型无法传递参数的问题，我们采用一种借用构造函数的技术或者成为对象冒充（伪造对象、经典继承）的技术来解决这两种问题。

冒充式继承

function Box(_a) {
    this.a = _a;
    this.play();
}
// 添加一个实例化属性和方法
Box.prototype.a = 10;
Box.prototype.play = function () {

}

// 添加一个静态属性和方法
Box.b = 20;
Box.run = function () {
    
}

function Ball(_a) {
    //此处会出错，this.play is not a function
    Box.call(this, _a);
}

var b = new Ball(10);
console.loe(b);

组合式继承

function Box(_a) {
    console.log("aaa");//打印两次aaa
    this.a = _a;
    this.play();
}
// 添加一个实例化属性和方法
Box.prototype.a = 10;
Box.prototype.play = function () {

}
// 添加一个静态属性和方法
Box.b = 20;
Box.run = function () {

}
function Ball(_a) {
    // Box.call(this,_a);
    this.a = _a;
    this.play();
}
Ball.prototype = new Box();
// 将原来constructor中的Box替换为Ball
Ball.prototype.constructor = Ball;
var b = new Ball(10);
console.log(b);
// 缺点：原型中a的属性值没有继承到

原型式继承

function Box(_a) {
   console.log("aaa");//打印两次aaa
   this.a = _a;
   this.play();
}
// 添加一个实例化属性和方法
Box.prototype.a = 10;
Box.prototype.play = function () {

}

// 添加一个静态属性和方法
Box.b = 20;
Box.run = function () {
   
}
function Ball(_a) {
   Box.call(this, _a);
}

function F() { }
F.prototype = Box.prototype;
Ball.prototype = new F();
Ball.prototype.constructor = Ball;

let b = new Ball(10);
console.log(b);

寄生式继承

版本一（相对容易理解）

function Box(_a) {
    this.a = _a;
    this.play();
}
// 添加一个实例化属性和方法
Box.prototype.a = 10;
Box.prototype.play = function () {

}

// 添加一个静态属性和方法
Box.b = 20;
Box.run = function () {

}

function extend(subClass, supClass) {
    // 创建一个中间替代类,防止多次执行父类(超类)的构造函数
    function F() { }
    // 将父类的原型赋值给这个中间替代类
    F.prototype = supClass.prototype;
    // 将原子类的原型保存
    var proto = subClass.prototype;
    // 将子类的原型设置为中间替代类的实例对象
    subClass.prototype = new F();
    // 将原子类的原型复制到子类原型上,合并超类原型和子类原型的属性方法
    var names = Object.getOwnPropertyNames(proto);
    for (var i = 0; i < names.length; i++) {
        var desc = Object.getOwnPropertyDescriptor(proto, names[i]);
        Object.defineProperty(subClass.prototype, names[i], desc);
    }
    // 设置子类的构造函数时自身的构造函数,以防止因为设置原型而覆盖构造函数(防止)
    subClass.prototype.constructor = subClass;
    // 给子类的原型中添加一个属性,可以快捷的调用到父类的原型方法
    subClass.prototype.superClass = supClass.prototype;
    // 如果父类的原型构造函数指向的不是父类构造函数,重新指向(防止)
    if (supClass.prototype.constructor !== supClass) {
        supClass.prototype.constructor = supClass;
    }
}

function Ball(_a) {
    this.superClass.constructor.call(this, _a);
}
Ball.prototype.play = function () {
    //执行超类的play方法
    this.superClass.play.call(this);
}
Object.defineProperty(Ball.prototype, "d", {
    value: 20
})

extend(Ball, Box);
var b = new Ball(10);
console.log(b);

版本二（ES5）

function Box(_a) {
    this.a = _a;
    this.play();
}
// 添加一个实例化属性和方法
Box.prototype.a = 10;
Box.prototype.play = function () {

}

// 添加一个静态属性和方法
Box.b = 20;
Box.run = function () {

}
Function.prototype.extend = function (supClass) {
    function F() { }
    F.prototype = supClass.prototype;
    var proto = this.prototype;
    this.prototype = new F();
    var names = Object.getOwnPropertyNames(proto);
    for (var i = 0; i < names.length; i++) {
        var desc = Object.getOwnPropertyDescriptor(proto, names[i]);
        Object.defineProperty(this.prototype, names[i], desc);
    }
    this.prototype.constructor = this;
    this.prototype.superClass = supClass.prototype;
    if (supClass.prototype.constructor !== supClass) {
        supClass.prototype.constructor = supClass;
    }
}

function Ball(_a) {
    this.superClass.constructor.call(this, _a);
}
Ball.prototype.play = function () {
    this.superClass.play.call(this);
}
Object.defineProperty(Ball.prototype, "d", {
    value: 20
})

Ball.extend(Box);
var b = new Ball(10);
console.log(b);