js prototype chain principle diagram explanation_javascript skills

The inventor of ECMAscript designed this linked list in order to simplify the language while maintaining inherited properties. .
Have you ever learned about linked lists in data structures? There is a position in the linked list that is equivalent to a pointer, pointing to the next structure.

So the same goes for __proto__. Whenever you define a prototype, it is equivalent to pointing the __proto__ of the instance to a structure. Then the pointed structure is called the instance. prototype.

The text is a bit convoluted, look at the pictures to speak

Copy the code The code is as follows:

var foo = {
x: 10,
y: 20
};

When I do not specify __proto__, foo will also reserve such an attribute.

If there is a clear pointer, then the linked list will be linked. La.

Obviously, b and c in the figure below share the attributes and methods of a, and at the same time have their own private attributes.

__proto__ also has pointing by default. It points to the highest-level object.prototype, and the __proto__ of object.prototype is empty.

Copy code The code is as follows:

var a = {
x: 10,
calculate: function (z) {
return this.x this.y z
}
};
var b = {
y: 20,
__proto__: a
};

var c = {
y: 30,
__proto__: a
};

// call the inherited method
b.calculate( 30); // 60

Understand the nature of the attribute link pointer __proto__. . Let’s understand constructor again.

When a prototype is defined, a prototype object will be constructed, and this prototype object is stored in the prototype method of the function that constructs the prototype.

Copy the code The code is as follows:

function Foo(y){
this.y = y ;
}

Foo. prototype.x = 10;

Foo.prototype.calculate = function(z){
return this.x this.y z;
};

var b = new Foo (20);

alert(b.calculate(30));

[Reference Document]

http://dmitrysoshnikov.com/ecmascript/javascript-the-core/