Introduction to how javascript is inherited_javascript skills

The first stage:

Copy code The code is as follows:

function A(){
this.funB = function(){
alert('A:funB');
};
}
A.prototype = {
funA:function(){
alert('A:funA');
}
};
function B(){
}
function extend(sub,parent){
sub.prototype = new parent ();
sub.prototype.constructor = sub;
}
extend(B,A);
var b = new B();
b.funA(); // out 'A:funA'
b.funB(); // out 'A:funB'
alert(b instanceof A); // out "true"

I think everyone You can see what it means at a glance. First, define two classes, A and B, and then use the extend method to let B inherit class A. The principle of extend is to let the parent class new to the prototype of the child class.
Using instanceof to detect is also true. If you want instanceof to be true, the prototype objects of the two classes must be the same object, whether indirectly or directly.
Is there any problem with this approach? In general object-oriented languages, when a subclass inherits a parent class, it will not trigger the execution of the parent class's constructor, but here the parent class is executed when inheriting.
The second stage

Copy code The code is as follows:

function A(){
this.Astr = 'hello A';
}
A.prototype = {
funA:function(){
alert(this.Astr);
}
};
function B(){
arguments.callee.superclass && arguments.callee.superclass.apply(this,arguments);
this.Bstr = 'hello B';
}
B.prototype = {
funB:function(){
alert(this.Bstr);
}
};
function C(){
arguments.callee.superclass && arguments.callee.superclass.apply(this,arguments);
alert(this.Astr);
alert(this.Bstr);
}
function extend(sub,parent){
var subproto = sub.prototype;
sub.prototype = parent.prototype;
typeof subproto != 'object' && (subproto = {});
typeof sub.prototype != 'object' && (sub.prototype = {});
for(var i in subproto){
sub.prototype[i] = subproto[i];
}
sub.superclass = parent;
}
//B inherits A
extend(B,A);
//C inherits B
extend(C,B);
var c = new C(); // out 'hello A','hello B'
c.funA(); //out 'hello A'
c.funB(); // out 'hello B'
alert(c instanceof A) // out true
alert(c instanceof B) // out true;

Some changes have been made to the extend method here. There is a convention that each subclass has one The attributes of superclass are used to refer to the parent class it inherits. An empty function proto is used to obtain the prototype of the parent class and instantiated to the prototype of the subclass, so that the parent class constructor is not executed.
Instead, use a piece of code in the constructor of the subclass to execute the agreed constructor of the parent class.

Copy code The code is as follows:

arguments.callee.superclass && arguments.callee.superclass. apply(this,argumengs);

This completes class inheritance.
Is there a more convenient way to write inheritance for the above code? Modify the prototype of Function and see:

Copy the code The code is as follows:

Function.prototype.extend = function(parent){
var subproto = this.prototype;
this.prototype = parent.prototype;
typeof subproto ! = 'object' && (subproto = {});
typeof this.prototype != 'object' && (this.prototype = {});
for(var i in subproto){
this. prototype[i] = subproto[i];
}
this.superclass = parent;
return this;
}
function A(){
this.Astr = 'hello A';
}
A.prototype = {
funA:function(){
alert(this.Astr);
}
};
var B = function (){
arguments.callee.superclass && arguments.callee.superclass.apply(this,arguments);
this.Bstr = 'hello B';
}
B.prototype = {
funB:function(){
alert(this.Astr);
}
};
B.extend(A);
var C = function(){
arguments.callee.superclass && arguments.callee.superclass.apply(this,arguments);
alert(this.Astr);
alert(this.Bstr);
}.extend(B);
var c = new C(); // out 'hello A','hello B'
c.funA(); //out 'hello A'
c.funB(); // out 'hello B'
alert(c instanceof A) // out true
alert(c instanceof B) // out true;

What extend here does is: subproto refers to the original prototype of the subclass, and points the prototype of the subclass to the prototype object of the parent class, thus inheriting the parent class (the purpose of this is to make the instanceof parent class of the subclass true). Then traverse the subproto and add the members of the original prototype to the current prototype, so that the members of the subclass with the same name will overwrite the members of the parent class. Finally, point the attribute superclass of the subclass to the parent class.
The key to js inheritance is to maintain the uniqueness of the prototype chain. instanceof determines whether the __proto__ of the instance is the same Object as the prototype of the parent class.

Author cnblogs OD