Question

我听过有人说Javascript箭头功能可以用来“解决一些与范围相关的问题”。

到目前为止，我已经知道JavaScript箭头函数的主要优点是保存语法或允许隐式行为。

1）更短（“糖”）语法示例：

()=>{...}
let myFunction = ()=>{...}

_短于：

function() {...}
function myFunction() {...}

2）此reduce()示例中的隐式行为：

let prices = [1, 2, 3, 4, 5];
let result = prices.reduce( (x,y)=> x+y );
// Reduce data from x to y (reduce needs return, which is included implicitly). Result will be 15 (1+2+3+4+5 are reduced to 15, in this case).

我无法将这些和其他示例与范围相关联。我知道在使用var的函数内声明的变量无法继承到子函数的范围存在问题，并且当const和let时，此问题已解决介绍（他们允许这样的继承）。

那么除了建议糖语法和一些隐含行为之外，箭头函数还有哪些主要的范围问题？

Answer 1

ES6粗箭头功能不仅可以简化语法并使代码易于阅读，而且还具有更多优点。此外，这是新箭头功能如何绑定或实际上不绑定的方式。箭头函数按词法绑定它们的上下文，因此它实际上是指原始上下文。现在您的问题将是，什么是词汇绑定。让我们尝试通过简单的例子来理解。考虑一个小的JavaScript代码。

const team = {
  members = ['Ankur','Ranjan'],
  teamName = 'Super Squad',
  teamSummary: function(){
    return this.members.map(function(member){
      return `${member} is on team $(this.teamName)`
    }) 
  }
 }

此代码将引发TypeError：无法读取未定义的属性'teamName'。您可以使用JavaScript的bind()方法来解决此问题，也可以使用var self = this并将this.teamName更改为self.teamName。两种方式都很好，但是您也可以使用箭头功能解决此问题。

const team = {
  members = ['Ankur','Ranjan'],
  teamName = 'Super Squad',
  teamSummary: function(){
  // this === team
  return this.members.map((member) => {
    return `${member} is on team $(this.teamName)`
    }) 
  }
}

那么“词法”究竟如何允许我们传递执行上下文？通过使用“词汇范围”。词法作用域只是意味着它从包含箭头功能的代码中使用它。

JavaScript箭头函数解决了哪些范围相关的问题？

1 个答案: