[to] The most detailed JS prototype and prototype chain Ultimate explanation

Four. __proto__

JS when creating an object (whether it is a normal object or a function object), there is a __proto__ built-in property called, which points to the prototype object that created its constructor.
The object Person1 has a __proto__ property, and the constructor that creates it is person, and the prototype object of the constructor is Person.prototype, so:
person1.__proto__ == Person.prototype

Please see:

Figure 6-1 of the advanced programming of JavaScript

According to the above connection diagram, we can get:

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

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

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

Five. Constructors

Kids who are familiar with Javascript know that we can create an object like this:
var obj = {}
It is equivalent to the following:
var obj = new Object()

Obj is an instance of a constructor function (Object). So:
obj.constructor === Object
obj.__proto__ === Object.prototype

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

Similarly, a constructor that can create objects is not just an object, it can be array,date,function, and so on.
So we can also construct functions to create arrays, Date, 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 function objects:

Function Object Six. Prototype chain

Quiz to test what you understand:

1. person1.__proto__What is it?
2. Person.__proto__What is it?
3. Person.prototype.__proto__What is it?
4. Object.__proto__What is it?
5. Object.prototype__proto__What is it?

Answer:
First question:
Becauseperson1.__proto__ === person1 的构造函数.prototype
Becauseperson1的构造函数 === Person
Soperson1.__proto__ === Person.prototype

The second question:
BecausePerson.__proto__ === Person的构造函数.prototype
BecausePerson的构造函数 === Function
SoPerson.__proto__ === Function.prototype

Question three:
Person.prototypeis a normal object, we don't have to pay attention to what properties it has, just remember that it is a normal object.
Because the constructor of an ordinary object = = = Object
SoPerson.prototype.__proto__ === Object.prototype

Fourth, refer to the second question, because person and Object are all constructors

Question Fifth:
Object.prototypeAn object also has the Proto property, but it is more special, null. Because NULL is at the top of the prototype chain, this can only be remembered.
Object.prototype.__proto__ === null

Yi can cola
Links: https://www.jianshu.com/p/652991a67186
Source: Pinterest
Copyright belongs to the author. Commercial reprint please contact the author for authorization, non-commercial reprint please specify the source.

[to] The most detailed JS prototype and prototype chain Ultimate explanation