javascript类式继承新的尝试_js面向对象-js教程-PHP中文网

javascript类式继承新的尝试_js面向对象

php中文网

发布： 2016-05-16 17:57:25

原创

1001人浏览过

我今天做的尝试是，如何更它更像其他的语言一样的使用继承机制，多层继承和更方面的调用父类的构造。
我希望达到的效果：

Tanka

具备AI长期记忆的下一代团队协作沟通工具

110

查看详情

复制代码代码如下:

 
function A(){ 
alert('a'); 
} 
function B(){ 
this.$supClass(); 
alert('b'); 
} 
extend(B,A); 
function C(){ 
this.$supClass(); 
alert('c'); 
} 
extend(C,B); 
var c = new C(); 
alert( c instanceof A ); //true 
alert( c instanceof B ); //true 
alert( c instanceof C ); //true 

实例：

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

我的extend是这样写的:

复制代码代码如下:

 
 function extend(subClass,supClass){ 
 var fun = function(){}, 
 prototype = subClass.prototype; 
 fun.prototype = supClass.prototype; 
 subClass.prototype = new fun(); 
 for(var i in prototype){ 
 subClass.prototype[i] = prototype[i]; 
 } 
 subClass.$supClass = supClass; 
 subClass.prototype.$supClass = function(){ 
 var supClass = arguments.callee.caller.$supClass; 
 if(typeof supClass == 'function'){ 
 supClass.apply(this,arguments); 
 this.$supClass = supClass; 
 } 
 }; 
 subClass.prototype.constructor = subClass; 
 return subClass; 
 } 

也许你会问，为什么不这样写:

复制代码代码如下:

 
function extend(subClass,supClass){ 
var fun = function(){}, 
prototype = subClass.prototype; 
fun.prototype = supClass.prototype; 
subClass.prototype = new fun(); 
for(var i in prototype){ 
subClass.prototype[i] = prototype[i]; 
} 
subClass.prototype.$supClass = function(){ 
supClass.apply(this,arguments); 
}; 
subClass.prototype.constructor = subClass; 
return subClass; 
} 

这样看似没有问题，只有一级继承时会运行的很好，但是，如果多级继承时，就会造成死循环，因为：

复制代码代码如下:

 
subClass.prototype.$supClass = function(){ 
supClass.apply(this,arguments); 
}; 

这个方法会被一直覆盖重写掉，而造成死循环。
而我的做法是，用类的$supClass属性指向它所继承的父类构造，在prototype中也有个$supClass方法,这个$supClass第一次必须要在类的构造器中执行，prototype.$supClass在执行时，会通过arguments.callee.caller.$supClass来获得类的$supClass，然后通过apply在this执行。这样$subClass就能根据不同的来，来获得类的父类构造器并执行。

大家都在看：

JavaScript混入模式_多继承与组合功能实现 JavaScript原型继承_类与构造函数的对比 JS设计模式：单例模式与工厂模式实现 JS箭头函数特性_This绑定规则解析 JavaScriptORM框架_对象关系映射与查询构建