什么是词汇'这个'？

Question

有人可以给我一个关于lexical的简要介绍吗？

"箭头函数表达式(也称为胖箭头函数)与函数表达式相比具有更短的语法,并且词法绑定此值(不绑定它自己的this,arguments,super或new.target).箭头函数始终是匿名的".

这是否意味着当我使用'胖箭'函数中的'this'引用调用函数成员时,'this'总是指封闭的'this'？

Answer 1

您似乎对this箭头函数中发生的事情有正确的理解.我会提供一个解释,我认为会增加对话,并希望巩固你的理解.

您可能知道,当您定义函数并在其中使用变量时,它会检查变量是否已在其范围内定义.如果是的话,它会使用它!如果没有,它将检查该变量定义的封闭范围.它会一直检查封闭范围,直到找到变量或达到全局范围.现在,隐式地为您定义不是箭头函数的函数定义this.因此,当您尝试this在其范围内使用时,它们永远不会检查封闭范围(因为它们在自己的范围内找到它!).箭头函数没有定义它们自己this,因此它们会转到封闭范围并查找它,就像它们尝试在其范围中使用的任何变量一样.

Answer 2

作为描述this箭头函数行为的一种方式,术语"词汇this"介于混淆和错误之间.

行为很简单,就是this在箭头函数中引用this周围函数 - 或者只是说箭头函数没有定义(或"绑定")它自己的更简单和更准确this.

令人遗憾的是,"词汇this"的术语可能因MDN关于箭头功能的文章中的措词选择不当而延续(直到最近还鼓励人们使用过时的术语"胖箭头功能").这已经被清理干净了.另请注意,规范从未this在箭头函数中使用术语"词汇" .我很想知道是谁想出了这个表达方式.

Answer 3

假设你有一个点击监听器.在那个监听器中,你正在执行一些AJAX操作setTimeout.达到设定的时间后,将执行回调中的代码.在回调中,您可能已访问this以更改单击按钮的颜色.但由于AJAX操作,控件将脱离上下文.ES2015引入了箭头功能来解决这个问题.箭头函数捕获this封闭上下文的值.

示例用例是:

$('.btn').click(function () {
    setTimeout(function () {
        $(this).text('new'); 
        // This will cause an error since function() defines this as the global object.
    } ,100); 
}); 

为了避免这种情况:

$('.btn').click(function () { // <- Enclosing context
    setTimeout( () => {
        $(this).text('new')  } 
        // This works, because this will be set to a value captured from the enclosing context.
      ,100);
});