JavaScript 闭包丢失了这个引用？

Question

考虑以下代码:

<script>
    var i = 0;
    function test() {
        var _this = this;
        // foo and _this.foo are set to the same number
        var foo = _this.foo = i++;

        function wtf() {
            console.log(_this.foo, foo);
        }

        $("#thediv").click(wtf);
    };
    test();
    test();
    test();
</script>

似乎 console.log(_this.foo, foo) 应该总是输出相等的数字 (i)。

但是点击 div 输出 3 行(对于每个 console.log 调用):

2 0
2 1
2 2

似乎 _this.foo 总是引用最后一个 this.foo。为什么会这样？

Answer 1

在您的函数 wtf 中，变量 foo 中捕获的值是标量 - 实际数值。由于它在创建函数时捕获标量值，因此该函数正在关闭值 0、1、2 等。这就是它似乎递增的原因。

但是，当 _this 被捕获时，它被捕获为对具有名为 foo 的字段 的单个实例的引用。因此，对于 _this.foo，您指的是同一实例上的一个字段。

总而言之，像整数这样的值类型是由它们的值捕获的，而对象是由它的引用捕获的。