Почему вызовы функций JavaScript ES6 не будут работать должным образом

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

Это потому, что первый параметр - это вызов функции , тогда как второй - только функция .

Чтобы второй вызов работал как первый, вы должны сделать:

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

Этот синтаксис выше довольно запутанный: вам нужно использовать extra () для вызова функции. Кроме того, вам необходимо заключить все определения функций стрелок в скобки из-за требований синтаксиса языка.

Этот способ немедленного вызова функций из самого определения был действительно популярен до ES2015 и известен как IIFE . Обычно вы видите это с помощью операторов function, но вы также можете немедленно вызывать функции стрелок.

С другой стороны, чтобы первая строка вашего фрагмента работала как исходная секунда, вы должны вместо этого:

document.write(output);

Итак, теперь вы передаете только две функции определения в document.write.

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

Это потому, что вы создаете функцию, но не вызываете ее.

Чтобы вызвать функцию анонимной стрелки, вы должны сделать:

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