函数的定义方式
- 函数声明
- 函数表达式
- new Function 构造函数
其中,最常用的是函数声明和函数表达式,但这两者有什么区别呢?
区别1:函数声明必须始终带有一个标识符(Identifier),也就是我们所说的函数名,而函数表达式则可以省略。
下面看看具体的例子。
function fn() {}; // 函数声明
var fn = function() {}; // 函数表达式
// 函数表达式的另一种写法
var fn = function foo() {};
函数声明的典型格式
function 函数名称 (参数:可选){
函数体
}
function functionName(arg1, arg2, ...){
<!-- function body -->
}
函数表达式的典型格式
var valiable = function 函数名称(可选)(参数:可选){
函数体
}
var variable = function(arg1, arg2, ...){
<!-- function body -->
}
var variable = function functionName(arg1, arg2, ...){
<!-- function body -->
}
通过上面的比较,我们可以看出:如果不声明名称,那么肯定是函数表达式。
也就是说:如果没有函数名称,那么肯定不是函数声明方式。
如果声明了函数名称的话,如何判断是函数声明还是函数表达式呢?
ECMAScript是通过它所在的上下文来判断的,如果function fn() {}是作为赋值表达式的一部分的话,那它就是一个函数表达式,否则就是函数声明。
区别2:变量或函数声明提前
先看看下面的代码,运行结果是什么?
foo();
function foo() {
console.log("执行了 foo ...");
}
bar();
var bar = function() {
console.log("执行了 bar ...");
}
此时,我们可以看到:foo()正常输出结果,而bar()报错。
那如果代码改为下面这种:
function foo() {
console.log("执行了 foo ...");
}
foo();
var bar = function() {
console.log("执行了 bar ...");
}
bar();
此时,我们可以看到: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 ...");
}
从上面的代码我们可以得出结论:`函数声明会被提升到当前作用域的顶部,函数表达式则不会。
区别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的错。