likes
comments
collection

能“提升”的不只是变量,函数声明也可以,那谁更“吊”?

作者站长头像
站长
· 阅读数 1

思维导图

能“提升”的不只是变量,函数声明也可以,那谁更“吊”?

回顾作用域

在编译的代码生成阶段,编译器会创建在对应作用域创建变量,将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);
}

总结 声明本身会被提升,而包括函数表达式的赋值在内的赋值操作并不会提升。