意外设置 Javascript 对象实例属性

Question

我有以下代码:

function Foo() {
    Foo.prototype.test = 0;
}

Foo.prototype.incTest = function() {
    Foo.prototype.test++;
};

Foo.prototype.getTest = function(name) {
    console.log(name +" this: " + this.test + " proto: " + Foo.prototype.test);
};

var bar = new Foo();
var baz = new Foo();

bar.getTest('bar');
bar.incTest();
bar.getTest('bar');

baz.incTest();
bar.getTest('bar');
baz.getTest('baz');

可预测的输出是:

bar this: 0 proto: 0
bar this: 1 proto: 1 
bar this: 2 proto: 2 
baz this: 2 proto: 2 

现在我尝试利用 this 查找原型(prototype)链，并将 incTest 更改为:

Foo.prototype.incTest = function() {
    this.test++;
};

这给了我完全不同的输出!

bar this: 0 proto: 0 
bar this: 1 proto: 0 
bar this: 1 proto: 0 
baz this: 1 proto: 0

this.test 不应该引用 Foo 原型(prototype)属性吗？这到底是怎么回事？

编辑:

此外，将行更改为 Foo.prototype.test = this.test++; 也会产生第二个输出，我不确定为什么。

编辑 2:

第一次编辑的解决方案是后缀与前缀。前缀增量产生第一个输出。

Answer 1

第一种情况:

您只递增了原型(prototype)变量，它将由原型(prototype)对象的所有实例共享。

这里要注意的重要一点是，当您在第一种情况下使用this.test 访问test 时，JavaScript 会尝试在 this(当前对象)中找到 test。它没有找到它，而是在原型(prototype)链中向上攀登。它在 Foo.prototype 中找到 test 并返回该值。这就是为什么您为 this.test 和 Foo.prototype.test 获得相同值的原因。

第二种情况:

您正在递增 this.test。 this.test++可以这样理解

this.test = this.test + 1

现在，它从 pototype 链中获取 test 的值(将使用 Foo.prototype.test，即 0)，将其加 1 并存储导致当前对象的 test 成员。因此，您正在 this 中创建一个名为 test 的新成员。这就是它的值不同于 Foo.prototype.test 的原因。

您可以通过添加一种方法来确认这一点，就像这样

Foo.prototype.deleteTest = function () {
    delete this.test;
}

...
...
bar.deleteTest();
bar.getTest('bar');

现在 bar.getTest 将打印 0，因为我们从 this 中删除了 test，删除测试()。所以，它会往上爬，找到 Foo.prototype 中的 test，也就是 0。