简析JavaScript中的Function类型（二）——函数声明与函数表达式的区别

在简析JavaScript中的Function类型（一）——函数名是指针中咱们提到函数有三种定义方式：函数声明、函数表达式、使用Function构造函数。其中，函数声明和函数表达式是比较经常使用的方式，本篇文章就来说一下两者的区别。

先来看下面这段代码：

console.log(sum(1, 2));// 3
function sum(num1, num2){
  return num1 + num2;
}

先打印调用sum的结果，而后声明了sum，按照一般的编程思路来看，这种写法有点奇怪，咱们知道在编程中有三种基本结构：顺序结构、选择结构、循环结构。所谓顺序结构就是代码按照书写的顺序从上到下依次执行；选择结构就是if判断等，根据不一样的状况执行不一样的代码；循环结构如for循环等，在必定条件下反复地执行某段代码。

上面的这段代码明显是顺序结构，从上到下依次执行，按理说执行第一行就应该报错：诸如sum未定义之类。然而为何还能正确地打印结果呢？

如今咱们将上面的例子改成函数表达式的语法来看下：

console.log(sum(1, 2));//Uncaught TypeError: sum is not a function
var sum = function(num1, num2){
  return num1 + num2;
};

发现报错了，提示sum不是一个函数，正是咱们指望的结果，那为何函数声明会违背顺序结构呢？

原来，JavaScript引擎在向执行环境中加载数据时，对函数声明和函数表达式并不是一视同仁。它会率先读取函数声明，并使其在执行任何代码以前可用；至于函数表达式，则必须等到引擎执行到它所在的代码行，才会真正被解释执行。

在执行代码以前，JavaScript引擎读取并将函数声明添加到执行环境中，使之变为可以让其余代码访问的状态，这个过程称为函数声明提高。对于函数表达式，没有函数声明提高。上例中，在执行到函数所在行的语句以前，变量sum中不会保存有对函数的引用，因而报错；并且，因为第一行代码就报错，因此实际上也不会执行到下一行。

所以，运行这两段代码就出现了咱们看到的样子。

除了何时能够经过变量访问函数这一点区别以外，函数声明与函数表达式的语法实际上是等价的。

另外也能够同时使用函数声明和函数表达式：

console(sum(1, 2));//Uncaught TypeError: sum is not a function
var sum = function sum(num1, num2) {
  return num1 + num2;
};

这等同于函数表达式，也不会进行函数声明提高。不过，这种写法在Safari中会致使错误。