JS prototype understanding (Prototype object)

Before the online search for some information on the JS prototype, after watching, there is a part of understanding, but not comprehensive enough, in this I write down the prototype of JS.

Read the next JS high-level programming, I have a certain understanding of JS prototype. It's a bit of a problem when we're creating objects, it can be cumbersome to write some similar objects or have duplicate attributes in them. Gca

　　

Let A = {      ' a ',      1    = {      ' B ',      2    }

In order to solve this problem, there are some patterns that can create objects.

// Factory mode function createobj (name, index) {      = {}      = name      = Index
O.sayname = function () {
Alert (this.name)
}      return= Createobj (' A ', 1= createobj (' B ', 2)

This pattern, while solving the problem of creating multiple similar objects, does not solve the problem of object recognition (that is, how to know the type of an object). My understanding of this sentence is that the object created in this way cannot be distinguished from the type, the object that this pattern produces, the feeling is all on the same level, all comes out through the new object (and the prototype can be created by a construct name such as new Createobj)

With the development of JS, the pattern of the constructor is out.

Constructor mode

function createobj (name, index) {      this. Name = name      this. Index = Index       Thisfunction  () {        alert (this. Name)      }    }     New createobj (' A ', 1)    new createobj (' B ', 2)

The problem with this pattern is that each method is created on the instance, such as the sayname above.

We can extract the method:

　　

　　function createobj (name, index) {      this. Name = name      this. Index = Index       this. sayname = sayname    }     function  sayname () {        alert (  This . Name)      }     New Createobj (' A ', 1)    new createobj (' B ', 2)

In this case, all instances will share this sayname method. But there are new problems, so the definition of the method is global, if you define more than one method, the name will be broken, it will also cause the risk of coverage.

The above problems can be solved with prototypes.

//Prototype mode 
 
 function   A () {  a.prototype.name  = ' A '  A.prototype.index  = 1   a.prototype.syaname  = function   () {Console.log ( this
     .name)}//Prototype object: {name:a, index:1, Syaname:function ()　　 {Console.log (this.name)}} Let A1 = new A ()   let a2  = new  A () 

Here is used Prototyope (the prototype, JS will only be in the function to give it this property), here A.prototype is pointing to an object, you just when it is a prototype object. The above created a prototype object and contains the property name, index, Sayname, and then through its new instance, it will have a [[prototype]] property, in JS This is an internal property, generally not directly accessible, but in Firefox, Safari, Chrome supports an attribute _proto_ on each object, which can be understood as this intrinsic property. [[prototype]] This property points to its prototype object, but it is important to note that in the prototype mechanism, only access to the instance itself does not have a property, it will be found in the prototype object has this property, such as:

　　

  function A () {  }  a.prototype.name = ' A '  1  a.prototype.syaname = function () { Console.log (this. Name)}      

A.PROTOTYPE.C = [1, 34]
Let A1 = new A ()
Let A2 = new A ()
Console.log (a1.a)//1
Console.log (a2.a)//1
Console.log (A2.C)//[1, 34]
Console.log (A2.C)//[1, 34]
a2.a = 2
A2.c.push (' 3 ')
Console.log (a1.a)//1
Console.log (a2.a)//2
Console.log (A2.C)//[1, 34, 3]
Console.log (A2.C)//[1, 34, 3]

There may be people wondering why a in A1 doesn't change and C changes. First, the whole process:

A1, a2 have no attribute a,c, so it accesses its prototype object, if it is only access, because access is the same object, so you get the same value.

Then, a2.a = 2, this assignment will take precedence over the A2 object (then the A2 will have its own property A and the value is 2), instead of being re-assigned to the prototype object's property A. And a2.c is not an assignment operation, just to modify the metadata, because there is no C attribute in A2, also can not modify their own property C, then the prototype object inside the data will be modified. We can verify that:

a2.a = 2= [1, 2//  1//  2//  [1, +]// [1, 2]

All of these have added their own properties to their instance objects, and the prototype objects have not changed, so their own properties have access to their own, without the access to the unchanged prototype object.

In short, each object in JS has an internal property [[prototype]], which points to its prototype object.

The prototype object, which can be created by the prototype of the function and assigns properties to it.

Each instance object produced by the prototype constructor is shared with the same prototype object, and the property value of the object cannot be modified by an instance assignment.

　

JS prototype understanding (Prototype object)