ES6立即调用了arrow函数

Question

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

这个代码块应该创建并调用一个匿名函数，该函数记录Ok。

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

另外，当上述操作在节点中工作时。js，这不起作用：

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

也不是这个：

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

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

Answer 1

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

> 3 + 2
< 5

在这里，它的执行就像是一个表达式，但您编写它就像它是一个语句。在普通脚本中，该值将被丢弃，但在这里，代码必须被内部损坏（比如用函数上下文和返回语句包装整个语句），这会导致各种奇怪的效果，包括您遇到的问题。

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

尝试在节点和Chrome控制台执行此操作：

{ let a = 3 }

在节点或a

({ let a = 3 })

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

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

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

这里有一个非常相似的例子：

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

使代码正常工作的最安全的方法是确保它可以作为表达式运行，并检查SyntaxError源代码链接，查看实际执行的代码是什么，然后从中反向设计解决方案。通常是指一对策略性放置的括号。

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

Answer 2

如果没有括号，这些都不应该起作用。

为什么？

因为根据规范：

1. 箭头函数列在AssignmentExpression下

因此，ArrowFunction不能位于CallExpression的LHS上。

这在how=

<罢工> 意义

• x=

在巴贝尔身上也有一个关于它的错误。

Answer 3

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

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

是生命的等价物吗

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

以及这在节点中起作用的可能原因。js而不是Chrome是因为其解析器将其解释为一个自执行函数，如下所示

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

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

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

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

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