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