Resolve JavaScript prototype and prototype chain

foreword

Although JavaScript prototype and prototype chain is an old topic, it still confuses many people. Today I will talk about this issue from another angle.

two questions

First look at this piece of code:

let obj = {}
obj.__proto__.haha = 'gogo'
console.log(obj.haha) // "gogo"

Running the above code, the output is gogo .

With regard to this result, the following questions arise:

• Where does the __proto__ attribute come from?
• Why can the attributes added to __proto__ be obtained directly through obj?

first question

Every object in js has a "prototype", and the prototype can generally be accessed through __proto__ :

let obj = {}
console.log(obj.__proto__)
// {constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, __lookupGetter__: ƒ, …}

It can be understood like this: The prototype of is also an object .

like:

• Every "person" has a "dad";
• But "Dad" is also a "person";
• "Dad" is not fundamentally different from other people except that it is someone's father;
• Dad is also a normal person.

akin:

• A "prototype" is an ordinary object;
• Dad has his dad too, and the archetype has its archetype.

second question

Objects differ from people in that:

• You can't just take your dad's stuff
• And the object can take whatever is in the prototype.

For example, when you ask an object for a property:

• If the object doesn't have the property you want, it will give you its prototype (daddy)
• If it doesn't have a dad, then its dad will find its dad's dad

For example the following example:

let obj = {
  __proto__: {
    __proto__: {
      haha: 'gogo'
    }
  }
}
console.log(obj.haha) // "gogo"

Because obj itself does not have the haha attribute, it will search in its own __proto__ . If it is not found, it will search in its __proto__.__proto__ until it finds the haha attribute or __proto__ chain returns null.

Another way to write:

let 爷爷 = {
  haha: 'gogo'
}
let 爸爸 = {
  __proto__: 爷爷
}
let obj = {
  __proto__: 爸爸
}
console.log(obj.haha) // "gogo"

The process of finding the haha attribute is: obj -> dad -> grandpa, does it look like a chain? This is the prototype chain.

About prototype

There is this sentence:

A class is a template for an object

You and I are both people, and "people" are classes and templates.

You and I both belong to the "human" category and have many things in common:

• have a mouth
• has two legs
• will eat
• will sleep
……

These commonalities are shared by human beings.

Of course, there must be differences between you and me as independent objects, for example: my name is X, your name is Y. These differences are "private" to the object.

Look at a piece of js code to create an object (note the comment section):

function Person(name) {
  this.name = name
}
Person.prototype.吃饭 = function() {
  console.log('吃吃吃')
}
Person.prototype.睡觉 = function() {
  console.log('睡睡睡')
}

let 我 = new Person('我')
我.吃饭() // "吃吃吃"
console.log(Person.prototype === 我.__proto__) // true
// 可以看出，在实例化的过程中，类的 prototype 成为对象的原型  

let 你 = new Person('你')
你.睡觉() // "睡睡睡"
console.log(我.__proto__ === 你.__proto__) // true
// 同一类的多个实例（对象），共享一个原型？

我.__proto__.吃饭 = function() {
  console.log('再吃一点')
}
console.log(我.吃饭 == 你.吃饭) // true
你.吃饭() // "再吃一点"
// 没错，同一类的多个实例，共享一个原型

By analogy with human society, it is:

• Your siblings "share" a dad with you
• When your dad gets his head burned, so does your brother's dad. In this process, it is not two fathers who have their heads burned at the same time, but one father.

Important conclusions:

• During the instantiation process (that is, "when an object is new"), the prototype of the class becomes the prototype of the object
• Multiple instances of the same class (aka "objects"), sharing a prototype

concluding remarks

Prototype is the bottom layer of js. If you don't understand prototype, it will hardly affect your work.

Questions like "what's the use of prototypes" are like "what's the use of bricks (or cement) for building buildings". In fact, in the process of writing code, knowledge of prototypes is almost never used. But if you encounter problems, bugs, and performance optimizations, the underlying knowledge will definitely be of great use.

~

~ This article is over, thanks for reading!

~

Learn interesting knowledge, meet interesting friends, and shape interesting souls!

Hello everyone, I'm Hermit King , the author of " Programming Samadhi ", my public account is " Programming Samadhi ", welcome to pay attention, I hope you can give me more advice!