Detailed explanation of JS prototype and prototype chain (2)

This time, following the previous article, let’s take a look at the JS prototype and prototype chain as well as the precautions. The following is a practical case, let’s take a look at it together.

4. __proto__

#When JS creates an object (whether it is an ordinary object or a function object), there is a built-in attribute called __proto__. A prototype object used to point to the constructor that created it.
The object person1 has a __proto__ attribute, the constructor that created it is Person, and the prototype object of the constructor is Person.prototype, so:
person1.__proto__ == Person.prototype

Please Look at the picture below:

According to the above connection diagram, we can get:

Person.prototype.constructor == Person;
person1.__proto__ == Person.prototype;
person1.constructor == Person;

However, the really important point to make clear is that this connection exists Between the instance (person1) and the prototype object (Person.prototype) of the constructor (Person), rather than between the instance (person1) and the constructor (Person).

Note: Because most browsers support the __proto__ attribute, it was added to ES6 (some ES5 browsers also support it, but it is not yet a standard).

5. Constructor

Everyone who is familiar with Javascript knows that we can create an object like this:

var obj = {}

It is equivalent to the following This way:

var obj = new Object()

obj is an instance of the constructor (Object). So:

obj.constructor === Object
obj.__proto__ === Object.prototype

The new object obj is created using the new operator followed by a constructor. The constructor (Object) itself is a function (the function object mentioned above), which is similar to the constructor Person above. It's just that this function is defined for the purpose of creating new objects. So don't be intimidated by Object.

Similarly, the constructors that can create objects are not only Object, but also Array, Date, Function, etc.
So we can also use constructors to create Array, Date, and Function

var b = new Array();
b.constructor === Array;
b.__proto__ === Array.prototype;var c = new Date(); 
c.constructor === Date;
c.__proto__ === Date.prototype;var d = new Function();
d.constructor === Function;
d.__proto__ === Function.prototype;

These constructors are all function objects:

6. Prototype Chain

Small test to check your understanding:

What is person1.__proto__?

What is Person.__proto__?

What is Person.prototype.__proto__?

What is Object.__proto__?

What is Object.prototype__proto__?

Answer:
First question:
Because person1.__proto__ === person1's constructor.prototype
Because person1's constructor === Person
So person1.__proto__ === Person.prototype

Second question:
Because Person.__proto__ === Person's constructor.prototype
Because Person's constructor=== Function
So Person. __proto__ === Function.prototype

The third question:
Person.prototype is an ordinary object. We don’t need to pay attention to its attributes, as long as we remember that it is an ordinary object.
Because the constructor of a common object === Object
So Person.prototype.__proto__ === Object.prototype

For the fourth question, refer to the second question, because Person and Object are the same It is a constructor function

Fifth question:
Object.prototype The object also has a proto attribute, but it is special and is null. Since null is at the top of the prototype chain, this can only be remembered.
Object.prototype.__proto__ === null

The above is the detailed content of Detailed explanation of JS prototype and prototype chain (2). For more information, please follow other related articles on the PHP Chinese website!