能“提升”的不只是变量,函数声明也可以,那谁更“吊”?
思维导图
回顾作用域
在编译的代码生成阶段,编译器会创建在对应作用域创建变量,将2者关联起来。
先声明后赋值
讲到var
声明的变量会进行“变量提升”,大家可能都觉得不稀奇,但是我这里还是写出来。
a = 2;
var a;
console.log(a); // 2
console.log( a ); // undefined
var a = 2;
var
声明的变量会进行“变量提升”
上面的代码会变成这样
var a;
a = 2;
console.log(a); // 2
var a; // 声明未赋值默认值是undefined
console.log( a ); // undefined
a = 2;
编译器先“动手”
总结: 变量和函数在内的所有声明都会在任何代码被执行前首先被处理。
var a = 2;
console.log( a ); // 2
上面代码可以看出
var a; // 编译器声明(先,不管在源代码的哪个位置)
a = 2;// 代码执行赋值
console.log( a ); // 2
函数提升
总结: 函数声明会被提升,但是函数表达式却不会被提升。
foo();
function foo() {
console.log(a); // undefined
var a = 2;
}
上面代码可以写成下面这样
function foo() {
var a;
console.log(a); // undefined
a = 2;
}
foo();
函数表达式不用提升,函数表达式就是把一个函数赋值给一个变量,既然都是赋值,那么自然不会提升,只有声明才会提升。即使是具名的函数表达式,名称标识符在赋值之前也无法在所在作用域中使用。
foo(); // TypeError 这里foo是默认值undefined(var的原因)
bar(); // ReferenceError
var foo = function bar() {
console.log(a); // undefined
var a = 2;
}
函数优先
函数声明和变量声明都会被提升。但是函数会首先被提升,然后才是变量
foo(); // 1
var foo;
function foo() {
console.log(1);
}
foo = function () {
console.log(2);
};
上面代码foo()
是1不是TypeError。所以函数声明是比变量声明更优先。
foo(); // TypeError: foo is not a function
function foo() {
console.log(2);
};
var foo; // 被忽略
函数声明还是可以覆盖
foo(); // 3
function foo() {
console.log(1);
}
var foo = function () {
console.log(2);
};
function foo() {
console.log(3);
}
总结 声明本身会被提升,而包括函数表达式的赋值在内的赋值操作并不会提升。
转载自:https://segmentfault.com/a/1190000042300923