前言
变量是前端日常中使用的最频繁的语法。在开发过程，虽然知道怎么用，但是却不知道为什么，比如变量提升。
变量提升和函数提升在前端面试中经常会考察到，下面介绍它们是如何形成的以及有什么区别。
前置知识
在了解变量提升前，需要先了解一下js的执行过程，js执行分为两个过程：
- 词法分析阶段：词法分析主要包括：分析形参、分析变量声明、分析函数声明三个部分。通过词法分析将我们写的js代码转成可以执行的代码，接下来才是执行。
- 执行阶段。
一般来说变量和函数会在使用之前就会声明，但是也可以在使用之后再进行声明，这是因为函数声明和变量声明总是会被解释器悄悄地被"提升"到方法体的最顶部。被提升的操作就处于第一步的词法分析阶段。
变量提升(Hoisting)
- 只有声明被提升，初始化不会被提升
- 声明会被提升到当前作用域的顶端
例子1
console.log(num); // undefined
var num;
num = 6;预编译后
var num;
console.log(num); // undefined
num = 6; // 初始化不会被提升例子2
num = 6;
console.log(num); // 6 =》 提升了 var sum
var num;预编译后
var num;
num = 6;
console.log(num); // 6例子3
console.log(num); // undefined
var num = 6;预编译后
var num;
console.log(num);
num = 6;例子4
function hoistVariable() {
if (!foo) {
var foo = 5;
}
console.log(foo); // 5
}
hoistVariable();预编译后
function hoistVariable() {
var foo // 将if语句内的声明提升
if (!foo) { // !undefined = true
foo = 5;
}
console.log(foo); // 5
}
hoistVariable();例子5
var foo = 3;
function hoistVariable() {
var foo = foo || 5;
console.log(foo); // 5
}
hoistVariable();预编译后
var foo = 3;
function hoistVariable() {
var foo
foo = foo || 5; // 此时 等号右侧 foo 为 undefined
console.log(foo); // 5
}
hoistVariable();函数提升
- 函数声明和初始化都会被提升
- 函数表达式不会被提升
例子1：函数声明可被提升
console.log(square(5)); // 25
function square(n) {
return n * n;
}预编译后
function square = (n) {
return n * n;
}
console.log(square(5)); // 25例子2：函数表达式不可被提升
console.log(square); // undefined
console.log(square(5)); // square is not a function =》 初始化并未提升，此时 square 值为 undefined
var square = function (n) {
return n * n;
}预编译后
var square
console.log(square); // undefined =》赋值没有被提升
console.log(square(5)); // square is not a function =》 square 值为 undefined 故报错
square = function (n) {
return n * n;
}例子3
function hoistFunction() {
foo(); // 2
var foo = function() {
console.log(1);
};
foo(); // 1
function foo() {
console.log(2);
}
foo(); // 1
}
hoistFunction();预编译后
function hoistFunction() {
var foo
foo = function foo() {
console.log(2);
}
foo(); // 2
foo = function() {
console.log(1);
};
foo(); // 1
foo(); // 1
}
hoistFunction();优先级
- 函数提升在变量提升之前
- 变量的问题，莫过于声明和赋值两个步骤，而这两个步骤是分开的。
- 函数声明被提升时，声明和赋值两个步骤都会被提升，而普通变量却只能提升声明步骤，而不能提升赋值步骤。
- 变量被提升过后，先对提升上来的所有对象统一执行一遍声明步骤，然后再对变量执行一次赋值步骤。而执行赋值步骤时，会优先执行函数变量的赋值步骤，再执行普通变量的赋值步骤。
先解析，再按顺序执行
例子1
typeof a; // function
function a () {}
var a;
// typeof a; // function =》无论放在前面还是后面，解析后执行顺序都是一样预编译后
function a // => 声明一个function a
var a // =》 声明一个变量 a
a = () {} // => function a 初始化
typeof a; // function例子2
function b(){};
var b = 11;
typeof b; // number预编译后
function b; // => 声明一个function b
var b; // =》 声明一个变量 b
b = (){}; // =》 function b 初始化
b = 11; // =》 变量 b 初始化 =》变量初始化没有被提升，还在原位
typeof b; // number例子3：结合自执行函数
var foo = 'hello';
(function(foo){
console.log(foo);
var foo = foo || 'world';
console.log(foo);
})(foo);
console.log(foo);
// 依次输出 hello hello hello预编译后
var foo = 'hello';
(function (foo) {
var foo; // undefined;
foo= 'hello'; //传入的foo的值
console.log(foo); // hello
foo = foo || 'world';// 因为foo有值所以没有赋值world
console.log(foo); //hello
})(foo);
console.log(foo);// hello，打印的是var foo = 'hello' 的值（变量作用域）