Shulou(Shulou.com)05/31 Report--

This article introduces the relevant knowledge of "principle Analysis of JavaScript prototype chain". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Analytical prototype chain

Prototype chains are one of the most interesting things about the JavaScript language design. Before parsing the prototype chain, we need to understand the following important concepts.

Constructor function

A constructor is a special function, which is usually artificially agreed that the first letter of a function name needs to be capitalized and must be called through the new operator (essentially different from a normal function). Its function is to create a specific type of object. There are also some native constructors in JavaScript, such as Object, Array, Function, and so on.

Example

Whenever the constructor is called by the new operator, a new object is created, a process called instantiation. And this object is called an instance. In other words, any object is an instance, but the key is who is the constructor that created the instance? And who is its prototype?

Prototype

Inside the constructor, there is a special property prototype, which points to an object, which is, yes, a prototype, also known as a prototype object. The prototype object is a very special existence, and every time an object is instantiated by the constructor, the instance's [[Prototype]] points to the constructor's prototype by default. The instance object can find the prototype object through its own [[Porototyoe]] property, and the prototype object can find which constructor created the instance through its own construcor property. Note that many browsers replace the attribute [[Prototype]] with the attribute _ _ proto__.)

The relationship between constructors, instances, and prototype values

To further clarify the relationship between constructors, instances, and prototypes, we can start with the following picture

The instance dog finds the prototype Dog.prototype through its own [[Prototype]] property

The constructor Dog finds the prototype Dog.prototype through its own prototype property

The prototype Dog.prototype finds the constructor Dog through its constructor property.

The instance dog finds the constructor Dog through the constructor property.

How about finding the constructor Dog through the constructor property for the instance dog without solid line arrows? What are the details here? let's take a look at a simple piece of code and a picture.

Function Dog (name) {this.name = name;} let dog = new Dog ("cheems")

From the code combined with the picture, it is not difficult to find that there is no constructor property on the instance dog, but the prototype object has this property, so how does the instance get this property? this involves a special behavior in JavaScript-delegation. Let's take a look at what delegation is.

Entrust

When we try to get a property value of an object, but the object does not have that property, then JavaScript will try to get the property value from the prototype object. If that prototype object doesn't have this property either, look for it in its prototype, and so on until the process finally reaches the destination Object.prototype, and return undefined if it still hasn't been found. This process is called delegation.

Now you can see that the instance dog finds its own constructor by delegating. After understanding this, the prototype chain is about to emerge.

Prototype chain

If the desired property or method reference is not found on the first object, the engine continues to look on the object pointed to by its [[Prototype]]. Similarly, if the latter does not find the desired reference, it will continue to look for its [[Prototype]], and so on until it reaches Object.prototype, and the links to this series of objects are called prototype chains.

We can show it with a picture.

Because the constructor is also an object, it also has constructors and prototypes. The prototype of the constructor is the prototype of the instance, not itself. The custom constructor also needs the help of [[Prototype]] to find the prototype, and then to create its own constructor-- the native constructor Function, but note that the [[Prototype]] of the native constructor Function points to Function.prototype.

Console.log (Function.__proto__ = = Function.prototype); / / true

All prototype objects can be found along the prototype chain until the final prototype object Object.prototype is found, and then Object.prototype looks up for Null to indicate that there are no objects here.

This is the end of the content of "principle Analysis of JavaScript prototype chain". Thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.