JavaScript object-oriented-prototype Rewriting

In the previous article, we introduced the prototype Memory Model and analyzed the status of the prototype in various stages through four graphs. Next we will first introduce some common prototype and object attribute detection methods. Taking the Person class in the previous article as an example, the code for creating the Person class is as follows: in the previous article, we introduced the prototype memory model, the status of the prototype in each phase is analyzed through four graphs. Next we will first introduce some common prototype and object attribute detection methods. Take the Person class in the previous article as an example. The code for creating the Person class is as follows:

function Person(){}; Person.prototype.name = "Leon";Person.prototype.age = 22;Person.prototype.say = fucntion(){  alert(this.name + "," + this.age);} var p1 = new Person();var p2 = new Person();p2.name = "Ada"; p1.say();p2.say();

1. Check whether an object is a prototype of a function.

alert(Person.prototype.isPrototypeOf(p1));    //true

This method can detect whether the prototype of p1 is Person.

2. Check the constructor of an object.

alert(p1.constructor == Person);    //true

3. check whether a property is its own property.

alert(p1.hasOwnProperty("name"));   //falsealert(p2.hasOwnProperty("name"));   //true

Object p1 does not have the name attribute in its own space, so false is returned. The object p2 is assigned a value for the name attribute again, and the name attribute exists in its space, so true is returned.

4. delete attributes in your own space using delete

delete p2.name;p2.say();alert(p2.hasOwnProperty("name")); //false

You can use delete to delete an attribute in the object's own space, as shown in the code above.

5. Check whether an object contains an attribute in the prototype or itself through the in attribute.

Alert ("name" in p1); // in the prototype, so it is truealert ("name" in p2); // in your own space, so it is true

If an attribute does not exist in both the prototype and its own space, the result is false.

6. Use a custom method to check whether a property exists in the prototype.

function hasPrototypeProperty(obj,prop){  return(!obj.hasOwnProperty(prop) && (prop in obj));}

The code above defines a method to check whether a property exists in the prototype. You can use this method as follows:

alert(hasPrototypeProperty(p1,"name")); //truealert(hasPrototypeProperty(p2,"name")); //false

Because the name attribute of the p1 object exists in the prototype, true is returned, and false is returned because the name attribute of the p2 object is in its own space.

Rewrite prototype

If we write code as before, there will be a lot of Person. prototype. xxx statements, which is not easy for us to read and understand. We can rewrite the prototype in Json format. The Code is as follows:

// Rewrite the prototype Person. prototype = {name: "Leon", age: 22, say: function () {alert (this. name + "," + this. age) ;}} var p1 = new Person (); p1.say ();

After the preceding method is used to rewrite the prototype, the constructor will not point to Person, but to Object because the prototype is not specified by Person. prototype.

alert(p1.constructor == Person); //false

If constructor is really important to your program, you can declare the prototype in json.

Person. prototype = {constructor: Person, // manually specify constructor name: "Leon", age: 22, say: function () {alert (this. name + "," + this. age );}}

Prototype Rewriting

When rewriting the prototype, we may encounter the following problems. Next, let's take a look at a piece of prototype rewriting code that will cause problems, and then analyze the memory model for each stage of the Code. The Code is as follows:

// Create the Person class function Person () {} var p1 = new Person (); // Add the sayHi () method Person on the Person prototype. prototype. sayHi = function () {alert (this. name + "Hi! ");} P1.sayHi (); // output: undefined: hi! // Rewrite the Person prototype. prototype = {constructor: Person, // manually specify constructor name: "Leon", age: 22, say: function () {alert (this. name + "," + this. age) ;}} var p2 = new Person (); p2.sayHi (); p2.say (); // correct p1.say (); // Error

In the code above, we first created a Person class. The memory model of the Person prototype is shown in:

Then we created the p1 object and added a sayHi () method to the Person prototype. The memory model of the Person prototype is as follows:

Var p1 = new Person (); // added the sayHi () method Person. prototype. sayHi = function () {alert (this. name + "Hi! ");} P1.sayHi (); // output: undefined: hi!

Note that the current memory model does not have the name attribute in the space and the Person prototype of the p1 object in this State. Therefore, when executing the p1.sayHi () method, this. the name attribute is undefined, and the final output result is undefined: hi !.

Next we will rewrite the Person prototype and add some attributes and methods to the prototype.

// Rewrite the Person prototype. prototype = {constructor: Person // manually specify the constructor name: "Leon", age: 22, say: function () {alert (this. name + "," + this. age) ;}} p1.sayHi (); // output: undefined: hi!

The prototype memory model is as follows:

After the prototype is rewritten, JavaScript will allocate a new memory for the prototype. The Person class points to the new prototype object, while the _ proto _ attribute of the originally created p1 object still points to the previous prototype object.

At this time, if we are executing p1.sayHi (), the program will not report an error, but the execution result will still be undefined: hi !, Because neither the p1 object nor the prototype it points to has the name attribute.

Finally, after the prototype is rewritten, we create object p2.

var p2 = new Person();p2.sayHi();

The prototype memory model is as follows:

The _ proto _ attribute of the newly created p2 object points to the rewritten prototype object. If you execute the p2.sayHi () method, so there is no sayHi () method on the p2 object and its prototype, so the program reports an error.

If you execute the p1.say () method at this time, the program reports an error because neither p1 nor the prototype to which it points has the say () method.

Through the analysis of the prototype memory model above, we can know that the position of the prototype rewriting will directly affect the attributes and methods of the object, the attributes and methods of the objects created before rewriting are different from those created after rewriting. The above memory models must always be kept in mind.

The above is the JavaScript object-oriented-prototype rewriting content. For more information, see PHP Chinese website (www.php1.cn )!