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

　　实例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title> js继承 </title> 
</head> 
<body> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%3E%20%0D%0Afunction%20extend(subClass%2CsupClass)%7B%20%0D%0Avar%20fun%20%3D%20function()%7B%7D%2C%20%0D%0Aprototype%20%3D%20subClass.prototype%3B%20%0D%0Afun.prototype%20%3D%20supClass.prototype%3B%20%0D%0AsubClass.prototype%20%3D%20new%20fun()%3B%20%0D%0Afor(var%20i%20in%20prototype)%7B%20%0D%0AsubClass.prototype%5Bi%5D%20%3D%20prototype%5Bi%5D%3B%20%0D%0A%7D%20%0D%0AsubClass.%24supClass%20%3D%20supClass%3B%20%0D%0AsubClass.prototype.%24supClass%20%3D%20function()%7B%20%0D%0Avar%20supClass%20%3D%20arguments.callee.caller.%24supClass%3B%20%0D%0Aif(typeof%20supClass%20%3D%3D%20'function')%7B%20%0D%0AsupClass.apply(this%2Carguments)%3B%20%0D%0Athis.%24supClass%20%3D%20supClass%3B%20%0D%0A%7D%20%0D%0A%7D%3B%20%0D%0AsubClass.prototype.constructor%20%3D%20subClass%3B%20%0D%0Areturn%20subClass%3B%20%0D%0A%7D%20%0D%0Afunction%20A()%7B%20%0D%0Aalert('a')%3B%20%0D%0A%7D%20%0D%0Afunction%20B()%7B%20%0D%0Athis.%24supClass()%3B%20%0D%0Aalert('b')%3B%20%0D%0A%7D%20%0D%0Aextend(B%2CA)%3B%20%0D%0Afunction%20C()%7B%20%0D%0Athis.%24supClass()%3B%20%0D%0Aalert('c')%3B%20%0D%0A%7D%20%0D%0Aextend(C%2CB)%3B%20%0D%0Avar%20c%20%3D%20new%20C()%3B%20%0D%0Aalert(%20c%20instanceof%20A%20)%3B%20%2F%2Ftrue%20%0D%0Aalert(%20c%20instanceof%20B%20)%3B%20%2F%2Ftrue%20%0D%0Aalert(%20c%20instanceof%20C%20)%3B%20%2F%2Ftrue%20%0D%0A%3C%2Fscript%3E"></body> 
</html>

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

教程首页更多教程