ES6箭头函数和函数内的词法作用域

IT技术 javascript ecmascript-6
2021-02-22 07:29:03 
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 arrow 函数返回空白。

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

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

2个回答

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

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

我不认为你可以。如果需要，请不要使用箭头函数。
2021-04-22 07:29:03
@GundamMeister - 换句话说，使用正确的工具来完成工作 - 在 MDN 文档中，它指出这些函数表达式最适合非方法函数- 您的代码正试图将它们用作方法函数
2021-04-28 07:29:03
您将如何更改 a 和 d 以使它们返回“Anna”和“Denny”？
2021-05-17 07:29:03

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

然而，对于 D，它仍然返回空白，因为它在返回的“this”的函数级别上。在您的情况下，由于您不是创建 D 的新实例，而是将 d 用作功能对象本身，因此这也指向 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: ƒ}
谢谢！箭头函数“this”和普通函数“this”指向不同的层……有趣……
2021-04-21 07:29:03
在上述情况下，“层”实际上是窗口。它只会在功能层上，如果 e 的新实例存在，例如 let echild = new e(); echild.func()
2021-04-23 07:29:03
我还添加了此处的 new 关键字如何也可以改变其处理方式背后的行为。
2021-04-24 07:29:03
其它你可能感兴趣的问题
上一篇html中jquery随机属性的含义是什么？[展开属性] 下一篇jQuery Animate() 和 BackgroundColor