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

Source: Internet
Author: User

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!

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.