Learning the front end (38) ~ js learning (xv): prototype object

Prototype object

The introduction of the prototype

        the Person function (name, Age, Gender) { 
            this.name = name; 
            this.age = Age; 
            this.gender = Gender; 
            // add to the object a method 
            this.sayName = function () { 
                the console.log ( "I is "+ this.name); 
            } 
        } 

        // create an instance of the Person 
        var per = new Person (" Monkey ", 18," M "); 
        var = Per2 new new Person (" pig "28," M ") ; 
        per.sayName (); 
        per2.sayName (); 

        console.log (per.sayName == per2.sayName); // print result is false

analyse as below:

The code above, we sayName is to write within the constructor of Person, then were called in both instances. The result is that the constructor Each time, it will create a new sayName method for each instance. In other words, sayName each instance is unique. Therefore, the results of the final print line of code is false.

According to the above such an approach, it is assumed object instance creating 10000, 10000 creates sayName method. The wording is certainly not appropriate. Why do we keep all objects share the same approach?

Another way is to sayName method defined in global scope :( not recommended. The reason to see comments)

        the Person function (name, Age, Gender) { 
            this.name = name; 
            this.age = Age; 
            this.gender = Gender; 
            // add a method to the object 
            this.sayName = Fun; 
        } 

        // Method to global sayName definition of scope 
        / * 
         * the function is defined in the global scope, they pollute the namespace global scope 
         * and is defined in the global scope is also very safe 
         * / 
        function Fun () { 
            Alert ( "the Hello Hello everyone, I They are: "+ this.name); 
        };

A better way is to add sayName method in the prototype:

    = Function Person.prototype.sayName () { 
        Alert ( "the Hello Hello everyone, I am:" + this.name); 
    };

This article also introduces us to talk about the "prototype."

The concept of prototype prototype

Understanding 1:

Every function we created, the parser will add a property to the prototype function. This attribute corresponds to an object that is what we call prototype object.

If the function is called as an ordinary function prototype does not have any effect when the function is called as a constructor, it creates the instance of the object will have a hidden attribute, point to the prototype of the constructor, we can be __proto__ access to the property.

Code Example:

    // define a constructor 
    function the Person () {} 

    var new new PER1 = the Person (); 
    var = new new Per2 the Person (); 

    the console.log (Person.prototype); // print the results: [Object Object] 

    the console.log (PER1 .__ proto__ == Person.prototype); // print the results: true

The last line of code above: print results show that 实例.__proto__ , and  构造函数.prototypeall refer to the prototype object.

2 understanding:

Prototype object is equivalent to a public area, all instances of the same class can access to the prototype object, we can target content are common, unified set to the prototype object.

Later when we create a constructor, these objects can be shared properties and methods, unity added to the prototype object constructor, so do not separately for each object is added, it will not affect the global scope, you can make every these objects have the properties and methods.

3 understanding:

Use  in the time to check whether an object contains a property, but if not there are objects in the prototype, will return true.

The object may be used hasOwnProperty()whether or not to check the object containing the property itself .

Prototype chain

Prototype object is an object, so it also has a prototype, when a property or method we use or access an object:

  • It will first look in the object itself, if it is used directly;

  • If the prototype object will not have to look for, if found directly use;

  • If not then go to the prototype of the prototype looking until you find Object prototype object.

  • Object prototype object is not a prototype, if still not found in the Object prototype, or null

toString () method of the object

Let's look at the following code:

    function Person(name, age, gender) {
    this.name = name;
    this.age = age;
    this.gender = gender;
    }

    var per1 = new Person("vae", 26, "男");

    console.log("per1 = " + per1);
    console.log("per1 = " + per1.toString());

Print Results:

per1 = [object Object]
per1 = [object Object]

The above code, we try to print instance per1 of inside information, but found that both the print  per1 or print  per1.toString(), the result is object, which is why it? analyse as below:

  • When we print an object directly on the page, in fact, it is the output of the object's toString return value () method.

  • If we want to print the object, not the output [object Object], you can manually add a toString () method for the object. Means that the override toString () method.

Override toString () method, Specifically, the following:

    Person function (name, Age, Gender) { 
    this.name = name; 
    this.age = Age; 
    this.gender = Gender; 
    } // a manner: toString method of rewriting Person prototype. Apply across all instances of Person 
    Person.prototype.toString = function () { 
        return ( 
          "Person [name =" + 
          this.name + 
          ", Age =" + 
          this.age + 
          ", Gender =" + 
          this.gender + 
          " ] " 
        ); 
    }; 
    // Second way: toString method of example per1 rewriting only. But such an approach, only per1 commencement of per2 invalid 
    / * 
    per1.toString = function () { 
        return ( 
          this.name +

    
 
          "the Person [name =" +
          ",age=" +
          this.age +
          ",gender=" +
          this.gender +
          "]"
        );
    };
    */

    var per1 = new Person("smyh", 26, "男");

    var per2 = new Person("vae", 30, "男");

    console.log("per1 = " + per1);
    console.log("per2 = " + per2.toString());

Print Results:

per1 = Person[name=smyh,age=26,gender=男]
per2 = Person[name=vae,age=30,gender=男]

The above code, a close look at the comment. We rewrite the toString Person prototype (), so you can ensure that all instances of Person to take effect.

From this example, we can see that  prototype role.

JS garbage collection (GC) mechanism

The program is running will produce garbage after garbage accumulated too much will cause the program to run too slowly. So we need a mechanism for garbage collection, to handle the program is running in waste generation.

When an object does not have any variable or attribute it referenced, then we will never be able to manipulate the object, then this object is a waste, such objects too will take up a lot of memory space, causing the program to run change slow, so this garbage must be cleaned.

Above this sentence, also can be understood: If the object in memory heap, no variable points to it when the heap memory object becomes garbage.

JS has automatic garbage collection, the garbage will automatically destroy objects from memory. We do not need nor garbage collection operation. We just need to do is: If you do not use the object, then, will change the object reference to null to.

 

Guess you like

Origin www.cnblogs.com/Vincent-yuan/p/12423938.html