JavaScript基础知识 - 函数表达式 - 《现代 JavaScript 教程笔记》

函数声明:

function sayHi() {
  alert( "Hello" );
}

函数表达式:

let sayHi = function() {
  alert( "Hello" );
};

在这里，函数被创建并像其他赋值一样，被明确地分配给了一个变量。不管函数是被怎样定义的，都只是一个存储在变量 sayHi 中的值。
上面这两段示例代码的意思是一样的：“创建一个函数，并把它存进变量 sayHi”。
我们还可以用 alert 打印这个变量值：

function sayHi() {
  alert( "Hello" );
}
alert( sayHi ); // 显示函数代码

注意，最后一行代码并不会运行函数，因为 sayHi 后没有括号。
在 JavaScript 中，函数是一个值，所以我们可以把它当成值对待。在某种意义上说一个函数是一个特殊值，我们可以像 sayHi() 这样调用它。

function sayHi() {   // (1) 创建
  alert( "Hello" );
}
let func = sayHi;    // (2) 复制
func(); // Hello     // (3) 运行复制的值（正常运行）！
sayHi(); // Hello    //     这里也能运行（为什么不行呢）

解释一下上段代码发生的细节：

(1) 行声明创建了函数，并把它放入到变量 sayHi。
(2) 行将 sayHi 复制到了变量 func。请注意：sayHi 后面没有括号。如果有括号，func = sayHi() 会把 sayHi() 的调用结果写进func，而不是 sayHi 函数本身。
现在函数可以通过 sayHi() 和 func() 两种方式进行调用。

我们也可以在第一行中使用函数表达式来声明 sayHi：

let sayHi = function() {
  alert( "Hello" );
};
let func = sayHi;
// ...

这两种声明的函数是一样的。

为什么这里末尾会有个分号？
你可能想知道，为什么函数表达式结尾有一个分号 ;，而函数声明没有：

function sayHi() {
  // ...
}
let sayHi = function() {
  // ...
};

答案很简单：

在代码块的结尾不需要加分号 ;，像 if { … }，for { }，function f { } 等语法结构后面都不用加。
函数表达式是在语句内部的：let sayHi = …;，作为一个值。它不是代码块而是一个赋值语句。不管值是什么，都建议在语句末尾添加分号 ;。所以这里的分号与函数表达式本身没有任何关系，它只是用于终止语句。
回调函数
让我们多举几个例子，看看如何将函数作为值来传递以及如何使用函数表达式。
我们写一个包含三个参数的函数 ask(question, yes, no)：
question
关于问题的文本
yes
当回答为 “Yes” 时，要运行的脚本
no
当回答为 “No” 时，要运行的脚本
函数需要提出 question（问题），并根据用户的回答，调用 yes() 或 no()： ```javascript function ask(question, yes, no) { if (confirm(question)) yes() else no(); }

function showOk() { alert( “You agreed.” ); }

function showCancel() { alert( “You canceled the execution.” ); }

// 用法：函数 showOk 和 showCancel 被作为参数传入到 ask ask(“Do you agree?”, showOk, showCancel);

ask 的两个参数值 showOk 和 showCancel 可以被称为 **回调函数** 或简称 **回调**。
主要思想是我们传递一个函数，并期望在稍后必要时将其“回调”。在我们的例子中，showOk 是回答 “yes” 的回调，showCancel 是回答 “no” 的回调。
我们可以用函数表达式对同样的函数进行大幅简写：
```javascript
function ask(question, yes, no) {
  if (confirm(question)) yes()
  else no();
}
ask(
  "Do you agree?",
  function() { alert("You agreed."); },
  function() { alert("You canceled the execution."); }
);

这里直接在 ask(…) 调用内进行函数声明。这两个函数没有名字，所以叫 匿名函数。这样的函数在 ask 外无法访问（因为没有对它们分配变量），不过这正是我们想要的。

这样的代码在我们的脚本中非常常见，这正符合 JavaScript 语言的思想。

一个函数是表示一个“行为”的值 字符串或数字等常规值代表数据。函数可以被视为一个 行为（action）。我们可以在变量之间传递它们，并在需要时运行。

函数表达式 vs 函数声明

区别

语法

函数声明：在主代码流中声明为单独的语句的函数。

// 函数声明
function sum(a, b) {
  return a + b;
}

函数表达式：在一个表达式中或另一个语法结构中创建的函数。下面这个函数是在赋值表达式 = 右侧创建的：

// 函数表达式
let sum = function(a, b) {
  return a + b;
};

更细微的差别是，JavaScript 引擎会在 什么时候 创建函数。

创建时机

函数表达式是在代码执行到达时被创建，并且仅从那一刻起可用。
一旦代码执行到赋值表达式 let sum = function… 的右侧，此时就会开始创建该函数，并且可以从现在开始使用（分配，调用等）。
函数声明则不同。
在函数声明被定义之前，它就可以被调用。
例如，一个全局函数声明对整个脚本来说都是可见的，无论它被写在这个脚本的哪个位置。

这是内部算法的原故。当 JavaScript 准备运行脚本时，首先会在脚本中寻找全局函数声明，并创建这些函数。我们可以将其视为“初始化阶段”。

在处理完所有函数声明后，代码才被执行。所以运行时能够使用这些函数。

例如下面的代码会正常工作：

sayHi("John"); // Hello, John
function sayHi(name) {
  alert( `Hello, ${name}` );
}

函数声明 sayHi 是在 JavaScript 准备运行脚本时被创建的，在这个脚本的任何位置都可见。
……如果它是一个函数表达式，它就不会工作。

sayHi("John"); // error!
let sayHi = function(name) {  // (*) no magic any more
  alert( `Hello, ${name}` );
};

函数表达式在代码执行到它时才会被创建。只会发生在 () 行。
函数声明的另外一个特殊的功能是它们的块级作用域。
*严格模式下，当一个函数声明在一个代码块内时，它在该代码块内的任何位置都是可见的。但在代码块外不可见。
如果我们使用函数声明，则以下代码无法像预期那样工作：

let age = prompt("What is your age?", 18);
// 有条件地声明一个函数
if (age < 18) {
  function welcome() {
    alert("Hello!");
  }
} else {
  function welcome() {
    alert("Greetings!");
  }
}
// ……稍后使用
welcome(); // Error: welcome is not defined

这是因为函数声明只在它所在的代码块中可见。
下面是另一个例子：

let age = 16; // 拿 16 作为例子
if (age < 18) {
  welcome();               // \   (运行)
                           //  |
  function welcome() {     //  |
    alert("Hello!");       //  |  函数声明在声明它的代码块内任意位置都可用
  }                        //  |
                           //  |
  welcome();               // /   (运行)
} else {
  function welcome() {
    alert("Greetings!");
  }
}
// 在这里，我们在花括号外部调用函数，我们看不到它们内部的函数声明。
welcome(); // Error: welcome is not defined

我们怎么才能让 welcome 在 if 外可见呢？
正确的做法是使用函数表达式，并将 welcome 赋值给在 if 外声明的变量，并具有正确的可见性。

let age = prompt("What is your age?", 18);
let welcome;
if (age < 18) {
  welcome = function() {
    alert("Hello!");
  };
} else {
  welcome = function() {
    alert("Greetings!");
  };
}
welcome(); // 现在可以了

或者我们可以使用问号运算符 ? 来进一步对代码进行简化：

let age = prompt("What is your age?", 18);
let welcome = (age < 18) ?
  function() { alert("Hello!"); } :
  function() { alert("Greetings!"); };
welcome(); // 现在可以了

什么时候选择函数声明与函数表达式？ 根据经验，当我们需要声明一个函数时，首先考虑函数声明语法。它能够为组织代码提供更多的灵活性。因为我们可以在声明这些函数之前调用这些函数。这对代码可读性也更好，因为在代码中查找 function f(…) {…} 比 let f = function(…) {…} 更容易。函数声明更“醒目”。 ……但是，如果由于某种原因而导致函数声明不适合我们（我们刚刚看过上面的例子），那么应该使用函数表达式。

总结

函数是值。它们可以在代码的任何地方被分配，复制或声明。
如果函数在主代码流中被声明为单独的语句，则称为“函数声明”。
如果该函数是作为表达式的一部分创建的，则称其“函数表达式”。
在执行代码块之前，内部算法会先处理函数声明。所以函数声明在其被声明的代码块内的任何位置都是可见的。
函数表达式在执行流程到达时创建。

在大多数情况下，当我们需要声明一个函数时，最好使用函数声明，因为函数在被声明之前也是可见的。这使我们在代码组织方面更具灵活性，通常也会使得代码可读性更高。
所以，仅当函数声明不适合对应的任务时，才应使用函数表达式。