详解JavaScript中的函数声明和函数表达式
JavaScript中需要创建函数的话,有两种方法:函数声明、函数表达式,各自写法如下:
//方法一:函数声明 functionfoo(){} //方法二:函数表达式 varfoo=function(){};
另外还有一种自执行函数表达式,主要用于创建一个新的作用域,在此作用域内声明的变量不会和其它作用域内的变量冲突或混淆,大多是以匿名函数方式存在,且立即自动执行:
(function(){ //varx=... })();
此种自执行函数表达式归类于以上两种方法的第二种,也算是函数表达式。
方法一和方法二都创建了一个函数,且命名为foo,但是二者还是有区别的。JavaScript解释器中存在一种变量声明被提升(hoisting)的机制,也就是说变量(函数)的声明会被提升到作用域的最前面,即使写代码的时候是写在最后面,也还是会被提升至最前面。
例如以下代码段:
alert(foo);//functionfoo(){} alert(bar);//undefined functionfoo(){} varbar=functionbar_fn(){}; alert(foo);//functionfoo(){} alert(bar);//functionbar_fn(){}
输出结果分别是functionfoo(){}、undefined、functionfoo(){}和functionbar_fn(){}。
可以看到foo的声明是写在alert之后,仍然可以被正确调用,因为JavaScript解释器会将其提升到alert前面,而以函数表达式创建的函数bar则不享受此待遇。
那么bar究竟有没有被提升呢,其实用var声明的变量都会被提升,只不过是被先赋值为undefined罢了,所以第二个alert弹出了undefined。
所以,JavaScript引擎执行以上代码的顺序可能是这样的:
- 创建变量foo和bar,并将它们都赋值为undefined。
- 创建函数foo的函数体,并将其赋值给变量foo。
- 执行前面的两个alert。
- 创建函数bar_fn,并将其赋值给bar。
- 执行后面的两个alert。
注:
严格地说,再JavaScript中创建函数的话,还有另外一种方法,称为“函数构造法”:
varfoo=Function('alert("hi!");'); varfoo=newFunction('alert("hi!");');//等同于上面一行
此方法以一个字符串作为参数形成函数体。但是用这种方法,执行效率方面会打折扣,且似乎无法传递参数,所以少用为妙。