The origin of the prototype chain of a Javascript Object

Start with question:

Function Base () {} var base = new Base ()
How many objects will the above two lines of code create )?

To answer this question, first clarify the concept of objects in Javascript.

Objects

In Javascript, almost everything is an object (Arrays, Functions, Numbers, Objects ......), Without the concept of class in C. The object is essentially a set of name-value pairs, where name is of the string type and can be called "property". value includes various objects (string, number, boolean, array, function ...), It refers to the value of property.

Typeof

Since the object contains Arrays, Functions, Numbers, Objects ......, So how can we differentiate them? The answer is typeof. Typeof returns a string, such as typeof (Null) = "object", typeof (false) = "Boolean", typeof (1) = "number ". Since the string is always returned, for typeof (typeof x), No matter what x is, "string" is always returned ".

Constructor

Without a class in JS, there is no constructor in the class. How is an object created? Constructor. Constructor is actually a Function, so it is also an object. Function Base () {} at the beginning is a constructor. var B = new Base () is used to create an object named B through the constructor (through the keyword new. So far, we can conclude that at least two objects are created in the first two lines of code: one is Base, the other is function object, and the other is base, and the other is object.

Function () and Object ()

These are two important pre-defined constructors. All functions (such as Base () at the beginning) are constructed by function (), and the prototype of the Object will be inherited by all objects.

　　　　

Function creation process

When function Base () {this. a = 1} is equivalent to var Base = new Function ("this. a = 1 "). That is to say, this line of code itself uses the predefined Function () constructor to construct a function-type object (that is, Base. What Will js do during the creation process?

1. First of all, an object will be created and the Base points to this object. Typeof this object = "function"
　　　　　
2. Attach the _ proto _ attribute to the Base so that it is equal to the prototype of the Function Constructor (also predefined ). This is an important and regular step.(Rule: When you execute anything similar to varx = new X (), the prototype of X is assigned to _ proto _ of x __In other words, x. _ proto _ and X. prototype point to the same object.

　　　　　
3. Create a call attribute for the Base, which is a function. Therefore, we can write: Base. Call ()

　　　　　
4. Create a Construct attribute for the Base, which is also a function. This Construct attribute is called when var base = new Base () is executed.
5. Create attributes such as Scope and Length for the Base.
6. Create a prototype attribute for the Base: first create an Object with new Object () and create a property called constructor for this Object. The property value is set to Base. Set the prototype of the Base to the newly created object. The pseudocode is as follows:

 var x = new Object();
x.constructor = Base;
Base.prototype = x;

Focus on 2 and 6.

_ Proto _ and prototype

As can be seen from 2, any object constructed by the constructor (including Objects and Functions) will have the _ proto _ attribute pointing to the prototype attribute of the constructor. Note that _ proto _ is a private attribute and cannot be seen on IE. I use chrome and can see it.

From 6, we can see that any Function constructed with new Function () has the prototype attribute, which is constructed with new Object, the initial public attribute has only one constructor.

　　　　

Prototype chain

Next, we will analyze the pseudocode in step 1, that is, to create prototype for the function:

 Var x = new Object (); // see the rule in 2. x. _ proto __= Object. prototype.
X. constructor = Base;
Base. prototype = x;

In this case, we construct an object using Base:

 Var base = new Base (); // see the rule in 2. There will be base. _ proto _ = Base. prototype, that is, = x. // Base. _ proto __. _ proto _ = x. _ proto _/and x. _ proto _ = Object. prototype (see the previous code snippet) // Therefore, base. _ proto __. _ proto _ = Object. prototype.

_ Proto _. _ proto __, this is the prototype chain of the legendary JS object! Because the key step 1 during the creation of the constructor using Function () ensures that the top of the prototype chain of all objects is directed to object. prototype.

　　　　

Property Lookup

But what will JS do if we want to read a certain attribute of an object?

For example, if an object is named xxx, we execute alert (xxx. a), that is, to read the attribute of xxx, then JS will first go to xxx itself to find the attribute. If not, it will go to xxx. in _ proto _, locate the attribute, and then follow the prototype chain up to return the result (undefined is returned if it is not found ). Here is an example:

　　　　

It is learned that the base itself does not have the constructor attribute, but the base. constructor can indeed return the Base function because base. _ proto _ has this attribute. (What is base. _ proto? It is Base. prototype. In the pseudo code of step 1 of the Function built above, assign Base. prototype. constructor to Base itself .)

Object as a "base class"

In addition, the top of the prototype chain of any object is Object. prototype. Therefore, the attributes defined in Object. prototype are inherited by all objects through the prototype chain. In this way, the predefined Object becomes the "base class" of all objects ". This is the inheritance of the prototype chain.

　　　　

Check that the Object. prototype has predefined some attributes. If We append an attribute named propertyA, this attribute can be read from the base just like the predefined attribute.

Prototype inheritance

We have learned that,

For var xxx = new Object (); xxx. _ proto __= Object. prototype;

For var xxx = new Base (); xxx. _ proto _. _ proto __= Object. prototype;

What does it look like? From the perspective of c #, similar to the fact that Base is a subclass of an Object, that is, an object constructed by Base () is similar to an Object constructed by object, A lower level on the prototype chain. This is done by pointing Base. prototype to the Object created by Object. Naturally, if I want to define a constructor that inherits from the Base, we only need to point the prototype of the constructor to the object constructed by a Base.

 Function Derived (){}
Var base = new Base ();
Derived. prototype = base;
Var d = newDerived (); // It is easy to calculate: d. _ proto _ = Object. prototype.

Calculation process: d. _ proto _ points to Derived. prototype, that is, base; then _ proto __. _ proto _ points to base. _ proto __, that is, Base. prototype, that is, the stuff created by a new object (). Suppose it is o; then _ proto __. _ proto __. _ proto _ points to o. _ proto __, that is, Object. prototype.

Answer the first question and several new questions

The two lines of code have at least three objects: Base, base, and Base. prototype. By the way, the base does not have the prototype attribute. Only function-type objects are created when they are built.

　　　　

D. What will constructor return?

The constructors Base () and Derived () are empty. If there is code, how will it be executed?

......

To be continued. See the next article