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实现不了真正意义的“多重继承”。