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成为实例的自有属性。