JS中函数声明和函数表达式的区别！

函数的定义方式

1. 函数声明
2. 函数表达式
3. new Function 构造函数

其中，最常用的是函数声明和函数表达式，但这两者有什么区别呢？

区别1：函数声明必须始终带有一个标识符（Identifier），也就是我们所说的函数名，而函数表达式则可以省略。

下面看看具体的例子。

function fn() {};  // 函数声明
var fn = function() {};  // 函数表达式
// 函数表达式的另一种写法
var fn = function foo() {};

函数声明的典型格式

function 函数名称 (参数：可选){ 
  函数体 
}

function functionName(arg1, arg2, ...){
    
}

函数表达式的典型格式

var valiable = function 函数名称（可选）(参数：可选){ 
  函数体 
} 

var variable = function(arg1, arg2, ...){
            
}
var variable = function functionName(arg1, arg2, ...){
        
}

通过上面的比较，我们可以看出：如果不声明名称，那么肯定是函数表达式。也就是说：如果没有函数名称，那么肯定不是函数声明方式。
如果声明了函数名称的话，如何判断是函数声明还是函数表达式呢？
ECMAScript是通过它所在的上下文来判断的，如果function fn() {}是作为赋值表达式的一部分的话，那它就是一个函数表达式，否则就是函数声明。

区别2：变量或函数声明提前

先看看下面的代码，运行结果是什么？

foo();
function foo() {
    console.log("执行了 foo ...");
}
            
bar();
var bar = function() {
    console.log("执行了 bar ...");
}

运行结果.png

此时，我们可以看到：foo()正常输出结果，而bar()报错。
那如果代码改为下面这种：

function foo() {
    console.log("执行了 foo ...");
}
foo();
            
var bar = function() {
    console.log("执行了 bar ...");
}
bar();

运行结果1.png

此时，我们可以看到：foo()和bar()都正常输出结果。

这是什么原因呢？
Javascript的代码是从上往下执行的，在执行的过程中，会先进行代码的预解析，再执行代码。Javascript的预解析指的是变量或函数的提升。现在回头看看我们上面写的代码。

// foo();
// function foo() {
//  console.log("执行了 foo ...");
// }
            
// bar();
// var bar = function() {
//  console.log("执行了 bar ...");
// }

// 上面的代码执行的时候，由于变量或函数的提升，相当于下面的代码：
function foo() {
    console.log("执行了 foo ...");
}
foo();

var bar;
bar();
bar = function() {
    console.log("执行了 bar ...");
}

运行结果.png

从上面的代码我们可以得出结论：`函数声明会被提升到当前作用域的顶部，函数表达式则不会。

区别3：函数声明不是一个完整的语句，所以不能出现在if-else等语句中。

看看下面的代码，你们知道输出的是什么结果吗？

if(true) {
      function foo() {
        console.log('foo - true');
      }
} else {
    function foo() {
        console.log('foo - false');
    }
}
foo();

在Chrome浏览器中，输出的结果为：foo - true，但在IE10以下的浏览器中，输出的结果为：foo - false。
也就是说：在现代浏览器中，不会提升if语句中的函数声明，在老的IE浏览器版本中，if语句声明的函数也会提升。
那么，如果要兼容各个浏览器，上面的代码该怎样进行修改呢？

var foo;
if(true) {
    foo = function() {
        console.log('foo - true');
    }
} else {
    foo = function() {
        console.log('foo - false');
    }
}
foo();

此时，不管在哪个浏览器中，输出的结果都是：foo - true。
也就是说：`函数声明不是一个完整的语句，所以不能出现在if-else，for循环，finally，try catch语句中。因为ECMAScript规范只允许他们作为顶级语句，但是有的浏览器并不遵循这个规则。
总结：函数声明可以被提升，但是函数表达式不能被提升。所以，我们在任何位置定义函数声明，都可以被使用。但如果是函数表达式，只能在函数表达式声明之后调用它。如果在之前调用，会报Uncaught TypeError的错。