Understanding the concept of js prototype, prototype chain, is absolutely a necessary step to help us further study JS, for example, if JS developers want to understand JS inheritance, new keyword principle, and even package components, optimize the code, understand js prototype, prototype chain is a prerequisite. This article, with the most concise text, clearly explain the prototype chain equality relationship and the significance of the existence of the prototype, the prototype chain, after reading this article, you will find that the prototype, the prototype chain is so simple!The above classic prototype chain equality diagram, according to the following study, you will easily master.

I. Understanding of the equality relationship between prototype and prototype chain

First, we need to be clear about two concepts:

  1. Js is divided into function objects and ordinary objects. Each object has a __proto__ attribute, but only function objects have a Prototype attribute
  2. Object and Function are built-in js functions, similar to Array, RegExp, Date, Boolean, Number, String

Read these two concepts three times with me and memorize them for later

So what are __proto__ and prototype

  1. The __proto__ attribute is an object that has two attributes, constructor and __proto__;
  2. The prototype object prototype has a default constructor property that records which constructor the instance is created from;

Read these two concepts three times with me and memorize them for later

Motherland =’China’; motherland=’China’;

 function Person(name, age){ 
    this.name = name;
    this.age = age;
 }
 
 Person.prototype.motherland = 'China'
Copy the code

Person01 instance created with new Person()

Let person01 = new Person('小 小 ', 18);Copy the code

The father of JS follows the following two principles when designing JS prototypes and prototype chains

1. The Person. The prototype. The constructor = = Person / / * * standard 1: Person.prototype the constructor points to the constructor itself ** 2.person01.__proto__ == Person.prototype The __proto__ of the instance (that is, person01) points to the same place as the prototype object **Copy the code

Read these two rules with me three times and memorize them for later use

Remember the above four concepts and two criteria, any prototype chain equal judgment can be judged correctly;

I want you to look at the figure above and see if you know what the criteria are, so make sure you look at the figure above

Function Foo() let f1 = new Foo(); let f2 = new Foo(); f1.__proto__ = Foo.prototype; // rule 2 f2.__proto__ = foo. prototype; // rule 2 Foo. Prototype.__proto__ = object.prototype; __proto__ = null; // Foo. Prototype = null; // Foo. / / prototype chain to the stop Foo. The prototype. The constructor = Foo; Foo.__proto__ = Function. Prototype; Function. Prototype.__proto__ = Object. Prototype; Function.prototype.__proto__ = null; // the prototype chain stops here. Function Object() let o1 = new Object(); Function Object() let o1 = new Object(); let o2 = new Object(); o1.__proto__ = Object.prototype; O2. __proto__ = object.prototype; Object.prototype.__proto__ = null; / / prototype chain to stop this Object. The prototype. The constructor = Object; Prototype = Function. Prototype (Object is a Function); Function.prototype.__proto__ = object.prototype; Function.prototype.__proto__ = null; Function().__proto__ = function.prototype // Function().__proto__ = function.prototype Function.prototype.constructor = Function; 1 / / standardsCopy the code

Object. Prototype’s __proto__ points to null, and the prototype objects of other built-in function objects (e.g. Array.prototype) and the __proto__ of the custom constructor point to Object.prototype because the prototype Object itself is a normal Object. That is:

Object.prototype.__proto__ = null;
Array.prototype.__proto__ = Object.prototype;
Foo.prototype.__proto__  = Object.prototype;
Copy the code

Two: what is the meaning of prototype, prototype chain

So having understood these equivalents, we thought, what do we mean by prototype, prototype chain? The prototype object is used to store the attributes and methods shared by the instance, which can greatly reduce memory consumption.

Using the Person constructor and person01 instance we started with in this article, for example:

console.log(person01)
Copy the code

Print person01, which has its own attribute name = ‘xiaoming’, age = 18; Also, by archetypal chain relations, he has attributes motherland = ‘China’;

Let’s create the Person2 instance again

Let person02 = new Person(' flower ', 20); console.log(person02)Copy the code

Print person02, which has its own property name = ‘floret’, age = 20; Also, by archetypal chain relations, he has attributes motherland = ‘China’; Motherland = ‘China’; motherland = ‘China’; motherland = ‘China’; Instead of adding the Motherland property on each instance, we store this property on their constructor prototype object, for constructors such as human Person. There are many more similar attributes and methods. For example, we have black hair and we all have a method of eating and sleeping. The more the same attributes and methods are, the greater the significance of prototype and prototype chain. So we can do it like this

Person.prototype.hairColor = 'black';
Person.prototype.eat = function(){
    console.log('We usually eat three meals a day.')
}
console.log(person01)
console.log(person02)
Copy the code

Person01 and person02. To our surprise, they have hairColor and eat methods. Instances dynamically get the attributes and methods added after the Person constructor, and that’s what prototypes and prototype chains are all about! Can be dynamically retrieved, can save memory.

Another note: If Person01 dyed her hair yellow, what would the hairColor be?

Person01, hairColor = 'yellow'; console.log(person01) console.log(person02)Copy the code

As you can see, person01 hairColor = ‘yellow’ and person02 hairColor = ‘black’; Instance objects to rewrite the prototype on inheriting the animal sign, method, equivalent to “shielding” coverage, attribute, this operation does not change the prototype on the properties, methods, nature also won’t change by unified the constructor to create other instances, only modify the prototype of properties on the object and method, to change the other instance attributes, methods, through prototype chain.

Three: conclusion

If you like this article, please give me a little encouragement, if you feel that there is not written and explained clearly, welcome to comment inside correction! Before, I read other people’s articles and blogs to learn, and gained a lot from it. This is my first time to publish a technical article, hoping to communicate with everyone about technology and make progress together.