Simple explanation of Javascript prototype

Let's tell a story first, a big pond with many fish in it. This is a pond for all of us, so we can eat all the fish in it, but we will also buy some fish from the market and put them at home, so the fish in our home must belong to us privately, and outsiders will not own it. So in js, we call this pond prototype object, the fish we share in the pond are called attributes and methods in prototype, and our own fish are called attributes and methods in constructor. What are we? By the way, we are instances of objects.

The above is to let everyone have an interesting concept of prototype, and then summarize prototype ~ through code

1. Understand prototype

Every function we create has an prototype property, which is a pointer to an object.

There is a pattern in the building object called prototype pattern, which means that the properties and methods that cannot be shared by the object instance are defined in the constructor, while the properties and methods that can be shared are placed in the prototype object, that is, the object pointed by prototype. The following is an object created with prototype pattern:

 function person(name, age) {
 this.name = name;
 this.age = age;
}
person.prototype = {
 sayName: function() {
 console.log(this.name); 
 }
};
var p1 = new person("Wind", 20);
p1.sayName(); // "Wind"
var p2 = new person("Nic", 20);
p2.sayName(); // Nic

Here I define the name, age attributes in the constructor, and the sayName method in the prototype. So the p1 and p2 object instances each have one name and one age in their memory space, but they share one sayName method, meaning they call the same sayName method.

Imagine if we didn't use prototype, but wrote sayName directly into the constructor?

Then p1 and p2 will each have one copy of sayName, which wastes memory space. Therefore, one of the advantages of using prototype is to improve the reusability of code and reduce memory.

While understanding prototype objects, we also have a little knowledge to understand: Every time the code reads an object attribute, it will perform a search. The search target is the attribute with a given name, and the search path is:

The object instance itself-- > Prototype Object-- > Object inherits from the parent class object-- > Parent class object prototype...---- > End of prototype chain

2. Notices for prototype

1. Immutability: Although prototype is shared, the values in the prototype cannot be overridden by object instances, but can be modified by object system 1. Popular 1 point: Only the father can change it, not the son. (This is also related to types. Children can't change the values of basic types, but they can change objects, such as arrays.)

Basic type:

function person() {}
person.prototype = { 
 num: 0
}; 
var p1 = new person(); 
var p2 = new person();
p1.num++;
p2.num; // 0

Non-basic type:

function person() {}
person.prototype = {
 num: [1,2,3]
}; 
var p1 = new person(); 
var p2 = new person();
p1.num[2] = 8; 
p2.num; // [1, 2, 8]  Changed 

2. Coverage of the same name: If we add an attribute with the same name as the prototype attribute in the instance, the attribute will be created in the object instance and the corresponding attribute in the prototype will be overwritten.

function person(name) {
 this.name = name; 
}
person.prototype = {
 age: 18 9 };
var p1 = new person("Wind");
var p2 = new person("Nic");
p1.age = 20;
p1.age; // 20
p2.age; // 18

3. Using object literal to create prototype method will cut off the previous chain and rewrite the prototype chain

function person(name) {
 this.name = name; 
}
person.prototype = { 
 sayName: function() {
 console.log(this.name); 
 }
};
var p1 = new person("Wind");
person.prototype = {
 age = 20
}; 
p1.sayName(); // error

Because the prototype pointer points to a new object, cutting off the constructor from the previous prototype old object, p1 cannot call it. What about p1 calling the properties of the new object?

p1.age; // error

Therefore, I made a bold guess, that is, the old object containing sayName was "abandoned", that is, it was reclaimed by memory. However, the prototype pointer of p1 still points to the old object, so error will be generated.

3. Summary

Usage of prototype: Constructor models are used to define properties of instances, while prototype models are used to define methods and shared properties.