New attempt at javascript class inheritance_js object-oriented

What I am trying to do today is how to make it more like other languages ​​using the inheritance mechanism, multi-level inheritance and more aspects of calling the parent class construct.
The effect I hope to achieve:

Copy code The code is as follows:

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

Example:

<title> js inheritance </title>
[Ctrl A Select all Note: If you need to introduce external Js, you need to refresh to execute

]

My extend is written like this of:

Copy code

The code is as follows:

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;
}

Maybe you will ask, why not write like this:

Copy code

The code is as follows:

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;
}

This seems to be no problem. It will run very well when there is only one level of inheritance. However, if there are multiple levels of inheritance When, it will cause an infinite loop, because:

Copy code

The code is as follows:

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

This method will be constantly overwritten and rewritten, causing an infinite loop. <script> 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 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 </script>My approach is to use the $supClass attribute of the class to point to the parent class structure it inherits. There is also a $supClass method in the prototype. This $supClass must be executed in the constructor of the class for the first time. prototype When .$supClass is executed, it will obtain the $supClass of the class through arguments.callee.caller.$supClass, and then execute it through apply on this. In this way, $subClass can obtain the parent class constructor of the class and execute it based on different values.