The most detailed introduction to JS prototype and prototype chain

The content shared with you in this article is the most detailed introduction to JS prototype and prototype chain, which has certain reference value. Friends in need can refer to it

1. __proto__

When JS creates an object (whether it is a normal object or a function object), there is a built-in property called __proto__, which is used to point to the prototype object of 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:

Figure 6-1 of "JavaScript Advanced Programming"

According to the above link Figure, 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 constructor (Person) between the prototype object (Person.prototype), 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).

2. Constructor

Everyone who is familiar with Javascript knows 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 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 function objects:

Function objects

3. Prototype chain

Small test to test your understanding:

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__ === constructor of person1.prototype
Because Constructor of person1 === Person
So person1.__proto__ === Person.prototype

Second question:
BecausePerson.__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 properties, 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 both constructors

Fifth question:
Object.prototype The object also has the 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 The most detailed introduction to JS prototype and prototype chain. For more information, please follow other related articles on the PHP Chinese website!