preface

Although JavaScript prototype and prototype chain are an old topic, they still confuse many people. Today I'll talk about this issue from another angle.

Two questions

Let's look at this code first:

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

Run the above code and the output is gogo.

For this result, there are the following questions:

• Where did obj come from__ proto__ Properties?
• Why add to__ proto__ Properties on can be obtained directly through obj?

First question

Each object in js has a "prototype", which can generally be passed through__ proto__ Access to:

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

It can be understood as follows: prototype is also an object.

Like:

• Every "person" has a "father";
• But "Dad" is also a "person";
• "Dad" has no essential difference from others except that he is someone's father;
• Dad, you're an ordinary person.

allied:

• "Prototype" is an ordinary object;
• Dad also has his father, and the prototype also has its prototype.

Second question

Different from people:

• People can't take dad's things at will
• The object can take whatever is in the prototype

For example, when you ask for an attribute from an object:

• If the object doesn't have the properties you want, it will let its prototype (DAD) give it to you
• If he doesn't have a father, his father will find his father's father

For example, the following example:

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

Because obj itself does not have the attribute of haha, it will go its own way__ proto__ If you haven't found it, you'll ask it__ proto__.__proto__ Search until you find the haha attribute or__ proto__ The chain returns null.

Put it another way:

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

The process of finding haha attribute is: Obj - > dad - > Grandpa. Is it like a chain? This is the prototype chain.

About prototype

There is a saying:

A class is a template for an object

You and I are both human beings. "Human" is a class and a template.

You and I belong to the "human" category and have a lot in common:

• There is a mouth
• Have two legs
• Can eat
• Can sleep
  ......

These commonalities are common to mankind.

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

Take a look at the code for creating js objects (note the comments):

function Person(name) {
  this.name = name
}
Person.prototype.having dinner = function() {
  console.log('Eat eat eat')
}
Person.prototype.sleep = function() {
  console.log('Sleep sleep')
}

let I = new Person('I')
I.having dinner() // "Eat, eat"
console.log(Person.prototype === I.__proto__) // true
// It can be seen that in the process of instantiation, the prototype of the class becomes the prototype of the object  

let you = new Person('you')
you.sleep() // "Sleep"
console.log(I.__proto__ === you.__proto__) // true
// Multiple instances (objects) of the same class share a prototype?

I.__proto__.having dinner = function() {
  console.log('Have some more')
}
console.log(I.having dinner == you.having dinner) // true
 you.having dinner() // "Have some more"
// Yes, multiple instances of the same class share a prototype

Analogy to human society is:

• Your brothers and sisters "share" a father with you
• When your father burns his head, so does your brother's father. In this process, it is not two fathers who have a perm at the same time, but one father.

Important conclusions:

• In the process of instantiation (that is, "when new an object"), the prototype of the class becomes the prototype of the object
• Multiple instances of the same class (i.e. "objects") share a prototype

Concluding remarks

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

Similar to the question of "what is the use of prototype", like "what is the use of brick (or cement) for building". In fact, in the process of writing code, almost no prototype knowledge is used. However, if there are problems, bug s and performance optimization, the underlying knowledge must be of great use.

~ End of this article, thank you for reading!

~

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

Hello, I'm Programming samadhi Hermit Wang, my official account is " Programming samadhi "Welcome to pay attention and hope you can give us more advice!