In-depth understanding of javascript prototype and prototype chain

1. What is a prototype?

Prototype: When each JavaScript object (except null) is created, it is associated with another object. This object is what we call the prototype. Each object "inherits" properties from the prototype.

For example

var obj = new Object();

When you create an object, you will associate it with an object at the same time. As shown in the figure, the associated object is the prototype of the newly created object obj.

2. Prototype

In JavaScript, every function has a prototype property, which points to the function's prototype object. (ps: A function is actually also an object, so it does not conflict with the example in 1 above)

var obj = new Object();

The so-called prototype is actually the property associated with the prototype of the object, as shown in the figure

For example:

 function Animal(weight) {
   this.weight = weight
 }

The following figure shows the relationship between objects and prototypes:

Every object "inherits" properties from its prototype

For example, cat1 and cagt2 instantiate Animal. There is no height attribute in cat1 and cagt2, but the value of height can be printed as 10. In fact, cat1 and cagt2 inherit the height attribute in the prototype Animal.prototype.

 function Animal(weight) {
    this.weight = weight
  }
  Animal.prototype.height = 10
  var cat1 = new Animal()
  var cat2 = new Animal()
  console.log('cat1',cat1.height)//10
  console.log('cat2',cat2.height)//10

__proto__

This is a property that every object (except null) has, called __proto__, which points to the prototype of the object.

  function Animal(weight) {
     this.weight = weight
  }
  Animal.prototype.height = 10
  var cat1 = new Animal()
  var cat2 = new Animal()
 console.log('cat1.__proto__ === Animal.prototype',cat1.__proto__ === Animal.prototype)
 console.log('cat2.__proto__ === Animal.prototype',cat2.__proto__ === Animal.prototype) 

__proto__ and prototype

• __proto__ is the attribute of the instance pointing to the prototype
• Prototype is the property of an object or constructor pointing to a prototype

4. Constructor

Each prototype has a constructor property that points to the associated constructor.

  function Animal(weight) {
     this.weight = weight
  }
  Animal.prototype.height = 10
  var cat1 = new Animal()
  var cat2 = new Animal()
 console.log('cat1.__proto__ === Animal.prototype',cat1.__proto__ === Animal.prototype)
 console.log('Animal===Animal.prototype.constructor',Animal===Animal.prototype.constructor)
// Get the prototype object console.log('Object.getPrototypeOf(cat1) === Animal.prototype',Object.getPrototypeOf(cat1) === Animal.prototype) 

Update the relationship diagram

cat1.__proto__ === Animal.prototype

Animal === Animal.prototype.constructor

Is cat1.constructor === Animal true? The answer is true, because every object "inherits" properties from its prototype. There is no attribute constructor in cat1, but its prototype cat1.__proto__ points to Animal.prototype. However, the prototype of Animal.prototype has the attribute constructor, so cat1's constructor attribute inherits the constructor attribute in the prototype. Here we can see a little bit of the prototype chain. Let's look at

Therefore cat1.constructor === Animal is also true

5. Examples and Prototypes

When reading the attributes of an instance, if it cannot be found, it will look for the attributes in the prototype associated with the object. If it still cannot be found, it will look for the prototype of the prototype, and so on until it finds the top level. This forms a prototype chain

function Animal(weight) {
   this.weight = weight
}
 Animal.prototype.name = 'animal'
 var cat1 = new Animal()
 cat1.name = 'littleCat'
 console.log('cat1.name',cat1.name)
 delete cat1.name;
 console.log('cat1.name',cat1.name) 

As you can see, before deleting the attribute, it was littleCat. After deleting the attribute, the instance no longer has a name attribute. When it cannot find the name attribute, it will look for it in its object prototype, that is, in cat1.__proto__, that is, in Animal.prototype. The value of the name attribute in Animal.prototype is animal, so the value after deleting the name attribute becomes the value of the attribute name in the prototype, animal.

Then let’s look at what if cat1’s prototype also has no name attribute? What will happen? Look for it in the prototype of the prototype? So what is the prototype of the prototype?

6. Prototype of Prototype

We say that a prototype is another object associated with an object when it is created. So a prototype is also an object. Since it is an object, a prototype should also be associated with an object.

Then when the prototype object is created, it will also be associated with an object

var obj = new Object();

See the relationship diagram

So what about the prototype of Object.prototype?

So what is Object.prototype.__proto__?

console.log('Object.prototype.__proto__ === null',Object.prototype.__proto__ === null)

You can see the results

That is to say, the value of Object.prototype.__proto__ is null, which means that Object.prototype has no prototype. So it can be imagined that in the prototype chain, when the attribute finds the top-level prototype and there is no attribute, then there is no such attribute.

7. Prototype Chain

To sum up, assigning an instance of a prototype to another object, which in turn is assigned to other objects, and assigning different values ​​to objects in the actual code, will form a prototype chain. This may be very abstract, let's look at an example

 function Animal(weight) {
     this.weight = weight
 }
 Animal.prototype.name = 'animal'
 var cat1 = new Animal()
 var pinkCat = cat1
 console.log('pinkCat.name',pinkCat.name)
 console.log('pinkCat.__proto__ === cat1.__proto__ == Animal.prototype',pinkCat.__proto__ === cat1.__proto__ == Animal.prototype)
 var samllPinkCat = pinkCat
 console.log('samllPinkCat.name',samllPinkCat.name)
 console.log(samllPinkCat.__proto__ == pinkCat.__proto__ === cat1.__proto__ == Animal.prototype)

The above is the prototype chain. Linking up layer by layer to form a chain is the so-called prototype chain. In the above, cat1 instantiates Animal, cat1 is assigned to pinkCat, and pinkCat is assigned to samllPinkCat, thus forming a prototype chain from samllPinkCat, pinkCat to cat1 and finally to Animal.

The above is my introduction to the in-depth understanding of JavaScript prototype and prototype chain. I hope it will be helpful to everyone. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!