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

在javascript中原型(prototype)定義了特定類型的所有實例都可以存取的屬性和方法，很多些情況下需要重新對原型中的屬性賦值，如果方法錯誤會導致一些意想不到的情況（僅僅是對象我這樣的新手奮鬥），以下透過測試對這部分知識做一個簡單的總結。

基本型別定義如下：

複製程式碼 程式碼如下:

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


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

複製代碼 代碼如下: 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 屬於物件
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中所有的傳遞都是值傳遞，這個值可以是個指向引用類型的指針，所以等號並不意味著修改這個引用對象，而是切換了原來的引用關係，下面再透過程式碼說明這個問題

複製程式碼 程式碼如下: 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


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

接下來測試一下修改第一個例子中prototype中的friends屬性,這個屬性是一個引用型別

複製程式碼 程式碼如下: p1.friends.push("c")

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

這次測試結果與第一次的測試基本相同，當通過等號修改時，這時候會切斷原來的引用並為實例創建一個新的屬性且覆蓋了prototype中的同名屬性

基於這兩個測試結果發現在實例中不能直接修改prototype中的值類型屬性（當然這種值類型不應該定義在prototype，這裡的程式碼實例僅僅說明這個知識點，並無實際意義）