函数、箭头函数、闭包和 ExecutionContext

Answer 1

这个问题很广泛，并且存在很多混乱，但我希望这篇文章可以提供一些清晰的信息。这是一个社区 wiki 帖子，任何人都可以编辑。如果您有后续问题，我们很乐意为您提供帮助。

非箭头函数

函数的词法环境是在函数被定义时定义的创建.当评估者在普通评估中遇到一个函数时，就会创建一个函数。这对于非箭头和箭头函数都是如此。但是，所有非箭头函数都有一个动态上下文 this，它会根据函数的调用方式或 binded、called 或 applyed 而变化 -

function F(...args) {
  console.log(this.value, ...args)
}

value = "global"

const A = F.bind({value: "hello"}, 1, 2, 3)
const B = A.bind({value: "world"}, 4, 5, 6)

const o = {
  value: "object",
  method: F
}

F(7,8,9) // global 7 8 9
A(7,8,9) // hello 1 2 3 7 8 9
B(7,8,9) // hello 1 2 3 4 5 6 7 8 9
o.method(7,8,9) // object 7 8 9

箭头函数

当我们将F 更改为箭头函数时会发生什么？箭头函数有词汇this 无法反弹。但为什么？

const F = (...args) => {
  console.log(this.value, ...args)
}

这相当于下面的代码 -

const LEXICAL_THIS = this
function F(...args) {
   console.log(LEXICAL_THIS.value, ...args)
}

箭头函数没有自己的动态上下文，而是从创建它们的环境中继承this。而且因为它们没有自己的动态上下文，所以不存在bind 的上下文。这是它的行为方式 -

const F = (...args) => {
  console.log(this.value, ...args)
}

value = "global"

const A = F.bind({value: "hello"}, 1, 2, 3)
const B = A.bind({value: "world"}, 4, 5, 6)

const o = {
  value: "object",
  method: F
}

F(7,8,9) // global 7 8 9
A(7,8,9) // global 1 2 3 7 8 9
B(7,8,9) // global 1 2 3 4 5 6 7 8 9
o.method(7,8,9) // global 7 8 9

嵌套函数

如果您在另一个函数内部编写一个函数，则在执行外部函数之前不会创建内部函数。多次执行外部函数将多次重新创建内部函数（和环境） -

const add = x => y =>
  x + y
  
const add3 = add(3)
const add6 = add(6)

console.log(add3(10), add3(20), add3(30)) // 13 23 33
console.log(add6(10), add6(20), add6(30)) // 16 26 36

这是使用非箭头函数的相同程序 -

function add(x) {
  return function(y) {
    return x + y
  }
}

const add3 = add(3)
const add6 = add(6)

console.log(add3(10), add3(20), add3(30)) // 13 23 33
console.log(add6(10), add6(20), add6(30)) // 16 26 36

Answer 2

TLDR：箭头函数...与 ExecutionContext/环境和闭包交互就像一段代码。

你把这里的事情复杂化了，在我看来，我认为它实际上只是关于this 关键字，因为它是ExecutionContext 中唯一将arrow functions 与traditional ones 区分开来的东西。
一旦你有了 3 的答案，即箭头函数的“模型”，问题 1 和 2 就毫无意义，如果考虑到它们没有 this 绑定，这很简单。
考虑以下示例：

const fn = () => { console.log(this); };

// block code call:
{ console.log(this); }

// arrow function call:
fn();

// arrow function call with `this` value:
fn.call(0);

// arrow function call as method:
const object = {fn};
object.fn();

无论在哪个上下文中执行上述示例，它们都会记录相同的值。
因此，箭头函数的“模型”可以定义为：可以像函数一样执行的可重用代码块，其参数充当块范围的变量。