Question

给出以下摘录：

function output() {
  return "<p>normal function</p>";  
}

//first version
document.write(output());
//second version
document.write(() => {return "<p>arrow-function</p>"});

我想知道，为什么在上面的示例中正常函数会正确打印，但是第二种方法只会打印转换后的函数声明：

"function () {return "

arrow-function
";} "

你能解释一下吗？

Answer 1

这是因为您正在创建函数而不是调用它。

要调用匿名箭头功能，您应该执行以下操作：

(() => {return "<p>arrow-function</p>"})()

Answer 2

您实际上并没有像调用第一个函数那样调用第二个函数。如果包装该函数并调用它，将获得预期的结果。

function output() {
  return "<p>normal function</p>";  
}

//first version
document.write(output());
//second version
document.write(() => {return "<p>arrow-function</p>"});

//should be
document.write((() => {return "<p>arrow-function</p>"})());

Answer 3

您正在告诉document.write输出您正在传递的函数定义，而您并未真正调用该箭头函数，因此它没有返回值。您可以改为这样做，并获得期望的结果

var f = () => {return "<p>arrow-function</p>"};

document.write(f())

Answer 4

这是因为第一个参数是函数调用，而第二个参数是仅函数。

要使第二个呼叫像第一个呼叫一样工作，您可以这样做：

document.write( (() => {return "<p>arrow-function</p>"})() );

上面的语法非常混乱：您需要额外的（）来调用该函数。最重要的是，由于语言语法要求，您需要将所有箭头函数定义括在括号内。

在ES2015 and is known as IIFE's之前，这种从定义开始立即调用函数的方法非常流行。通常，您可以使用function语句看到它，但是您也可以立即调用箭头函数。

另一方面，要使代码段的第一行像原来的第二行一样工作，您应该这样做：

document.write(output);

因此，您现在只将两个函数定义传递给document.write。

为什么JavaScript ES6函数调用无法按预期工作

4 个答案: