ES6箭头函数和函数内的词法范围[重复]

Question

let a = () => (
  {
    name:"Anna",
    func: () => console.log(this.name)
  }
)

let b = () => (
  {
    name:"Brian",
    func: function(){ console.log(this.name) }
  }
)

let c = function(){
  return(
    {
      name:"Charlie",
      func: function(){ console.log(this.name) }
    }
  )
}

let d = function(){
  return(
    {
      name:"Denny",
      func: () => console.log(this.name)
    }
  )
}

这 4 个函数具有混合和匹配的函数语法。调用嵌套函数时，func:with箭头函数返回空白。

a().func() // returns blank
b().func() // returns "Brian"
c().func() // returns "Charlie"
d().func() // returns blank

我以为箭头函数保留了“this”的范围？这种行为似乎与我的想法相反。箭头函数何时超出范围？

Answer 1

对于 A 案例，您实际上是在将其一直保留到 window（如果在浏览器中运行），因此您要返回的是 window.name。

然而，至于 D，它仍然返回空白，因为它在返回的“this”的函数级别上。在您的情况下，由于您没有创建 D 的新实例，而是将 d 用作功能对象本身，因此 this 也指向 window.d 。 （稍后我会发布更多关于后者的信息，但现在，这里是一个示例）。

let e = function(){
  this.name = "Elizabeth2"  //this is on the functional level
  return(
    {
      name:"Elizabeth1",
      func: () => console.log(this.name)
    }
  )
}
e().func();       // Elizabeth2 
                  // even though it is on the functional level, the way you're calling it here makes this.name == window.name;
let ee = new e(); // however, imagine if you did this kind of a call instead
ee.func();        // Elizabeth2
                  // this is also on the functional level, HOWEVER, it is not binding this.name to window.name
ee.name;          // Elizabeth1
e().name;         // Elizabeth1
e()['name'];      // Elizabeth1
e();              // {name: "Elizabeth1", func: ƒ}

如果 func 绑定到匿名函数而不是匿名箭头函数，现在显示差异。

e = function(){
  this.name = "Elizabeth2"
  return(
    {
      name:"Elizabeth1",
      func: function(){console.log(this.name)}
    }
  )
}
e().func();  // Elizabeth1
e().name;    // Elizabeth1
e()['name']; // Elizabeth1
e();         // {name: "Elizabeth1", func: ƒ}

Answer 2

当您定义a 和d 时，this 的值是顶级window 对象，因为您不在某个其他对象的上下文中，这将保存在箭头中职能。 window.name 是一个空字符串，所以当您调用 a.func() 和 d.func() 时会看到它。

箭头函数通常不应该用作方法函数，因为它们无法访问被调用的对象。当您想从创建它们的位置保留 this 的绑定时使用它们（就像其他闭包变量一样）。