Javascript原型易錯點記錄

在以下代碼中，爲F的原型中添加一個原型屬性count，和一個原型方法add。

隨後new兩個F的實例f1和f2，對f1調用原型方法add，隨後檢查f1和f2的count值。

function F(){}
F.prototype.count = 1;
F.prototype.add = function(){
    this.count++;
};
var f1 = new F();
var f2 = new F();
//assert( !f1.hasOwnProperty('count') && ('count' in f1) );
f1.add();
//assert( f1.hasOwnProperty('count') );
console.log(f1.count); // 2
cousole.log(f2.count); // 1

我最初覺得的答案是2和2，由於count是原型屬性，是F的全部實例共通的，但實際上我小瞧了add方法中【this】的做用。

在調用【this.count++】以後，count成了f1新增的自有屬性，所以原型屬性count被隱藏。而對於f2而言，f2.count依然返回的是原型屬性count的值。

若將count改爲一個字符串str='hello'，在add中執行字符串鏈接操做【this.str += ' world';】，其結果同上。該表達式計算前經過【this.str】獲取到的是原型屬性str，但以後的【賦值操做】則爲實例添加了新的自有屬性。

若將count改爲一個數組arr，add改爲對數組執行push操做，則不管調用f1仍是f2的add方法，其結果都是同樣的。由於this.arr.push('')並不會改變this.arr的引用，也不是給this.arr的賦值操做，不會使得this.arr成爲實例的自有屬性。