preface

If you can hit tutorial 1 and understand a few concepts of the prototype chain, you have taken a small step forward on your way to the front end of flying magic… the biggest fear of learning is not slow but standing! The main purpose of this tutorial is to further understand the concept of prototype chain

So let’s consolidate what we learned in tutorial 1

Consider the following example:

Var text=new String(" I am a text "); function Persion(name,job){ this.name=name; this.job=job; } Persion.myName="lxm"; Persion. Prototype. SayName = function () {alert (enclosing name); } var perison1=new Persion("lxm","20")Copy the code

Consider: determine the value returned by the following expression:

Pass 8 in 2 minutes, the rest of you go back to understand tutorial 1, the portal is here.

perison1.__proto__===Persion.prototype;
perison1.name===Persion.name;
perison1.prototype.__proto__===Object.prototype;
Persion.prototype.__proto__===Object.prototype;
Persion.__proto__===Function.prototype;
Persion.constructor===perison1;
Function.__proto__===Object.prototype;
Function.prototype.__proto__===Object.prototype;
typeof Persion.prototype;
typeof Function.prototype;
Copy the code

Prototype chain figure

This graph is absolutely unique on the network, this is millet flying tutorial exclusive secret book! In the process of learning, the blogger found that his understanding and memory of the text was far less profound, intuitive and thorough than a diagram. In order for you to better learn the prototype chain, the blogger specially spent a whole morning drawing the relationship diagram of the prototype chain with Mermaid. In order to make the diagram more intuitive and clear, some reference lines have been hidden, among which:

  • The circle represents the name of the object
  • The square represents the attribute name
  • Solid lines represent the boundaries of objects
  • Dashed lines represent references
  • The diamond represents the base value

  1. The prototype chain is a single chain that flows in only one direction, with no loops

  2. Only Function’s __proto__ refers to its own prototype. This also explains why Function. Prototype is Function

  3. We can only get methods and properties from the prototype object through __proto__, so Persion1 doesn’t get the myName property from Persion through the prototype chain, but we can get or modify Persion’s properties from the prototype object’s constructor (which is nice).

Note that sometimes this method doesn’t work because the constructor of the prototype object can be changed and doesn’t necessarily point to the function object in which the prototype object resides

Continuing with the above example:

Constructor. MyName =" I've changed!" ; console.log(Persion.myName); // I have changedCopy the code
  1. The _proto__ of a normal object must refer to the prototype of the function object that created it
  2. Prototype Object’s __proto__ must point to Object.prototype!
  3. It is easy to understand from the diagram that objects with stereotype object attributes are function objects, otherwise they are normal objects
  4. The prototype chain has a beginning and an end, starting with NULL and ending with a normal object
  5. All Function objects are created as new by Function, including Function itself and each Function object’s __proto__ refers to function.prototype
  6. Object is the parent class of all objects. We can also call it the base class, but don’t get confused about what to call it

** Above nine I call the prototype chain of nine true words (don’t care too much about the name, I just choose ~) **

Bonus: Shouldn’t this.name and this.job be included in Persion? For countless days and nights, stupid bloggers didn’t understand the use of this until I drew this diagram, and I completely understood what this meant, which is that whoever runs this function that contains this, this throws its baggage (attribute) at whoever it is attached to!

Name and job are not properties of Persion.

Thinking: there is no Object.__proto__ pointer in the picture, where does it point to? (Please only rely on nine truths)

Think of problem solutions

Consider: determine the value returned by the following expression:

perison1.__proto__===Persion.prototype;
Copy the code

Firstly, it is judged that Perison1 is created by Persion in the new way, according to the fourth clause of the nine truths: true

perison1.name===Persion.name;
Copy the code

As you can see from the diagram, the difference is not equal. I have solved it in the windfall. The answer is false

perison1.prototype.__proto__===Object.prototype;
Copy the code

If perison1 has no prototype, it is a normal object

Persion.prototype.__proto__===Object.prototype;
Copy the code

Refer to article 5 of the Nine truths: The answer is: true

Persion.__proto__===Function.prototype;
Copy the code

Persion is a function object

Persion.constructor===perison1;
Copy the code

Constructor refers to Function. The answer is false

Function.__proto__===Object.prototype;
Copy the code

Function. Proto === prototype; The answer is false

Function.prototype.__proto__===Object.prototype;
Copy the code

According to the fifth of the nine truths, the answer is: true

typeof Persion.prototype;
Copy the code

A. object B. object C. object D. object

typeof Function.prototype;
Copy the code

The answer is: function. Note that this is a special prototype object

Thinking: there is no Object.__proto__ pointer in the picture, where does it point to? (Please only rely on nine truths)

Let’s do it step by step

  1. Object is a function Object
  2. Function object __proto__ refers to function. prototype
  3. So the Object. The proto = = = Function. The prototype

This is not easy to understand, Function created Object, and then Object created Function’s prototype Object

Object.__proto__===Function.prototype
Function.prototype.__proto__===Object.prototype
Copy the code

Don’t get too hung up on it, just understand it

conclusion

Ok, the concept and principle of the prototype chain I believe you are thoroughly familiar with these two tutorials! In this tutorial, we will focus on the prototype chain in action!

Author: Liu Xiaomin, Creditease Institute of Technology