Javascript:图形解释如何实现“ 单继承 、多继承 、掺入 “

前提知识

Javascript:必须知道的Javascript知识点之“原型链”

Javascript:必须知道的Javascript知识点之“this指针”

Javascript:用 "脑图软件" 学习 “面向对象”

几个内置核心方法学习

代码示例

 1 var Base = function (name) {
 2     this.name = name;
 3 };
 4 
 5 var base = new Base();
 6 
 7 console.log((base instanceof Object));//true
 8 console.log((base instanceof Base));//true
 9 console.log(Base.prototype.isPrototypeOf(base));//true
10 console.log(Object.prototype.isPrototypeOf(base));//true
11 console.log(base.hasOwnProperty("name"));//true
12 console.log(base.hasOwnProperty("toString"));//false
13 console.log(("name" in base));//true
14 console.log(("toString" in base));//true

图形示意

Javascript:图形解释如何实现“ 单继承 、多继承 、掺入 “

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。

代码示例

 1 Function.prototype.extend = function (baseType) {
 2     var tempType = function () { };
 3     tempType.prototype = baseType.prototype;
 4 
 5     this.prototype = new tempType();
 6     this.prototype.constructor = this;
 7     this.super = function () {
 8         return baseType.prototype;
 9     };
10 };
11 
12 var Base = function (name) {
13     this.name = name;
14 };
15 
16 var Animal = function () {
17     Animal.super().constructor.apply(this, arguments);
18 };
19 Animal.extend(Base);
20 
21 var Dog = function () {
22     Dog.super().constructor.apply(this, arguments);
23 };
24 Dog.extend(Animal);
25 
26 var dog = new Dog('笨狗');
27 console.log(dog.name);//笨狗
28 console.log(dog instanceof Base);//true
29 console.log(dog instanceof Animal);//true
30 console.log(dog instanceof Dog);//true

图形示意

Javascript:图形解释如何实现“ 单继承 、多继承 、掺入 “

常见问题

问题:为什么要引入“tempType”,而不是直接“this.prototype = new baseType()”?

答案:“new baseType()”会导致构造方法被调用两次。

问题:为什么不直接“this.prototype = baseType.prototype”?

答案:这样的话,父子类型就会同时指向一个prototype,不符合继承的语义。

掺入实现

参考文章:设计原则:请重新审视“多重继承”,找机会拥抱一下“掺入(Mixin)”

在javascript中实现掺入的思路是:拷贝MixinType.prototye包含的所有属性到TargetType.prototype中。

代码示例

 1 Function.prototype.extend = function (baseType) {
 2     var tempType = function () { };
 3     tempType.prototype = baseType.prototype;
 4 
 5     this.prototype = new tempType();
 6     this.prototype.constructor = this;
 7     this.super = function () {
 8         return baseType.prototype;
 9     };
10 };
11 
12 var Base = function (name) {
13     this.name = name;
14 };
15 
16 var Animal = function () {
17     Animal.super().constructor.apply(this, arguments);
18 };
19 Animal.extend(Base);
20 
21 var Dog = function () {
22     Dog.super().constructor.apply(this, arguments);
23 };
24 Dog.extend(Animal);
25 
26 var dog = new Dog('笨狗');
27 console.log(dog.name);//笨狗
28 console.log(dog instanceof Base);//true
29 console.log(dog instanceof Animal);//true
30 console.log(dog instanceof Dog);//true
31 
32 Function.prototype.mixin = function (name, mixinType) {
33     this.mixins = {};
34     this.mixins[name] = mixinType;
35 
36     for (var property in mixinType.prototype) {
37         if (property in this.prototype) {
38             continue;
39         }
40 
41         this.prototype[property] = mixinType.prototype[property];
42     }
43 };
44 
45 var Pet = function () {
46 };
47 Pet.prototype.aoao = function () {
48     console.log(this.name + ',嗷嗷!');
49 };
50 
51 Dog.mixin('pet', Pet);
52 dog.aoao();
53 console.log(dog instanceof Pet);//false

图片示意

Javascript:图形解释如何实现“ 单继承 、多继承 、掺入 “

常见问题

问题:这种掺入实现是不是太简单了?

答案:确实,但是能满足80%的需求,掺入的主要目的就是代码复用。

备注

由于“原型链”的限制,Javascript实现不了真正意义的“多重继承”。

 

你可能感兴趣的:(JavaScript)