JS中函数声明与函数表达式的不同

Js中的函数声明是指下面的形式：[javascript] view plain copyfunction functionName(){}这样的方式来声明一个函数，而函数表达式则是类似表达式那样来声明一个函数，如：[javascript] view plain copyvar functionName = function(){}可能很多朋友在看到这两一种写法时会产生疑惑，这两种写法差不多，在应用中貌似也都是可行的，那他们有什么差别呢？事实上，js的解析器对函数声明与函数表达式并不是一视同仁地对待的。对于函数声明，js解析器会优先读取，确保在所有代码执行之前声明已经被解析，而函数表达式，如同定义其它基本类型的变量一样，只在执行到某一句时也会对其进行解析，所以在实际中，它们还是会有差异的，具体表现在，当使用函数声明的形式来定义函数时，可将调用语句写在函数声明之前，而后者，这样做的话会报错。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段）：

1     funDeclaration("Declaration");//=> true
2     function funDeclaration(type){
3         return type==="Declaration";
4     }

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

　　用函数声明创建的函数funDeclaration可以在funDeclaration定义之前就进行调用；而用函数表达式创建的funExpression函数不能在funExpression被赋值之前进行调用。
为什么会这样呢？！这就要理解Javascript Function两种类型的区别：用函数声明创建的函数可以在函数解析后调用（解析时进行等逻辑处理）；而用函数表达式创建的函数是在运行时进行赋值，且要等到表达式赋值完成后才能调用。
这个区别看似微小，但在某些情况下确实是一个难以发现的陷阱。出现这个陷阱的本质原因体现在这两种类型在Javascript function hoisting(函数提升）和运行时机（解析时/运行时）上的差异。关于变量提升，可参见我的另外一篇博文http://www.cnblogs.com/isaboy/p/javascript_hoisting.html。上面两段代码的函数提升可示意为下图：

代码1段JS函数等同于：
    function funDeclaration(type){return type==="Declaration";}funDeclaration("Declaration");//=> true
代码2段JS函数等同于：
    var funExpression;funExpression("Expression");//==>errorfunExpression = function(type){return type==="Expression";}
　　上述代码在运行时，只定义了funExpression变量，但值为undefined。因此不能在undefined上进行函数调用。此时funExpression赋值语句还没执行到。为了进一步加深JS函数两种类型的区别，下面给出一个更具迷惑性的示例，请看下面的代码（代码段4）：
 1     var sayHello;2     console.log(typeof (sayHey));//=>function3     console.log(typeof (sayHo));//=>undefined4     if (true) {5         function sayHey() {6             console.log("sayHey");7         }8         sayHello = function sayHo() {9             console.log("sayHello");10     }11     } else {12         function sayHey() {13             console.log("sayHey2");14         }15         sayHello = function sayHo() {16             console.log("sayHello2");17         }18     }19     sayHey();// => sayHey220     sayHello();// => sayHello
　　分析：sayHey是用函数声明创建的，在JS解析时JS编译器将函数定义进行了函数提升，也就是说，在解析JS代码的时候，JS编译器（条件判断不形成新的作用域，两个sayHey函数定义都被提升到条件判断之外）检测到作用域内有两个同名的sayHey定义，第一个定义先被提升，第二个定义接着被提升（第二个定义在第一个定义之下），第二个定义覆盖了第一个sayHey定义，所以sayHey（）输出sayHey2；而sayHello是用函数表达式创建的，其表达式的内容是在JS运行时（不是解析时）才能确定（这里条件判断就起到作用了），所以sayHello表达式执行了第一个函数定义并赋值，则sayHello（）输出sayHello。
　　代码段4的代码实际上等同于下面的代码（代码段5）：
 1     var sayHello;2     function sayHey() {3             console.log("sayHey");4         }5     function sayHey() {6             console.log("sayHey2");7     }8     console.log(typeof (sayHey));//=>function9     console.log(typeof (sayHo));//=>undefined10     if (true) {11         //hoisting...12         sayHello = function sayHo() {13             console.log("sayHello");14     }15     } else {16         //hoisting...17         sayHello = function sayHo() {18             console.log("sayHello2");19         }20     }21     sayHey();// => sayHey222     sayHello();// => sayHello
　　有的人也许会怀疑函数sayHey的定义是第二个覆盖第一个了么？我们可以把sayHey的源代码进行输出，有图有真相，如下图所示：　　总结　　Javascript 中函数声明和函数表达式是存在区别的，函数声明在JS解析时进行函数提升，因此在同一个作用域内，不管函数声明在哪里定义，该函数都可以进行调用。而函数表达式的值是在JS运行时确定，并且在表达式赋值完成后，该函数才能调用。这个微小的区别，可能会导致JS代码出现意想不到的bug,让你陷入莫名的陷阱中。　　最后附上代码段4中sayHello和sayHey两个函数的核心步骤（个人理解，若有异议欢迎留言探讨）：　　上图为sayHello函数执行的主要步骤示意图。　　上图为sayHey函数执行主要步骤的示意图。若对闭包感兴趣，可以看另外一篇博文http://www.cnblogs.com/isaboy/p/javascript_closure.html。