JavaScript in layman's prototype

Let's start with a story, a big pond with lots of fish in it. This is the pond that belongs to all of us. So we can eat the fish inside, but we will also buy some fish from the market at home, then the fish in the home must belong to our private, outsiders will not have. So in JS we call this pond a prototype object , the fish we share in the pond is called the properties and methods in the prototype , and our own fish is called the properties and methods in the constructor , what are we? Yes, we are an example of an object .

The above is to let everyone can be interesting to prototype have a concept, then the code to summarize the specific prototype~

First, understand prototype

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

There is a pattern in the build object called the prototype pattern, which means that properties and methods that are not shared by the object instance are defined in the constructor, and the shareable properties and methods are placed in the prototype object, which is the object that prototype points to. The following is an object created in prototype mode:

1 function person (name, age) {2   this.name = name; 3   this.age = age; 4} 5 Person.prototype = {6   sayname:fun Ction () {7     console.log (this.name);       8   } 9};10 var p1 = new Person ("Wind"); P1.sayname (); Wind: var p2 = new Person ("Nic"); P2.sayname (); Nic

Here I define the name, age property in the constructor, and define the Sayname method in the prototype. So the memory space for the P1 and P2 object instances has a name and age, but they share a sayname method, meaning that the Sayname method they call is the same.

Imagine if we didn't have to prototype, but write Sayname directly into the constructor?

Then P1 and P2 will each have a copy of sayname, so waste memory space, so one of the benefits of prototype: Improve the reusability of code, reduce memory.

We have a little knowledge of the prototype object as well: every time the code reads an object property, it performs a search, the search target is a property of the given name, and the search path is:

object instance itself----> Prototype Object----> object inherits Parent Object----> Parent class object prototype ...----> end of prototype chain

Second, the prototype point of attention

1. Immutability: Although prototype is shared, the values in the prototype cannot be overridden by object instances, but can be changed uniformly by the object. Popular point: Only father unified change, not son change. (This is also related to the type, the child cannot change the value of the base type, but can change the object, such as an array)

Basic type:

1 function person () {} 5 Person.prototype = {  6    num:0 7};   8 var p1 = new Person ();  9 var p2 = new Person (); p1.num++;11 p2.num; 0

Non-basic type:

1 function person () {} 5 Person.prototype = {6    num: [] 7};   8 var p1 = new Person ();  9 var p2 = new Person (); p1.num[2] = 8; One by one p2.num;  [1, 2, 8]  changed

2. Overlay with the same name: if we add a property with the same name as the prototype property in the instance, the property is created into the object instance and overwrites the corresponding property in the prototype.

1 function person (name) {2   this.name = name;  3} 4 Person.prototype = {5    age:18  

3, using the object literal to create a prototype method, will cut off the previous chain and rewrite the prototype chain

1 function person (name) {2   this.name = name;  3} 4 Person.prototype = {  5   sayname:function () {6     console.log (this.name);       7   } 8}; 9 var p1 = new Person ("Wind"), Person.prototype = {   age:2013}; p1.sayname ();  Wind15 P1.age; undefined16 var p2 = new Person ("Nic"); P2.sayname ();  Error19 P2.age;  20

Because the prototype pointer points to a new object, it disconnects the constructor from the previous prototype old object, but P1 's prototype pointer is still the old object. The newly created instance P2 points to the prototype new object.

Iii. Summary

Prototype usage: The constructor model is used to define the properties of the instance, whereas the prototype model is used to define methods and shared properties.

JavaScript in layman's prototype