JS prototype chain details and sample code, js prototype sample code

JS prototype chain details and sample code, js prototype sample code

Preface

On segmentfault, you can see the following question:

var F = function(){};Object.prototype.a = function(){};Function.prototype.b = function(){};var f = new F();

Q: Can I obtain a and B from f? What is the principle?

At first glance, it was a bit difficult. I studied it carefully and found that I still did not understand the prototype thoroughly. So I sum up one article and fill in a hole ~

Function and Object

Before solving the problem, let's talk about prototype, prototype chain, and the relationship between Function and Object. This is also the focus of this article.

Prototype

When a function is created, a prototype object is automatically created for it and can be accessed through the prototype attribute of the function.

Create an instance object for the constructor. The instance object contains a pointer (internal attribute) pointing to the prototype object of the constructor. In ECMA-262 5th, this pointer is called [prototype]. Although there is no standard access to [prototype] in the script, Firefox, Safari, and Chrome support an attribute _ proto __, the prototype object used to access the constructor.

Important:
The constructor accesses the prototype object through the prototype attribute.
The instance object accesses the prototype object through the [[prototype] internal attribute, and the browser implements the _ proto _ attribute for the instance object to access the prototype object.

Var F = function () {}; var f = new F (); // If the prototype object of F is p, then // F. prototype = p; // f. _ proto _ = p;

Repeat it again .. Prototype refers to the relationship between the constructor and the prototype object, and __proto _ refers to the relationship between the instance object and the prototype object.

Prototype chain

Class A inherits class B and class B inherits Class C ...... In fact, the prototype object of a has A pointer to the prototype object of B, and the prototype object of B has A pointer to the prototype object of C ...... Note that there is no relation between the three constructor A and B C, so it is called "prototype chain ~

If a is an instance object of A, the prototype chain of a is shown in the purple line, and the orange line connects the constructor and its prototype object.

The figure shows that the end of the prototype chain is Object. prototype. _ proto _, Which is null. When searching for an attribute or method of a, first find whether a itself is available. If not, search along the prototype chain until it is found or finally returns undefined to null.

Function and Object

The relationship between a Function and an Object is a bit backward:

An Object is a constructor. A Function is an instance Object of a Function. A Function is a constructor, but Function. prototype is an Object. An Object is an instance Object of an Object.

All objects are Object instances, and all functions are Function instances.

An Object is a Function instance, while Function. prototype is an Object instance.

Shows the relationship between the two.

As a constructor, Object has the prototype attribute pointing to Object. prototype. As an instance Object, Object. _ proto _ points to Function. prototype. A Function is a constructor that has a prototype attribute pointing to a Function. prototype, and Function is a Function, which is also a Function instance, so it has a Function. _ proto _ points to Function. prototype to Function. _ proto _ = Function. prototype is true.

It can be verified on the Chrome console ,.

Original question analysis

The best way to solve the prototype chain problem is to draw a picture. After the previous analysis, this picture should not be a problem, as shown below ~

The prototype chain of f is drawn from the Blue Line. Therefore, f can access a and B.

If you do not draw a picture, at first glance, you may think that f can access B, which may be the same as I think F. prototype points to Function. prototype, but F. prototype is an object rather than a Function, so its prototype object is not a Function. prototype.

Therefore, you must draw a picture of the prototype chain ~

Original question Extension

In the above question, f can only access a, but cannot access B. However, F can access both a and B. If you change the question to the following, what is the result of F. B? Why? Think about it ~

var F = function(){};Object.prototype.a = function(){};Function.prototype.b = function(){ console.log('F.__proto__') };F.prototype.b = function (){console.log('F.prototype');};

Summary

Have you found a special place for a function?

Generally, only one property of _ proto _ is used to access the prototype object of the constructor. For a function, it is both a function and an object.

As a function, it is born with the prototype attribute pointing to its prototype object function name. prototype.

As the Function instance object, it has the _ proto _ attribute pointing to Function. prototype

These two attributes usually point to two objects, but the two attributes of Function Point to the same, both pointing to Function. prototype.

For function A (),. the method in prototype is called by its instance object and is not used by itself. When A runs as an instance, A is called. in _ proto. That is to say, when used as A constructor,. the prototype chain is assigned to its instance with methods and attributes. When used as an object, A is used. _ proto _ this chain. In different scenarios, It is not wrong to identify it.

Throughout the entire article, I feel like I am talking about it ...... For more information, see ~ As for the question, I really don't know what to call ..

I hope this article will help you better understand what you have learned ~ Pai_^

Thank you for your support for this site. We will continue to update relevant information in the future to help you learn this part of knowledge!