Understanding the javaScript prototype chain in simple terms_javascript skills

The example in this article describes the prototype chain of javaScript. Share it with everyone for your reference. The specific analysis is as follows:

For the JavaScript prototype chain, I used to think it was a very deep thing, and I never understood it clearly. After reading some introductions today, I found this picture, which means that no language can explain it more clearly than this picture.

After looking at this picture, I suddenly have a qualitative understanding of javascript.

There are two types of JavaScript prototype chains: explicit and implicit:

Explicit prototype chain: is our common prototype;

Implicit prototype chain: It is inaccessible under normal circumstances, that is, invisible. It can be accessed through __proto__ under FireFox; the implicit prototype chain is used to search for the prototype chain within the javascript engine. , set by displaying the prototype chain;

1. The concept of prototype and __proto__

Prototype is an attribute of the function (each function has a prototype attribute). This attribute is a pointer pointing to an object. It is a property that displays the prototype of the modified object.

__proto__ is a built-in attribute owned by an object (please note: prototype is a built-in attribute of a function, and __proto__ is a built-in attribute of an object). It is an attribute used internally by JS to find the prototype chain.

Both chrome and FF can access the __proto__ attribute of the object, but IE cannot.

2. The new process

var Person = function(){};
var p = new Person();

The new process is divided into the following three steps:

(1) var p={}; In other words, initialize an object p
(2) p.__proto__ = Person.prototype;
(3) Person.call(p); that is to say, constructing p, which can also be called initialization p

The key lies in the second step, let’s prove it:

var Person = function(){};
var p = new Person();
alert(p.__proto__ === Person.prototype);

This code will return true. This shows that step 2 is correct.

3. Example

var Person = function(){};
Person.prototype.sayName = function() {
  alert("My Name is Jacky");
};
Person.prototype.age = 27;
var p = new Person();
p.sayName();

p is an object that references Person. We defined a sayName method and age attribute on the prototype of Person. When we execute p.age, we will first search inside this (that is, inside the constructor). If it is not found, we will trace it back along the prototype chain.

How does the upward traceback here work upward? Here we need to use the __proto__ attribute to link to the prototype (that is, Person.prototype) for search. Finally found the age attribute on the prototype.

I hope this article will be helpful to everyone’s JavaScript programming design.