javascript - 在这段代码中，为什么 foo 和 this.foo 指的是不同的东西？

Question

代码如下:

for (var i = 0; i < 10; i++) {
    setTimeout(function() {
        console.log(i); //prints 9 10 times
        console.log(this.i); //prints 0, 1, 2...9
    }.bind({i:i}), i * 1000);
}

为什么 i 和 this.i 指的是不同的东西？

将此与在全局范围内执行的一些代码进行对比:

var x = 5;
console.log(x);
console.log(this.x);//both will print 5

这里的范围是全局的，上下文也是。变量声明在全局上下文中设置同名属性。另一方面，在函数范围内，这不会发生。

var a = function() {
    var x = 5;
    console.log(x); //5
    console.log(this.x); //undefined
    console.log(i);  //undefined
    console.log(this.i);  //10

}.bind({i: 10});
a();

即使我们将全局上下文传递到局部范围，在函数内声明变量也不会将其设置为全局上下文的属性。

var a = function() {
    var x = 5;
    console.log(x); //5
    console.log(this.x); //undefined
}.bind(window);
a();
console.log(x); //undefined
console.log(this.x); //undefined

我想说的是:在全局范围中，变量声明修改了全局上下文。但是在函数作用域中，变量声明不会修改函数的上下文，无论上下文是什么。为什么？

Answer 1

当你想到全局作用域在 window 上时，它会有很大帮助。所以你可以说 global 在窗口的上下文中运行。所以真的:

var x = 5;
console.log(x);
console.log(this.x);//both will print 5

在最后一行中，this 是 window，因此您正在运行 console.log(window.x)。

当您使用bind 时，您更改了“绑定(bind)”函数内的this 的引用。例如:

var x = 10;
function log() {
  console.log(this.x);
}

log(); // logs 10

log.bind({x: 20})()  // logs 20

bind 调用使 log 中的 this 成为我们使用 {x: 20} 创建的匿名对象的引用。你也可以这样做:

var myObject = {x: 50};
log.bind(myObject)(); // logs 50