Shulou(Shulou.com)06/03 Report--

Editor to share with you what the JavaScript prototype and prototype chain means, I believe most people do not know much about it, so share this article for your reference, I hope you will learn a lot after reading this article, let's go to know it!

I. understanding of the relationship between prototype and prototype chain

First of all, we have to clearly understand two concepts:

Js is divided into function objects and ordinary objects. Each object has a _ _ proto__ attribute, but only a function object has a prototype attribute.

Object and Function are all built-in functions of js. Similarly, we often use Array, RegExp, Date, Boolean, Number and String.

Read these two concepts with me three times and remember, they will be used later.

So what exactly are _ _ proto__ and prototype? the two concepts understand them.

The property _ _ proto__ is an object that has two properties, constructor and _ _ proto__

The prototype object prototype has a default constructor property that records which constructor the instance was created by

Read these two concepts with me three times and remember, they will be used later.

There is the following constructor Person, whose prototype has all the country attributes motherland='China'

Function Person (name, age) {this.name = name; this.age = age;} Person.prototype.motherland = 'China'

Person01 instance created by new Person ()

Let person01 = new Person ('Xiao Ming', 18)

The father of js follows the following two criteria when designing js prototypes and prototype chains

Person.prototype.constructor = = Person / / * * guideline 1: the constructor of the prototype object (i.e. Person.prototype) points to the constructor itself * * person01.__proto__ = = Person.prototype / / * * guideline 2: the _ _ proto__ of the instance (that is, person01) points to the same place as the prototype object * *

Read these two guidelines with me three times and remember that they will be used later.

With the above four concepts and two criteria in mind, any prototype chain equality judgment can be judged correctly.

You can compare with the picture above to see if your own conceptual guidelines are clear. Be sure to compare with the picture above.

/ / analyze this classic picture from the top function Foo () function Foo () let F1 = new Foo (); let f2 = new Foo (); f1.protoplast _ = Foo.prototype; / / Criterion 2f2.Protozoa _ = Foo.prototype; / / Criterion 2Foo.prototype.protoplast _ = Object.prototype; / / Criterion 2 (Foo.prototype is also an ordinary object in nature, applicable Criterion 2) Object.prototype.__proto__ = null / / the prototype chain stops here Foo.prototype.constructor = Foo; / / guideline 1 Foo.protoprotoplast _ = Function.prototype; / / guideline 2Function.protoprotoplast _ = Object.prototype; / / Criterion 2 (Function.prototype is also an ordinary object in nature, applicable Criterion 2) Object.prototype.__proto__ = null / / prototype chain stops here / / * * Note the difference between Foo and Function here. Foo is an example of Function * * / / starting from the middle Function Object () to analyze this classic picture Function Object () let o1 = new Object (); let O2 = new Object (); o1.protoplast _ = Object.prototype; / / guideline 2o2.protoplast _ = Object.prototype; / guideline 2Object.protoplast. Protoplast _ = null / / the prototype chain stops here Object.prototype.constructor = Object; / / Criterion 1Object.protoplast _ = Function.prototype / / Criterion 2 (Object is also a function in nature) / / it's a little bit around here. Object is essentially a function, and Function is an object Function.prototype.__proto__ = Object.prototype; / / Criterion 2 (Function.prototype is also an ordinary object in essence, applicable Criterion 2) Object.prototype.__proto__ = null / / the prototype chain stops here / / start analyzing this classic picture from Function Function () below Function Function () Function.__proto__ = Function.prototype / / Criterion 2Function.prototype.constructor = Function; / / guideline 1

It can be concluded that except for the _ _ proto__ of Object's prototype object (Object.prototype) pointing to null, the prototype object of other built-in function objects (for example: Array.prototype) and the _ proto__ of custom constructors 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; II: what is the meaning of prototype and prototype chain

After understanding these equality relations, we think, what is the meaning of archetypes and prototype chains? The function of the prototype object is to store the common properties and methods in the instance, which can greatly reduce the memory consumption.

Use the Person constructor and person01 example at the beginning of our article to say:

Console.log (person01)

Print person01, which has its own attribute name = 'Xiaoming', age = 18; and through the prototype chain relationship, he has the attribute motherland = 'China'

Let's create a person2 instance again.

Let person02 = new Person ('floret', 20); console.log (person02)

Print person02, he has his own attribute name = 'floret', age = 20; at the same time, through the prototype chain relation, he has the attribute motherland = 'China';. Do you see that the prototype object stores the attribute country shared by person01 and person02 motherland =' China'.? Instead of adding the motherland property to each instance, we store this property on their constructor prototype object, for constructors such as human Person. There are many same attributes and methods, for example, we have black hair, we all have a method of eating and sleeping, when there are more of the same attributes and methods, the more meaningful the prototype and prototype chain is. Then 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)

At this time we print person01, person02, we are pleasantly surprised to find that they have properties hairColor and eat methods; instances dynamically get the properties and methods added after the Person constructor, this is the meaning of prototype, prototype chain! It can be obtained dynamically and can save memory.

Also note: if person01 dyed her hair yellow, what would hairColor be?

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

As you can see, person01's hairColor = 'yellow', and person02's hairColor =' black' The attribute and method inherited on the instance object rewrite prototype is equivalent to "attribute coverage, attribute masking". This operation will not change the properties and methods on the prototype, and naturally will not change other instances created by the unified constructor. Only by modifying the properties and methods on the prototype object can we change the properties and methods obtained by other instances through the prototype chain.

The above is all the content of the article "what is the meaning of JavaScript prototype and prototype chain". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.