The origin of the prototype chain of the JavaScript Tour object _javascript skills

Start with the question:

function Base () {}var base = new Base ()
How many objects (object) are created by the above two lines of code?

To answer this question, first clarify the concept of object in JavaScript.


Objects

In JavaScript, almost everything is object (Arrays, Functions, Numbers, Objects ...) without the concept of class in C #. The essence of object is a collection of name-value pairs, where name is string, which can be called "property", and value includes various objects (String,number,boolean,array, Function ... ), refers to the value of the property.


typeof

Since object contains arrays, functions, Numbers, Objects ..., how can you tell the difference? 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, "string" is always returned for typeof (typeof X), regardless of X.

Constructor

JS has no class, there is no class in the constructor, then the object is how to create it? With the constructor: constructor. constructor is actually a function, so it is also object. The opening function Base () {} is a constructor, and var B = new Base () creates an object called B with this constructor (the keyword new). So we can conclude that the first two lines of code create at least 2 object: One is base, object of type function, one is base, object of type object.

Function () and object ()

This is two important predefined constructors. All function (such as the beginning Base ()) is constructed from the function (), and the prototype of object will be inherited by all object, as described below.

　　　　

function creation Process

When executing function Base () {THIS.A = 1}, the equivalent of the var base = new Function ("THIS.A = 1"), that is, the line of code itself, will use the predefined function () constructor, To construct a function type object (that is, base). In this creation process, JS will do what?

1, the first of course will create an object up, base point to this object. TypeOf This object = "function"
　　　　　
2, attach the __proto__ attribute to base so that it equals the prototype (also predefined) of the function of this constructor. This is a very important step, but also a regular step. (rule:) when performing any similar varx = new X (), the prototype of X is assignedto the __proto__ of X, that is, x.__proto__ and X.prototype point to the same object at this point.

　　　　　
3, create the call property for base, which is a function. So we can write this: Base.call ()

　　　　　
4, the construct property is created for base, which is also a function. This construct property is invoked when the var base = new Base () is executed.
5, to create Scope,length properties for base, slightly.
6, create the prototype property for base: First, create an object with the new object (), create a property called constructor for this object, and set the property value to base. Then set the base's prototype to this newly created object. Pseudo code is as follows:

  
   
   

   
    
   
    var=new Object ();
    
= Base;
    
= x;
  
   
   

First, focus on 2 and 6.

__proto__ and prototype

As you can see from 2, any object (including objects and functions) constructed with the constructor will have a __proto__ property that points to the prototype property of the constructor. Note that __proto__ is a private property, it is not visible on IE, I use chrome, I can see it.

As you can see from 6, any functions that is constructed with the new Function () will have a prototype attribute, which is constructed with the new Object (), and the initial public property has only one constructor.

　　　　

Prototype chain

Again, analyze the pseudocode for step 6th, which is to create a prototype for the function:

  
   
   

   
    
   
    var=new// see rule in 2, there will be x.__proto__= Object.prototype.
    
= Base;
    
= x;
  
   
   

At this point we construct an object with base ():

  
   
   

   
    
   
    var base=new// see rule in 2, there will be base.__proto__ = Base.prototype, which is = x. 
  
   
   
  
   
   

   
    //therefore have base.__proto__.__proto__ = x.__proto__
  
   
   
  
   
   

   
    and x.__proto__ = Object.prototype (see previous code fragment)
  
   
   
  
   
   

   
    So, base.__proto__.__proto__ = Object.prototype.
  
   
   

__proto__.__proto__, this is the legend of the JS object prototype chain! The key 6th step in creating a constructor with function () guarantees the top of all the prototype chains of object, and ultimately points to object.prototype.

　　　　

Property Lookup

And what would JS do if we wanted to read a property of an object?

For example, there is an object called XXX, we execute alert (XXX.A), that is, read the xxx a attribute, then JS will first go to XXX itself to find a property, if not found, then go to the xxx.__proto__ to find a property, thus along the prototype chain up, return if found (not found, return undefined). Take a look at an example:

　　　　

The figure above says: base itself has no constructor attribute, but Base.constructor does return the base function because base.__proto__ has this attribute. (What is base.__proto__?) Is Base.prototype, in the pseudocode for the 6th step of building a function, assigning the 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. So, the attributes defined in Object.prototype are inherited by all the Object through the prototype chain. In this way, the predefined object becomes the "base class" for all objects. This is the inheritance of the prototype chain.

　　　　

Looking at the graph, Object.prototype has predefined some properties, we append a property called Propertya, then this property and predefined properties, can be read from base.

Prototype inheritance

have been informed that

for var xxx =new Object (); There are xxx.__proto__= object.prototype;

for var xxx =new Base (); There are xxx.__proto__.__proto__= object.prototype;

What does it look like? From the C # perspective, it's like base is a subclass of object, that is, the object constructed from base () is a lower level on the prototype chain than object constructed from object (). This is done by pointing the Base.prototype to an object created by object (). So naturally, if I wanted to define a constructor that inherits from base, just point the prototype of the constructor to a base ()-Constructed object.

  
   
   

   
    
   
    function Derived () {}
    
var=new Base ();
    
= base;
    
var=// very easy to calculate: d.__proto__.__proto__.__proto__ = object.prototype.  
  
   
   

Extrapolation process: d.__proto__ points to derived.prototype, or base; then __proto__.__proto__ points to base.__proto__, which is Base.prototype, which is a new Object () created by the east, if it is O, then __proto__.__proto__.__proto__ point to o.__proto__, that is object.prototype.

Answer the question at the beginning and some new questions

The two lines of code create at least three objects: base, base, Base.prototype. By the way, base has no prototype attribute, and only the function type object is created prototype property when it is built.

　　　　

What will D.constructor return?

The constructor base () and derived () are empty, and if there is code, how will it be executed?

......

Cond. See next article