Js modified prototype properties using the introduction

  • 2020-03-30 01:27:27
  • OfStack

In javascript prototype (prototype) defines a specific type of all instances can access properties and methods, many some cases need to be to attribute assignment in the prototype, if the method error can lead to some unexpected situation (just) of a novice like me struggle, through test on the below part of the knowledge to do a simple summary.

The basic type is defined as follows:
 
function Person(){} 

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

Define two instances of Person, modify the name property in the instance (which was defined in prototype), and test the code as follows
 
var p1=new Person(); 
var p2=new Person(); 

document.write(p1.name+"<br/>"); //person 
document.write(p2.name+"<br/>"); //person 

p1.name="p1"; 
document.write(p1.name+"<br/>"); //p1 
document.write(p2.name+"<br/>"); //person 

document.write(p1.hasOwnProperty("name")+"<br/>"); //True belongs to the object
document.write(p2.hasOwnProperty("name")+"<br/>"); //False belongs to the prototype

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

After tests can be found p1. Name = "p1" and not modify the value of the name but in the instance p1 new added a name attribute cover name attribute of the prototype, can be seen from the subsequent judgment in p1 at this time of the name attribute is an instance not prototype attribute, the back of the Object. The keys (p1) also can see p1 this case more than a name attribute and no in p2. All the passing in js is the value passing, the value can be a pointer to the reference type, so the equal sign does not mean to modify the reference object, but to switch the original reference relationship, the following through the code to explain this problem
 
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() does not change the value of the parameter o, but cuts off the original reference, so the result is not newObj but changed

Next, test modifying the prototype friends property in the first example, which is a reference type
 
p1.friends.push("c"); 
document.write(p1.friends+"<br/>"); //a,b,c 
document.write(p2.friends+"<br/>"); //a,b,c 

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

document.write(p1.hasOwnProperty("friends")+"<br/>"); //True belongs to the object
document.write(p2.hasOwnProperty("friends")+"<br/>"); //False belongs to the prototype

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

The results of this test are basically the same as the first test, and when the equal sign is changed, the original reference is cut off and a new property is created for the instance and overrides the property of the same name in prototype

Based on the results of these two tests, it is found that you cannot directly modify the property of value type in prototype in the instance (of course, this type of value type should not be defined in prototype, the code example here only illustrates this point, but has no practical significance).

Related articles: