ES6 立即调用箭头函数

Question

为什么这在 Node.js 控制台中有效（在 4.1.1 和 5.3.0 中测试），但在浏览器中无效（在 Chrome 中测试）？

此代码块应创建并调用记录Ok 的匿名函数。

() => {
  console.log('Ok');
}()

此外，虽然上述 在 Node.js 中有效，但这不起作用：

n => {
  console.log('Ok');
}()

也不是这样：

(n) => {
  console.log('Ok');
}()

奇怪的是，当添加参数时，它实际上在立即调用部分抛出了SyntaxError。

Answer 1

您需要将其设为 函数表达式，而不是 函数定义，后者不需要名称并使其成为有效的 JavaScript。

(() => {
  console.log('Ok');
})();

相当于IIFE

(function() {
   console.log('Ok');
})();

这在 Node.js 中起作用但在 Chrome 中不起作用的可能原因是它的解析器将其解释为自执行函数，如 this

function() { console.log('hello'); }();

在Node.js 中工作正常。这是一个函数表达式，Chrome、Firefox和大多数浏览器都是这样解释的。您需要手动调用它。

告诉解析器期待函数表达式的最广泛接受的方法是将其包装在括号中，因为在 JavaScript 中，括号不能包含语句。此时，解析器遇到function关键字时，就知道将其解析为函数表达式，而不是函数声明。

关于参数化版本，这将起作用。

((n) => {
  console.log('Ok');
})()

Answer 2

如果没有括号，这些都不能工作。

为什么？

因为按照规范：

1. ArrowFunction 是 listed under AssignmentExpression
2. LHS of a CallExpression 必须是 MemberExpression、SuperCall 或 CallExpression

所以 ArrowFunction 不能在 CallExpression 的 LHS 上。

---

这在解释 => 时的有效含义是，它与赋值运算符 =、+= 等在同一级别上工作。

含义

• x => {foo}() 不会变成(x => {foo})()
• 解释器尝试将其解释为x => ({foo}())
• 因此它仍然是一个 SyntaxError
• 因此解释器确定( 一定是错误的并抛出SyntaxError

---

Babel 上也有一个关于它的错误 here。

Answer 3

您遇到此类问题的原因是控制台本身试图模拟您当前所针对的上下文的全局范围。它还尝试从您在控制台中编写的语句和表达式中捕获返回值，以便显示为结果。举个例子：

> 3 + 2
< 5

在这里，它就像一个表达式一样执行，但您已经将它写成一个语句。在普通脚本中，该值将被丢弃，但在这里，代码必须在内部被破坏（比如用函数上下文和 return 语句包装整个语句），这会导致各种奇怪的效果，包括你的问题重新体验。

这也是脚本中的一些裸 ES6 代码可以正常工作但在 Chrome 开发工具控制台中不能正常工作的原因之一。

尝试在 Node 和 Chrome 控制台中执行此操作：

{ let a = 3 }

在 Node 或 <script> 标签中它工作得很好，但在控制台中，它给出了 Uncaught SyntaxError: Unexpected identifier。它还以VMxxx:1 的形式为您提供了指向源的链接，您可以单击该链接来检查评估的源，显示为：

({ let a = 3 })

那么它为什么要这样做呢？

答案是它需要将你的代码转换成一个表达式，以便将结果返回给调用者并显示在控制台中。您可以通过将语句括在括号中来做到这一点，这使它成为一个表达式，但它也使上面的块在语法上不正确（表达式不能有块声明）。

控制台确实尝试通过聪明地处理代码来修复这些边缘情况，但我认为这超出了这个答案的范围。你可以提交一个错误，看看他们是否会考虑修复。

这是一个非常相似的例子：

https://*.com/a/28431346/46588

让您的代码工作的最安全方法是确保它可以作为表达式运行并检查SyntaxError 源链接以查看实际执行代码是什么并从中逆向工程解决方案。通常它意味着一对战略性放置的括号。

简而言之：控制台尝试尽可能准确地模拟全局执行上下文，但由于与 v8 引擎和 JavaScript 语义交互的限制，这有时很难或不可能解决。

Answer 4

我问了这样一个问题：

@getify 我有一个问题：要生成 #IIFE 模式，我们在函数声明周围使用 parans 将其转换为函数表达式，然后调用它。现在在箭头函数 IIFE 中，为什么我们需要 parans？！箭头函数不是默认已经是表达式了吗？！

这是凯尔辛普森的回答：

一个箭头函数是一个表达式，但我们需要围绕“运算符优先级”（排序）的括号 b/c，以便调用箭头-IIFE 的最终括号适用于整个函数而不仅仅是它身体的最后一个标记。

x => console.log(x)(4)    // trouble

对

(x => console.log(x))(4)    // working

——getify (@getify) June 12, 2020