Javascript：图形解释如何实现“ 单继承 、多继承 、掺入 “
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及其原型链中。
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实现不了真正意义的“多重继承”。
作者： Leo_wl
出处： http://HdhCmsTestcnblogs测试数据/Leo_wl/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
版权信息查看更多关于Javascript：图形解释如何实现“ 单继承 、多继承 、掺入 “的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did45920