Javascript 函数声明和函数表达式的区别

Javascript Function无处不在，并且功能强大！经过Javascript函数可让JS具备面向对象的一些特征，实现封装、继承等，也可让代码获得复用。但事物都有两面性，Javascript函数有的时候也比较“任性”，你若是不了解它的“性情”，它极可能给你制造出一些意想不到的麻烦（bugs)出来。  

Javascript Function有两种类型:

1)函数声明(Function Declaration);

// 函数声明
    function funDeclaration(type){
        return type==="Declaration";
    }

2)函数表达式(Function Expression)。

// 函数表达式
    var funExpression = function(type){
        return type==="Expression";
    }

上面的代码看起来很相似，感受也没什么太大差异。但实际上，Javascript函数上的一个“陷阱”就体如今Javascript两种类型的函数定义上。下面看两段代码（分别标记为代码1段和代码2段）：

funDeclaration("Declaration");//=> true
    function funDeclaration(type){
      return type==="Declaration";
  }

funExpression("Expression");//=>error
      var funExpression = function(type){
        return type==="Expression";
   }

用函数声明建立的函数funDeclaration能够在funDeclaration定义以前就进行调用；
而用函数表达式建立的funExpression函数不能在funExpression被赋值以前进行调用。
为何会这样呢？！这就要理解Javascript Function两种类型的区别：
用函数声明建立的函数能够在函数解析后调用（解析时进行等逻辑处理）；
而用函数表达式建立的函数是在运行时进行赋值，且要等到表达式赋值完成后才能调用。
这个区别看似微小，但在某些状况下确实是一个难以发现的陷阱。
出现这个陷阱的本质缘由体如今这两种类型在Javascript function hoisting(函数提高）
和运行时机（解析时/运行时）上的差别。
关于变量提高，可见个人另一篇博文<JavaScript变量提高>上面两段代码的函数提高可示意为下图：

代码1段JS函数等同于：

function funDeclaration(type){
        return type==="Declaration";
    }
    funDeclaration("Declaration");//=> true

代码2段JS函数等同于：

var funExpression;
    funExpression("Expression");//==>error
    funExpression = function(type){
        return type==="Expression";
    }

上述代码在运行时，只定义了funExpression变量，但值为undefined。所以不能在undefined上进行函数调用。此时funExpression赋值语句还没执行到。为了进一步加深JS函数两种类型的区别，下面给出一个更具迷惑性的示例，请看下面的代码（代码段4）：

var sayHello;
    console.log(typeof (sayHey));//=>function    
    console.log(typeof (sayHo));//=>undefined
    if (true) {
        function sayHey() {
            console.log("sayHey");
        }
        sayHello = function sayHo() {
            console.log("sayHello");
    }
    } else {
        function sayHey() {
            console.log("sayHey2");
        }
        sayHello = function sayHo() {
            console.log("sayHello2");
        }
    }    
    sayHey();// => sayHey2    
    sayHello();// => sayHello

分析：sayHey是用函数声明建立的，在JS解析时JS编译器将函数定义进行了函数提高，也就是说，在解析JS代码的时候，JS编译器（条件判断不造成新的做用域，两个sayHey函数定义都被提高到条件判断以外）检测到做用域内有两个同名的sayHey定义，第一个定义先被提高，第二个定义接着被提高（第二个定义在第一个定义之下），第二个定义覆盖了第一个sayHey定义，因此sayHey（）输出sayHey2；而sayHello是用函数表达式建立的，其表达式的内容是在JS运行时（不是解析时）才能肯定（这里条件判断就起到做用了），因此sayHello表达式执行了第一个函数定义并赋值，则sayHello（）输出sayHello。

　　代码段4的代码实际上等同于下面的代码（代码段5）：

var sayHello;
    function sayHey() {
            console.log("sayHey");
        }
    function sayHey() {
            console.log("sayHey2");
    }
    console.log(typeof (sayHey));//=>function    
    console.log(typeof (sayHo));//=>undefined
    if (true) {
        //hoisting...
        sayHello = function sayHo() {
            console.log("sayHello");
    }
    } else {
        //hoisting...
        sayHello = function sayHo() {
            console.log("sayHello2");
        }
    }    
    sayHey();// => sayHey2    
    sayHello();// => sayHello

有的人也许会怀疑函数sayHey的定义是第二个覆盖第一个了么？咱们能够把sayHey的源代码进行输出，有图有真相，以下图所示：

总结

　　Javascript 中函数声明和函数表达式是存在区别的，函数声明在JS解析时进行函数提高，所以在同一个做用域内，无论函数声明在哪里定义，该函数均可以进行调用。而函数表达式的值是在JS运行时肯定，而且在表达式赋值完成后，该函数才能调用。这个微小的区别，可能会致使JS代码出现意想不到的bug,让你陷入莫名的陷阱中。

　　最后附上代码段4中sayHello和sayHey两个函数的核心步骤（我的理解，如有异议欢迎留言探讨）：

　　上图为sayHello函数执行的主要步骤示意图。

上图为sayHey函数执行主要步骤的示意图。若对闭包感兴趣，能够看另一篇博文<JavaScript高级特性 闭包>