javascript类式继承新的尝试

124 阅读 0 评论 82 点赞

我是靠谱客的博主沉默绿草，最近开发中收集的这篇文章主要介绍javascript类式继承新的尝试，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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

复制代码代码如下:

 
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就能根据不同的来，来获得类的父类构造器并执行。