Deep understanding of the JavaScript prototype chain

Source: Internet
Author: User

Objective

Recently encountered a problem, we can try.

Object . Prototype.a = function   ()  { console.log ( "AAA"  +this . Name) ;}; function . prototype.b =  function   ()  { console.log ( "BBB"  +this . name);}; function  Person  Span class= "Hljs-params" (name)  { this . Name = name;} var  person = new  person (  "China" );  

Q: What does Person.a () person.b () return separately?

Data references

The above topic examines the problem of the JavaScript prototype chain. We cite the narrative of the prototype object in JavaScript Advanced Programming (third edition).
-List Contents

Whenever a new function is created, a prototype property is created for the function based on a specific set of rules, which points to the prototype object of the function.
When the constructor is called to create a new instance, the inside of the instance contains a pointer (internal property) that points to the constructor's prototype object. ECMA-262 the 5th edition of this pointer is called [[Prototype]]. There is no standard way to access [[Prototype]] in the script, but the browser supports an attribute __proto__ on each object. The connection exists between the instance and the constructor's prototype object, not between the instance and the constructor.

Analyze problems

With the instructions above, let's look at the subject again. The constructor person has a prototype property, which points to the prototype object of the man. While Person.prototype is also an object, there is a [[Prototype]] pointer inside, a prototype object that points to the constructor, and the object's constructor is object (). Person.prototype.__proto__ -----> Object.prototype. The internal pointer [[Prototype]] of the instance person points to the prototype person.prototype of the constructor person.

Solve the problem

From the above analysis, we construct a prototype chain:
person.\__ptoto__ -----> Person.prototype
So Person.a () through the prototype chain lookup, finally found in the Object.prototype method A, console output AAAChina, and did not find method B, so will error, display typeerror:undefined is not a function

Deep understanding

In the problem, the constructor person is also an instance of function, so person.__proto__-–> function.prototype. The constructor inherits the Prerson.prototype, not the person.\__proto__.
You can determine whether an object is a prototype of another object through isPrototypeOf ().
Person.prototype.isPrototypeOf(person); //true
In addition, ECMA5 adds a method object.getprototypeof () to replace __proto__, returning the value of [[Prototype]].
For operator instanceof, judging whether an object belongs to a constructor, is by judging whether the prototype property of the constructor exists on the prototype chain of the object.
Person instanceof Function; //true
While the object.getprototypeof (function) return result is function Empty () {},
Function instanceof Object still returns True, it can only be a turtle's buttocks-the rules.
In addition, ECMA5 provides an inheritance method Object.create (proto, [Propertiesobject]) that creates an object that has a specified prototype and several specified properties.

// 只继承Person.prototype 而不实例化name属性varObject.create(Person.prototype);//但下面仍为trueinstanceof Person;

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

Deep understanding of the JavaScript prototype chain

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.