Javascript:图形解释如何实现“ 单继承 、多继承 、掺入 “
2013-05-01 12:27
691 查看
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
图形示意
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
图形示意
常见问题
问题:为什么要引入“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
图片示意
常见问题
问题:这种掺入实现是不是太简单了?答案:确实,但是能满足80%的需求,掺入的主要目的就是代码复用。
备注
由于“原型链”的限制,Javascript实现不了真正意义的“多重继承”。相关文章推荐
- Javascript:图形解释如何实现“ 单继承 、多继承 、掺入 “
- 深入理解JavaScript是如何实现继承的
- 说说 JavaScript 如何实现对象继承
- 深入理解JavaScript是如何实现继承的
- JavaScript是如何实现继承
- JavaScript原型的工作原理(以及如何利用它来实现类的继承)
- JavaScript是如何实现继承的(六种方式)
- JavaScript如何实现继承
- 聊聊JavaScript如何实现继承及特点
- 【翻译】javascript原型继承到底是如何实现的
- javaScript如何实现继承(javaScript实现继承的五种方式)
- 深入理解JavaScript是如何实现继承的
- 浅谈javascript对象、如何实现继承、jQuery方法的扩展(jquery插件)
- JavaScript是如何实现继承的(六种方式)
- JavaScript是如何实现继承的
- 聊聊JavaScript如何实现继承
- 如何利用javascript中的原型实现继承
- 深入理解JavaScript是如何实现继承的
- JavaScript是如何实现继承的
- Javascript如何实现继承?