函数声明和函数表达式有什么区别与联系，应该怎样选择和使用？

函数表达式

在 JavaScript 中，函数不是“神奇的语言结构”，而是一种特殊的值。

咱们在前面章节使用的语法称为 函数声明：

function sayHi() {
  alert( "Hello" );
}
复制代码

另外一种建立函数的语法称为 函数表达式。

一般会写成这样：

let sayHi = function() {
  alert( "Hello" );
};
复制代码

在这里，函数被建立并像其余赋值同样，被明确地分配给了一个变量。无论函数是被怎样定义的，都只是一个存储在变量 sayHi 中的值。

上面这两段示例代码的意思是同样的：“建立一个函数，并把它存进变量 sayHi”。

咱们还能够用 alert 打印这个变量值：

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

alert( sayHi ); // 显示函数代码
复制代码

注意，最后一行代码并不会运行函数，由于 sayHi 后没有括号。在其余编程语言中，只要提到函数的名称都会致使函数的调用执行，但 JavaScript 可不是这样。

在 JavaScript 中，函数是一个值，因此咱们能够把它当成值对待。上面代码显示了一段字符串值，即函数的源码。

的确，在某种意义上说一个函数是一个特殊值，咱们能够像 sayHi() 这样调用它。

但它依然是一个值，因此咱们能够像使用其余类型的值同样使用它。

咱们能够复制函数到其余变量：

function sayHi() {   // (1) 建立
  alert( "Hello" );
}

let func = sayHi;    // (2) 复制

func(); // Hello // (3) 运行复制的值（正常运行）！
sayHi(); // Hello // 这里也能运行（为何不行呢）
复制代码

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

1. (1) 行声明建立了函数，并把它放入到变量 sayHi。
2. (2) 行将 sayHi 复制到了变量 func。请注意：sayHi 后面没有括号。若是有括号，func = sayHi() 会把 sayHi() 的调用结果写进func，而不是 sayHi 函数 自己。
3. 如今函数能够经过 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()：

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);
复制代码

在实际开发中，这样的的函数是很是有用的。实际开发与上述示例最大的区别是，实际开发中的函数会经过更加复杂的方式与用户进行交互，而不是经过简单的 confirm。在浏览器中，这样的函数一般会绘制一个漂亮的提问窗口。但这是另一件事了。

ask 的 showOk 和 showCancel 两个 arguments 对象能够被称为 回调函数 或简称 回调。

主要思想是咱们传递一个函数，并指望在稍后必要时将其“回调”。在咱们的例子中，showOk 是回答 "yes" 的回调，showCancel 是回答 "no" 的回调。

咱们能够用函数表达式对一样的函数进行大幅简写：

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}` );
};
复制代码

函数表达式在代码执行到它时才会被建立。只会发生在 (*) 行。为时已晚。

函数声明的另一个特殊的功能是它们的块级做用域。

严格模式下，当一个函数声明在一个代码块内时，它在该代码块内的任何位置都是可见的。但在代码块外不可见。

例如，想象一下咱们须要依赖于在代码运行过程当中得到的变量 age 声明一个函数 welcome()。而且咱们计划在以后的某个时间使用它。

若是咱们使用函数声明，如下则代码不能如愿工做：

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(…) {…} 更容易。函数声明更“醒目”。

……可是，若是因为某种缘由而致使函数声明不适合咱们（咱们刚刚看过上面的例子），那么应该使用函数表达式。

---

总结

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

在大多数状况下，当咱们须要声明一个函数时，最好使用函数声明，由于函数在被声明以前也是可见的。这使咱们在代码组织方面更具灵活性，一般也会使得代码可读性更高。

因此，仅当函数声明不适合对应的任务时，才应使用函数表达式。在本章中，咱们已经看到了几个例子，之后还会看到更多的例子。

本文首发于在微信公众号「技术漫谈」，欢迎关注。

---

现代 JavaScript 教程：开源的现代 JavaScript 从入门到进阶的优质教程。React 官方文档推荐，与 MDN 并列的 JavaScript 学习教程。

在线免费阅读：zh.javascript.info

---

扫描下方二维码，关注微信公众号「技术漫谈」，订阅更多精彩内容。