Front-End development must know the JS prototype and inherit _js object oriented

Source: Internet
Author: User
Tags constructor inheritance
I. Prototypes and constructors

JS all functions have a prototype attribute, this property refers to an object, that is, the prototype object, also referred to as the prototype. This function includes constructors and ordinary functions, and we are talking more about the prototypes of constructors, but we can't deny that ordinary functions also have prototypes. such as ordinary functions:
Copy Code code as follows:

function F () {
Alert (f.prototype instanceof Object)//true;
}


Constructor, which is also the construction object. The first step is to understand the process of instantiating an object through a constructor.
Copy Code code as follows:

function A (x) {
This.x=x;
}
var obj=new A (1);


There are three steps to instantiating an obj object:

1. Create obj objects: Obj=new object ();

2. Point the internal __proto__ of obj to the prototype that constructs his function A, and obj.constructor===a.prototype.constructor (this is forever established, Even if A.prototype no longer points to the original a prototype, that is to say: The constructor property of the class's instance object always points to the prototype.constructor of the constructor. This makes Obj.constructor.prototype point to A.prototype (Obj.constructor.prototype===a.prototype, which is not true when A.prototype changes, and is encountered below). Obj.constructor.prototype with the internal _proto_ is not the same thing, the instantiation of the object with the _proto_,obj is not prototype attributes, but there is an internal __proto__, through the __proto__ To obtain the prototype of the prototype chain on the property and prototype methods, Firefox public __proto__, can be in Firefox alert (obj.__proto__);

3. Use obj as this to invoke constructor A to set members (that is, object properties and Object methods) and initialize them.

When these 3 steps are completed, the Obj object is no longer associated with constructor a, and even if constructor a adds any members, it no longer affects the Obj object that has been instantiated. At this point, the Obj object has the X attribute and all members of the prototype object of constructor A, which, of course, has no members at this time.

The prototype object is initially empty, that is, there is no member (that is, the prototype attribute and the prototype method). You can verify how many Members a prototype object has by using the following methods.
Copy Code code as follows:

var num=0;
For (o in A.prototype) {
Alert (o);//alert the prototype attribute name
num++;
}
Alert ("Member:" + num);//alert the number of all the members of the prototype.


However, once a prototype property or prototype method is defined, all objects instantiated from the constructor inherit the prototype properties and the prototype methods, which are implemented through the internal _proto_ chain.

Such as

A.prototype.say=function () {alert ("Hi")};

All a objects have a say method, and the say method of this prototype object is the only copy shared by everyone, not every object has a copy of the Say method.

two. Prototypes and inheritance

First, look at a simple inheritance implementation.
Copy Code code as follows:

function A (x) {
This.x=x;
}
function B (x,y) {
This.tmpobj=a;
This.tmpobj (x);
Delete this.tmpobj;
This.y=y;
}


Lines 5th, 6, 7: Create temporary properties Tmpobj reference constructor A, then execute inside B, and then delete after execution. When the this.x=x is executed inside B (this is the object of B), B of course has the X attribute, of course B's X attribute and A's X attribute are independent, so they are not strictly inherited. The 5th, 6, 7 lines have a simpler implementation, that is, through the call (apply) method: A.call (THIS,X);

Both of these methods have this passed to the execution of a, which points to the object of B, which is why it is not directly a (x). This inheritance method is class inheritance (JS has no classes, just refers to constructors), although it inherits all the property methods of a constructed object, but it cannot inherit the members of a prototype object. And to achieve this goal, is to add a prototype inheritance on this basis.


The following example gives you a deep understanding of the prototype and the perfect inheritance of the prototype to participate in the implementation. (This is the core of this ^_^)
Copy Code code as follows:

function A (x) {
this.x = x;
}
A.prototype.a = "a";
function B (x,y) {
This.y = y;
A.call (THIS,X);
}
B.PROTOTYPE.B1 = function () {
Alert ("B1");
}
B.prototype = new A ();
B.PROTOTYPE.B2 = function () {
Alert ("B2");
}
B.prototype.constructor = B;
var obj = new B (1,3);

This example is about B inheriting a. 7th Row class Inheritance: A.call (this.x); The implementation prototype inherits the 12th line: B.prototype = new A ();

That is, the prototype of B points to the 1 instance object of a, which has an X attribute, a undefined, a property, and a value of "a". So B prototypes also have these 2 attributes (or, B and a build the prototype chain, B is subordinate to a). And because the first class inherits, B's Instance object also has the X attribute, that is, the Obj object has 2 x attributes with the same name, at which point the Prototype property X is to be placed in the instance object property x, so obj.x is 1, not undefined. The 13th line also defines the prototype method B2, so the B prototype also has a B2. Although line 9th to 11th sets the prototype method B1, you will find that after line 12th, the B prototype no longer has a B1 method, that is, obj.b1 is undefined. Because the 12th line makes the B-prototype point to change, the original B1 prototype object is discarded, naturally there is no B1.

After line 12th executes, the B prototype (B.prototype) points to the instance object of a, and the constructor of the instance object of a is constructor a, so B.prototype.constructor is the construction of object A (in other words, a constructs a prototype of B).

Alert (b.prototype.constructor) is "function A (x) {...}". Similarly, Obj.constructor is also a constructed object, and alert (obj.constructor) comes out "function A (x) {...}", which means b.prototype.constructor=== Obj.constructor (True), but B.prototype===obj.constructor.prototype (false), because the former is a prototype of B with a member: X,A,B2, which is a prototype of a and has a member: A. How to fix this problem, on line 16th, to point the constructor of the B prototype to the B constructor, then B.prototype===obj.constructor.prototype (true) has a member: X,A,B2.

If there is no line 16th, is that obj = new B (1,3) to invoke the A constructor instantiation? The answer is no, you will find obj.y=3, so still the called B constructor is instantiated. Although Obj.constructor===a (true), for the behavior of New B (), executes the 3 steps mentioned above to create an instance object through the constructor, the first step is to create an empty object; the second step, obj.__proto__ = = = B.prototype,b.prototype is a member of the X,A,B2, The obj.constructor points to the B.prototype.constructor, the constructor A, and the third step, the calling constructor B to set and initialize the member, with the property x,y. Although no 16 lines do not affect the properties of obj, as the previous paragraph says, it affects Obj.constructor and obj.constructor.prototype. So after using the prototype inheritance, you want to do the corrective action.

With regard to lines 12th and 16, in general, line 12th makes the B prototype inherit all the members of A's prototype object, but it also makes the prototype of the constructor of the instance object of B point to a prototype, so the defect is amended by line 16th.

Finished.

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.