js修改原型的屬性使用介紹_javascript技巧

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


定義兩個Person的實例，修改實例中的name屬性（該屬性是在prototype中定義的），測試代碼如下

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 屬於物件
document.write(p2.hasOwnProperty("name") "
"); //false 屬於原型

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


經過測試可以發現p1.name="p1"並不是修改了name的值而是在實例p1中新增加了一個name屬性覆蓋了prototype中的name屬性，從後續的判斷中就可以看出這時候p1的name屬性已經是一個實例屬性而不是原型屬性，後面的Object.keys(p1)也可以看出p1這個實例中多了一個name屬性而p2中沒有。在js中所有的傳遞都是值傳遞，這個值可以是個指向引用類型的指針，所以等號並不意味著修改這個引用對象，而是切換了原來的引用關係，下面再透過程式碼說明這個問題

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

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


在ochangedObj方法中o=new Object()並沒有修改參數o的值,而是切斷了原來的引用關係,所以結果並不是newObj而是changed

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 屬於物件
document.write(p2.hasOwnProperty("friends") "
"); //false 屬於原型

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