绑定范围 javascript

Question

我试图弄清楚使用绑定的范围。我对boundF1. 这里发生了什么？// console.log(x) ReferenceError: x is not defined// setting this.x - this here is global or windowthis.x = 5;console.log(x) // 5function f1() {  console.log(x); // 5  console.log(this.x); // 5}// Lexically bound this to window f2 = () => {  console.log(x); // 5  console.log(this.x); // 5}f1()f2()boundF1 = f1.bind({x:1});boundF2 = f2.bind({x:1});boundF1() // 5 1 Why is this not 1, 1. How is x resolved here? Does it check local vars, then global vars. Would it ever use this? What is the scoping rule?boundF2() // 5 5

Answer 1

Causex将始终在 scope 中查找变量。它与this（上下文）无关。当您调用 时.bind，您只设置this函数内部的值。

Answer 2

当您引用一个独立变量时，例如console.log(x)，解释器将尝试在外部作用域的某处找到具有相同名称的独立变量。在这里，外部作用域最终到达全局作用域，因此console.log(x)解析为console.log(window.x)。

性能this也不会被添加到一个函数的变量环境; 要引用 的属性this，您必须明确地这样做，例如：

console.log(this.x);

并不是说您应该永远使用它，而是有with, 它可以让您像引用独立变量一样引用对象的属性（这听起来像是您认为会自动发生的事情），但强烈不建议这样做（并且在严格模式下是禁止的） ）。

this.x = 5;

function f1() {

  with (this) {

    console.log(x); // 5

    console.log(this.x); // 5

  }

}

boundF1 = f1.bind({x:1});

boundF1()

Answer 3

在 f2 中，因为它是一个不可绑定的箭头函数，x并且this.x都指向window.x.

在 f1 中，x将首先尝试查找任何局部作用域变量 x，如果不能，将x在全局作用域中搜索 an 。但是因为它是绑定的，this不再指代window你绑定它的对象，所以你绑定它的对象this.x的 x 值也是如此。