提升
JavaScript 在执行之前,会先进行编译。如下代码:
fn();
console.log(i);
var i = 1;
function fn() {
console.log(i);
}
当执行到这段代码时,会进行两次声明。定义声明时在编译阶段进行,赋值声明会留在原地等待执行阶段。
实际代码执行顺序:
function fn() {
console.log(i);
}
var i;
fn(); // undefined
console.log(i); // undefined
i = 1;
4.1 变量的提升
通过 var
关键字声明的变量会存在提升,ES6 新增的 let
const
关键字声明的变量不会存在提升。
var a = 2;
console.log(a);
var a; // 编译
a = 2; // 执行
console.log(a); // 2(预想的 a 是 undefined 或者直接报错,但是由于变量声明的提升,声明会先进行)
4.2 函数表达式的提升
通过函数表达式声明的函数与变量的声明提升是一样的,但是函数表达式的声明提升,不会对函数进行引用(即该变量并没有进行赋值),
如下代码:
console.log(fn(1)); // TypeError, fn is not a function
var fn = function (a) {
return a;
};
fn 存在声明的提升,但是在调用时 fn 未被赋值,此时的值是 undefined
所以如果被当作函数进行调用,就会报错。
上面的代码相当于:
var fn;
console.log(fn(1));
fn = function (a) {
return a;
};
此处需要注意的是,对于具名的函数表达式,名称标识符在赋值之前也无法在所在作用域中使用,如下:
foo(); // TypeError
bar(); // ReferenceError
var foo = function bar() {
// ...
};
4.3 函数声明的提升
使用关键字 function
声明的函数也存在提升,不过函数声明被置于执行环境顶部,即使调用函数的代码在声明函数之前也可以正确访问。
foo(); // 可以在函数声明前进行调用
function foo() {
console.log(2); // 2
}
4.4 提升的优先级
函数声明 > 函数表达式 = 变量
函数声明和变量声明都会被提升,但是函数声明的优先级最高。这里的优先级是指进行提升时函数会首先被提升,然后才是变量。
如果函数声明与变量声明的名称一致,那么变量的声明会被当作重复的声明被忽略。
foo(); // 1
var foo;
function foo() {
console.log(1);
}
foo = function () {
console.log(2);
};
对于两个相同的函数声明,后面的函数声明仍然会覆盖之前的函数声明:
foo(); // 3
function foo() {
console.log(1);
}
var foo = function () {
console.log(2);
};
function foo() {
console.log(3);
}
函数的声明不会被条件判断所控制,如下代码不管条件判断是否成立,函数声明都会被提升(ES6 后引入了块级作用域,所以此处可能会报错:TypeError: foo is not a function):
foo(); // "b"
var a = true;
if (a) {
function foo() {
console.log("a");
}
} else {
function foo() {
console.log("b");
}
}