Deep understanding of JavaScript prototypes

# # Understanding JavaScript Prototypes

Mdn[inheritance and prototype chain] (Https://developer.mozilla.org/zh-CN/docs/JavaScript/Guide/Inheritance_and_the_prototype_chain)
This article roughly explains the basics of JavaScript prototypes, but you may still be confused, right?

# # puzzle 1 What we used to say about prototypes
Well, you're a very good person to ask questions, and the above article also says that we usually call prototypes or prototypes based inheritance
More to say [[prototype]], and this prototype is not the one we're familiar with from functions (or constructors)
The internal property value, [[prototype]] in many browsers implementation inside is ' __proto__ ', dizzy, how to pop out again
A ' __proto__ '?

# # Confusing point 2 ' __proto__ ' and Obj.prototype ' what's the relationship

The first thing you need to understand is:

1, in JS Everything is an object, the object is by the class (JS is the constructor) made out

2, the object is to have ' __proto__ ' attribute, but no prototype
3, the class does not have ' __proto__ ' attribute, but has prototype;

4. The ' __proto__ ' of an object obtained by the same class instantiation (new) is a prototype that references the class

# # Confuse Dot # 3 constructor is what?

In the JavaScript language, the constructor property is designed specifically for function, and it exists in the prototype property of each function. This constructor holds a reference to the function.

When we create a function, JavaScript performs the following actions in the interior:

1. Add a prototype property (that is, the prototype object) to the function.

2. Add an extra constructor property to the prototype object, and the property holds a reference to the function F.

So when we create an object with function f as a custom constructor, the object instance internally
A property of the prototype object that points to its constructor (here is our custom constructor f) is automatically saved __proto__, so we can access the constructor's prototype in each object instance
All the properties and methods that are owned, as if they were instances of their own.
Of course the instance also has a constructor attribute (obtained from prototype), at which point the constructor function is obvious, because at this time each object instance can access its constructor through Constrcutor object.

Example

The following code, you may have seen or used hundreds of times, but here again to move it up, but there may be some new ideas.

code is as follows

copy code

//constructor. <em>this</em> returns as a new object and its internal [[prototype]] Property will be set to the constructor default prototype property var Circle = function (RADIUS) {     This.radius = radius;  & nbsp; //next Line are implicit, added for illustration only    //this.__proto__ = Circle.prototyp E } www.111cn.net //Expand the properties of the default prototype object for Circle so it expands the properties of each prototype object from which it creates a new instance Circle.prototype.area = function () {    return Math.pi*this.radius*this.radius } //Create two examples of Circle, each using the same prototype attribute var a = new Circle (3), B = new Circle (4), A.area (). toFixed (2);//28.27 B.area (). toFixed (2); 50.27

It's great. If I change the prototype attribute of constructor, can even an existing instance object immediately access the new prototype version?

Well...... Not exactly. This is true if I modify the properties of an existing prototype, because A.__PROTO__ references the object defined by A.prototype when the object is created.

The code is as follows	Copy Code
var A = function (name) { THIS.name = name; } var a = new A (' alpha '); A.name; ' Alpha ' a.prototype.x = 23; a.x; 23 Big Army Translated more than 1 years ago 0-person Top The top translation is good Oh!

But if I replace the prototype property with a new object, a.__proto__ still points to the original object.

The code is as follows	Copy Code
var A = function (name) { THIS.name = name; } var a = new A (' alpha '); A.name; ' Alpha ' A.prototype = {x:23}; a.x; What is the default prototype of NULL?

An object that owns the constructor property.

The code is as follows	Copy Code
var A = function () {}; A.prototype.constructor = = A; True var a = new A (); A.constructor = = A; True (A's constructor property inherits from its prototype) Cloud_lee

Translated more than 1 years ago
0-person Top
The top translation is good Oh!

Other translated versions (1)

Loading ...
What's the relationship between instanceof and prototype?
If A's prototype property appears in the prototype chain of a, then expression a instanceof a returns true. This means that we can cheat instanceof and let it fail.

The code is as follows	Copy Code
var A = function () {} var a = new A (); a.__proto__ = = A.prototype; True-so instanceof A'll return True A instanceof A; True Mess around with a ' s prototype a.__proto__ = Function.prototype; A ' s prototype no longer in same prototype chain as A ' s prototype property A instanceof A; False

Prototype chain

After understanding the new operator and the role of the prototype, let's look at what is [[Prototype]]? And how does an object search for attributes along this reference?

In the JS world, each object has a [[Prototype]] attribute by default, its saved address constitutes the object's prototype chain, which is automatically added by the JS compiler when the object is created, and its value is determined by the right-hand parameter of the new operator: when we var object1 = {}; , Object1 [[Prototype]] points to the prototype object of the object constructor because the var object1 = {} is essentially equal to the Var object = new Object (); (The reason can refer to the previous parsing process for new a).

When an object looks up a property, it first iterates through its own properties, and if not, it continues to look for the object referenced by [[Prototype]], and if no more, continues to find [[Prototype]]. [[Prototype]] refers to the object, and so on, until [[Prototype]].....[[prototype]] is undefined ([[Prototype] of object] is undefined)

The code is as follows

Copy Code

We want to get a1.fgetname alert (a1.fgetname);//Output undefined 1, traversing the A1 object itself The result A1 object itself has no Fgetname property 2, find A1 [[Prototype]], that is, its corresponding object A.prototype, at the same time to traverse As a result, A.prototype does not have this attribute 3, find the A.prototype object [[Prototype]], point to its corresponding object Object.prototype It turns out Object.prototype didn't fgetname. 4, trying to find Object.prototype [[Prototype]] property, the result returns undefined, this is the A1.fgetname value

Simply put, a reference to another object is saved by the object's [[Prototype]], which is used to look up the property, which is the prototype chain.