How does JavaScript inherit the introduction _javascript tips

Source: Internet
Author: User
First phase:
Copy Code code 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"

You must have seen the meaning at a glance, first defining the A,b two classes, and then using the Extend method to let B inherit Class A. The extend principle is to have the parent class new to the prototype of the subclass.
With instanceof to detect also true, and if you want instanceof to be true, then you must have the prototype object for the two classes to be the same, either indirectly or directly.
Is there a problem with this way? In a typically object-oriented language, subclasses do not trigger the execution of the parent class when inheriting the parent class, and this is where the parent class executes when inheriting.
Second phase
Copy Code code 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 Inheritance A
Extend (b,a);
C Inheritance 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;

Here are some changes to the Extend method, there is a convention, each subclass has a superclass attribute, used to reference her inherited parent class, with an empty function proto to obtain the prototype of the parent class, instantiated to the subclass of prototype, This does not execute the parent class builder.
Instead, a section of code is used in the constructor of the subclass to execute the parent class constructor of the contract.
Copy Code code as follows:

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

This completes the inheritance of the class.
For the above code there is no more convenient inheritance, modify the function of the prototype to see:
Copy Code code 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;

Here's what the Extend does: Subproto refers to the original prototype of the subclass, pointing the prototype of the subclass to the prototype object of the parent class, so that the parent class is inherited (this is to make the subclass instance instanceof the parent class to be true). Then, after Subproto, add the members of the original prototype to the present prototype, the members of the same class with the same name will overwrite the members of the parent class. Finally, the attribute superclass of the subclass is pointed to the parent class.
JS inheritance is the key to maintain the uniqueness of the prototype chain, instanceof to determine whether the instance of the __proto__ and the parent class prototype as the same object.

Author Cnblogs OD
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.