JavaScript中函数表达式和函数声明及函数声明与函数表达式的不同
函数表达式和函数声明
在ECMAScript中,创建函数的最常用的两个方法是函数表达式和函数声明,两者期间的区别是有点晕,因为ECMA规范只明确了一点:函数声明必须带有标示符(Identifier)(就是大家常说的函数名称),而函数表达式则可以省略这个标示符:
函数声明:
function函数名称(参数:可选){函数体}
函数表达式:
function函数名称(可选)(参数:可选){函数体}
所以,可以看出,如果不声明函数名称,它肯定是表达式,可如果声明了函数名称的话,如何判断是函数声明还是函数表达式呢?ECMAScript是通过上下文来区分的,如果functionfoo(){}是作为赋值表达式的一部分的话,那它就是一个函数表达式,如果functionfoo(){}被包含在一个函数体内,或者位于程序的最顶部的话,那它就是一个函数声明。
functionfoo(){}//声明,因为它是程序的一部分 varbar=functionfoo(){};//表达式,因为它是赋值表达式的一部分 newfunctionbar(){};//表达式,因为它是new表达式 (function(){ functionbar(){}//声明,因为它是函数体的一部分 })();
还有一种函数表达式不太常见,就是被括号括住的(functionfoo(){}),他是表达式的原因是因为括号()是一个分组操作符,它的内部只能包含表达式,我们来看几个例子:
functionfoo(){}//函数声明
(functionfoo(){});//函数表达式:包含在分组操作符内
命名函数表达式
提到命名函数表达式,理所当然,就是它得有名字,前面的例子varbar=functionfoo(){};就是一个有效的命名函数表达式,但有一点需要记住:这个名字只在新定义的函数作用域内有效,因为规范规定了标示符不能在外围的作用域内有效:
varf=functionfoo(){ returntypeoffoo;//foo是在内部作用域内有效 }; //foo在外部用于是不可见的 console.log(typeoffoo);//"undefined" console.log(f());//"function" varf=functionfoo(){ returnfoo;//foo是在内部作用域内有效 }; //foo在外部用于是不可见的 console.log(typeoffoo);//"undefined" console.log(f()==f);//"function" console.log(f.name);//foo
既然,这么要求,那命名函数表达式到底有啥用啊?为啥要取名?
正如我们开头所说:给它一个名字就是可以让调试过程更方便,因为在调试的时候,如果在调用栈中的每个项都有自己的名字来描述,那么调试过程就太爽了,感受不一样嘛。
ps:JS中函数声明与函数表达式的不同
Js中的函数声明是指下面的形式:
functionfunctionName(){ }
这样的方式来声明一个函数,而函数表达式则是类似表达式那样来声明一个函数,如:
varfunctionName=function(){ }
可能很多朋友在看到这两一种写法时会产生疑惑,这两种写法差不多,在应用中貌似也都是可行的,那他们有什么差别呢?
事实上,js的解析器对函数声明与函数表达式并不是一视同仁地对待的。对于函数声明,js解析器会优先读取,确保在所有代码执行之前声明已经被解析,而函数表达式,如同定义其它基本类型的变量一样,只在执行到某一句时也会对其进行解析,所以在实际中,它们还是会有差异的,具体表现在,当使用函数声明的形式来定义函数时,可将调用语句写在函数声明之前,而后者,这样做的话会报错。