Introduction to using js to modify prototype attributes_javascript skills-JS Tutorial-php.cn

Introduction to using js to modify prototype attributes_javascript skills

WBOY

Release： 2016-05-16 17:02:14

Original

1250 people have browsed it

In JavaScript, the prototype defines the properties and methods that can be accessed by all instances of a specific type. In many cases, it is necessary to reassign the properties in the prototype. If the method is wrong, it will lead to some unexpected situations (only objects A novice like me struggles), let’s make a simple summary of this part of knowledge through testing.

The basic type is defined as follows:

Copy code The code is as follows:

 
function Person(){} 

Person.prototype={ 
constructor:Person, 
name:"person", 
age:100, 
friends:["a"," b"], 
getName:function(){ 
return this.name; 
} 
}; 

Define two Person instances and modify the name attribute (this attribute is defined in prototype), the test code is as follows:

Copy code The code is as follows:

 
var p1=new Person(); 
var p2=new Person(); 

document.write(p1.name "
"); //person 
document.write(p2.name "
"); //person 

p1.name="p1"; 
document.write(p1.name "
"); //p1 
document.write(p2.name "
"); //person 

document.write(p1.hasOwnProperty("name") "
"); //true belongs to the object
document.write(p2.hasOwnProperty("name") "
"); //false belongs to the prototype

document.write(Object.keys(p1) "
"); //name 
document.write(Object.keys(p2) "
"); // empty 
document.write(Object.getOwnPropertyNames(Person.prototype) "
"); //constructor,name,age,friends,getName 
document.write(Person.prototype.name "< ;br/>"); //person 

After testing, it can be found that p1.name="p1" does not modify the value of name but adds a new name attribute to instance p1 Covers the name attribute in prototype. From the subsequent judgment, it can be seen that the name attribute of p1 is already an instance attribute instead of a prototype attribute. The following Object.keys(p1) can also be seen that there are many instances of p1. There is a name attribute but p2 does not. All transfers in js are by value. This value can be a pointer to a reference type, so the equal sign does not mean modifying the reference object, but switching the original reference relationship. This issue will be explained below through code

Copy code The code is as follows:

 
var obj=new Object(); 
obj. name="obj"; 

function changeObj(o){ 
o.name="changed"; 
o=new Object(); 
o.name="newObj"; 
} 
changeObj(obj); 

document.write(obj.name); //changed 

In the changedObj method o=new Object() and The value of parameter o is not modified, but the original reference relationship is cut off, so the result is not newObj but changed

Next, test the modification of the friends attribute in the prototype in the first example. This attribute is a Reference type

Copy code The code is as follows:

 
p1.friends.push("c") ; 
document.write(p1.friends "
"); //a,b,c 
document.write(p2.friends "
"); // a,b,c 

p1.friends=["x","y","z"]; 
document.write(p1.friends "
"); / /x,y,z 
document.write(p2.friends "
"); //a,b,c 

document.write(p1.hasOwnProperty("friends" ) "
"); //true belongs to the object
document.write(p2.hasOwnProperty("friends") "
"); //false belongs to the prototype

document.write(Object.keys(p1) "
"); //name,friend 
document.write(Object.keys(p2) "
"); //Empty
document.write(Object.getOwnPropertyNames(Person.prototype) "
"); //constructor,name,age,friends,getName 
document.write(Person.prototype. friends "
"); //a,b,c 

The results of this test are basically the same as the first test. When modified by the equal sign, it will Cut off the original reference and create a new attribute for the instance and overwrite the attribute with the same name in the prototype

Based on these two test results, it was found that the value type attribute in the prototype cannot be directly modified in the instance (of course this value Types should not be defined in prototype. The code examples here only illustrate this knowledge point and have no practical significance)