What is the prototype chain in es6

青灯夜游
Release: 2022-11-15 19:28:26
Original
1608 people have browsed it

Prototype chain, simply understood is a chain composed of prototypes. When accessing an attribute of an object, it will first search on the attribute of the object itself. If it is not found, it will search on its __proto__ implicit prototype, that is, the prototype of its constructor. If it has not been found yet, It will then search in the __proto__ of the prototype of the constructor. In this way, searching upward layer by layer will form a chain structure, which is called a prototype chain.

What is the prototype chain in es6

The operating environment of this tutorial: windows7 system, javascript version 1.8.5, Dell G3 computer.

What is a prototype?

In JS, each function will have a prototype attribute when it is created. This attribute is a pointer pointing to an object, and this object is the prototype object of the function. (That is, prototype), it is a place used to share the properties and methods of all instances, so The prototype is actually the companion of the function (innate)

var a = [1, 2, 3, 4, 5];
a.__proto__ === Array.prototype; // true
Copy after login

What is the prototype chain?

Prototype chain, simply understood is a chain composed of prototypes. When accessing an attribute of an object, it will first search on the attribute of the object itself. If it is not found, it will search on its __proto__ implicit prototype, that is, the prototype of its constructor. If it has not been found yet, It will then search in the __proto__ of the prototype of the constructor, so that searching upward layer by layer will form a chain structure, which we call prototype chain.

Create a constructor:

function Person (name) {
    this.name = name
}
var cheng = new Person('Cheng');
var lin = new Person('Lin');
Copy after login

Print cheng and lin, you can see that there is a __proto__ attribute in both objects
What is the prototype chain in es6
What is the prototype chain in es6
Then I discovered

console.log(cheng.__proto__ === lin.__proto__); // true
Copy after login

So what exactly is this __proto__ attribute of the instance object?

console.log(cheng.__proto__ === Person.prototype); // true
console.log(lin.__proto__ === Person.prototype); // true
Copy after login

Summary: The instance object has a non-enumerable attributeproto. This attribute is a pointer pointing to the prototype of its constructor, which is the prototype object. The instance can pass proto Access methods on the prototype of the constructor

Simply put, The __proto__ of the instance object points to the prototype of the constructor

What is the prototype chain in es6

So, what is the prototype of this constructor?

Printing Person.prototype, you can see that there is also a __proto__ attribute
What is the prototype chain in es6

console.log(Person.prototype.__proto__ === Object.prototype)
Copy after login

Summary: The prototype of the function is essentially an ordinary object, so he is an instance from Object, therefore, the proto property of the prototype object points to Object.prototype.

What is the prototype chain in es6

Go down and find where __proto__ of Object.prototype points to?

Finally found that it points to null

Summary: Any data in Javascript can eventually find Object.prototype## along its own prototype chain

#Summary:

The __proto__ of the instance object points to the prototype of the constructor, the __proto__ of the constructor points to the prototype of Object, and the __proto__ of Object ultimately points to null

[Recommended learning:

javascript advanced tutorial]

The above is the detailed content of What is the prototype chain in es6. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!