This is a summary of pink’s lecture. If you want to learn more vividly, you can watch pink’s video

To enter the body

First of all, take this picture to heart

A prototype,

The background of the prototype

The main reason is the constructor method, which wastes memory:

function Star(uname,age){
  this.uname = uname;
  this.age = age;
  this.sing = function(){
    console.log("lalalalalal")
  }
}
var obj1 = new Star('xxx1',14);
var obj2 = new Star('xxx2',13);
Copy the code

With the constructor Star, two instance objects are created, as shown in the figure below

As shown in the figure, when using constructors to create instance objects, each instance object develops a block of memory to hold the object’s methods. This wastes a lot of space to hold the methods. In this case, we want all objects to use the same function to save memory;

Constructor prototype

JavaScript states that each constructor will have a Prototype property that points to another object, and that all properties and methods of that object will be owned by the constructor.

Constructors The functions assigned by the stereotype are shared by all objects.

We can define those immutable methods directly on a Prototype object so that all object instances can share them.

The above code can be written as:

 function Star(uname,age){
  this.uname = uname;
  this.age = age;
}
​
Star.prototype.sing = function(){
  console.log("lalalalalal");
}
Copy the code

conclusion

Prototype is an object. We also call prototype object. It is an attribute that every constructor has.

Note: This in the prototype object refers to the instance object calling it

So, in general, common attributes are defined in constructors, and common methods are placed on prototype objects

Second, object prototype

__proto__The object prototype

All objects have a __proto__ attribute that points to the prototype object constructor. We can use the constructor’s properties and methods because the object has a __proto__ attribute.

Note: the __proto__ object prototype is equivalent to the prototype object prototype, as shown below:

console.log(obj1.__proto__ === Star.prototype)   //true
Copy the code

Therefore, the rule for finding object methods is to see if the object itself has a method to call, such as sing(), and if so, execute the method on the object. If not, because __proto__ exists, look for sing() on the prototype constructor object.

Although the __proto__ object prototype provides a direction, or a route, for our object look-up mechanism, it is a nonstandard property and therefore should not be used during actual development.

conclusion

__proto__ object prototype is an attribute that every object has, it is equivalent to the prototype object, but one is an attribute on the object, one is a constructor attribute, it provides us with a direction of object method search, but is a non-standard attribute, in the actual development, we will not use.

B) the constructor function

constructor

The object prototype __proto__ and constructor prototype object prototype have a constructor property inside. Constructor is called a constructor because it refers back to the constructor itself.

Constructor mainly records which constructor the object refers to, and it can redirect the prototype object to the original constructor.

console.log(Star.prototype.constructor); console.log(obj1.__proto__.constructoe); // both return the Star constructorCopy the code

In many cases, we need to manually refer back to the original constructor using the constructor attribute;

Star.prototype = {sing: function(){console.log(' lalalallalaa '); }, movie: function(){ console.log('dongcidaci'); } } console.log(Star.prototype.constructor); console.log(obj1.__proto__.constructoe); // Instead of returning the Star constructorCopy the code

Therefore, you need to change the above code to:

Sing: function(){console.log('lalalallalalaa'); }, movie: function(){ console.log('dongcidaci'); } } console.log(Star.prototype.constructor); console.log(obj1.__proto__.constructoe); // Return the Star constructorCopy the code

conclusion

Constructor is a property of both the prototype object and the object prototype. It is used to point to the referenced constructor, but in general its main use is that we need to manually refer back to the original constructor in case we have assigned an object to the prototype object.

Prototype chain

With these three concepts in mind, now look at this diagram:

Prototype chain

Any Object has a __proto__ attribute that points to the prototype Object prototype. Prototype is also an Object, so its __proto__ prototype points to Object.prototype

In the same way, Object.prototype is an Object with its __proto__ prototype pointing to NULL

Thus, the prototype chain is formed.

Js member lookup mechanism

  1. When accessing an object’s properties or methods, we first look at whether the object itself has the properties or methods
  2. If not, look up its prototype (i.e__proto__Prototype object)
  3. If not, find the prototype of the prototype Object.
  4. And so on until you find Object

So, so that’s why our new object can use methods like toString(), right

conclusion

Because both objects and prototype objects belong to objects, both can point to their prototype objects. When we access a property of an object, if that property doesn’t exist inside the object, then it will look for that property in its prototype object, and that prototype object will have its own prototype, and so on and so forth, the concept of prototype chain. The end of the prototype chain is usually Object.prototype.

Fifth, the application of prototype object

  1. You can use prototype objects to extend custom methods on the original built-in objects. For example, adding a custom sum to an array

But we also need to note that in the basic specification of Js, it is mentioned that we should not randomly add methods on the prototype of the built-in object, such as Array, Date.

  1. Prior to ES6, we were not provided with extends inheritance, and we could emulate the method of inheriting a parent class by using a constructor + prototype object
Son.prototype = new Father(); Son.prototype.constructor = Son; If you modify a prototype object in the form of an object, don't forget to use constructor referenceCopy the code

\