Javascript：圖形解釋如何實現“ 單繼承 、多繼承 、摻入 “

前提知識

Javascript：必須知道的Javascript知識點之“原型鏈”

Javascript：必須知道的Javascript知識點之“this指針”

Javascript：用 "腦圖軟件" 學習 “面向對象”

幾個內置核心方法學習

代碼示例

var Base = function (name) {
    this.name = name;
};

var base = new Base();

console.log((base instanceof Object));//true
console.log((base instanceof Base));//true
console.log(Base.prototype.isPrototypeOf(base));//true
console.log(Object.prototype.isPrototypeOf(base));//true
console.log(base.hasOwnProperty("name"));//true
console.log(base.hasOwnProperty("toString"));//false
console.log(("name" in base));//true
console.log(("toString" in base));//true

圖形示意

instanceof

obj instanceof T，判斷obj.__proto__指向的原型鏈是否包含T.prototype。

isPrototypeOf

objLeft.isPrototypeOf(objRight)，判斷objLeft是否包含在objRight.__proto__指向的原型鏈中。

hasOwnProperty

obj.hasOwnProperty(propertyName)，判斷obj（不包括原型鏈）是否包含屬性“propertyName”。

in

propertyName in obj，判斷屬性“propertyName”是否包含在對象obj及其原型鏈中。

單繼承實現

在javascript中實現單繼承的思路是：讓ChildType.prototype.__proto__指向ParentType.prototype。

代碼示例

Function.prototype.extend = function (baseType) {
    var tempType = function () { };
    tempType.prototype = baseType.prototype;

    this.prototype = new tempType();
    this.prototype.constructor = this;
    this.super = function () {
        return baseType.prototype;
    };
};

var Base = function (name) {
    this.name = name;
};

var Animal = function () {
    Animal.super().constructor.apply(this, arguments);
};
Animal.extend(Base);

var Dog = function () {
    Dog.super().constructor.apply(this, arguments);
};
Dog.extend(Animal);

var dog = new Dog('笨狗');
console.log(dog.name);//笨狗
console.log(dog instanceof Base);//true
console.log(dog instanceof Animal);//true
console.log(dog instanceof Dog);//true

圖形示意

常見問題

問題：為什么要引入“tempType”，而不是直接“this.prototype = new baseType()”？

答案：“new baseType()”會導致構造方法被調用兩次。

問題：為什么不直接“this.prototype = baseType.prototype”？

答案：這樣的話，父子類型就會同時指向一個prototype，不符合繼承的語義。

摻入實現

參考文章：設計原則：請重新審視“多重繼承”，找機會擁抱一下“摻入（Mixin）”。

在javascript中實現摻入的思路是：拷貝MixinType.prototye包含的所有屬性到TargetType.prototype中。

代碼示例

Function.prototype.extend = function (baseType) {
    var tempType = function () { };
    tempType.prototype = baseType.prototype;

    this.prototype = new tempType();
    this.prototype.constructor = this;
    this.super = function () {
        return baseType.prototype;
    };
};

var Base = function (name) {
    this.name = name;
};

var Animal = function () {
    Animal.super().constructor.apply(this, arguments);
};
Animal.extend(Base);

var Dog = function () {
    Dog.super().constructor.apply(this, arguments);
};
Dog.extend(Animal);

var dog = new Dog('笨狗');
console.log(dog.name);//笨狗
console.log(dog instanceof Base);//true
console.log(dog instanceof Animal);//true
console.log(dog instanceof Dog);//true

Function.prototype.mixin = function (name, mixinType) {
    this.mixins = {};
    this.mixins[name] = mixinType;

    for (var property in mixinType.prototype) {
        if (property in this.prototype) {
            continue;
        }

        this.prototype[property] = mixinType.prototype[property];
    }
};

var Pet = function () {
};
Pet.prototype.aoao = function () {
    console.log(this.name + '，嗷嗷！');
};

Dog.mixin('pet', Pet);
dog.aoao();
console.log(dog instanceof Pet);//false

圖片示意

常見問題

問題：這種摻入實現是不是太簡單了？

答案：確實，但是能滿足80%的需求，摻入的主要目的就是代碼復用。

備注

由於“原型鏈”的限制，Javascript實現不了真正意義的“多重繼承”。