JS 变量提升和函数提升及其优先级

为什么要进行变量提升和函数提升

在JS引擎读取js代码的过程中，分为两步：

• 第一步是整个js代码的解析解读
• 第二步是执行

在js代码执行之前，浏览器的解析器在遇到 var 变量名 和 function 整个函数 提升到当前作用域的最顶端。

1. 变量提升

在ES6出来之前，JS并没有块级作用域这一说，只有全局作用域和局部作用域。

变量提升指的是使用 var 声明的变量提升到所在作用域的最顶端。

console.log(a); // undefined
var a = 'hello';
console.log(a); // 'hello'

解析的过程就相当于

var a;
console.log(a);
a = 'hello';
console.log(a);

2. 函数提升

函数提升只针对具名函数，对赋值的匿名函数，不存在函数提升。

函数提升是将整个函数提升到作用域最前端。

console.log(a); // f a(){ console.log('hello') }
console.log(b); // 
function a() {
   console.log('hello');
}
var b = function() {
   console.log('world');
};

解析的过程就相当于

var a = function() {
   console.log('hello');
}
var b;
console.log(a);
console.log(b);
b = function() {
   console.log('world');
};

3. 变量提升和函数提升的优先级

函数提升优先级高于变量提升，且不会被同名变量声明覆盖，但是会被变量赋值后覆盖。

而且存在同名函数与同名变量时，先执行函数。

console.log(a); // f a(){ console.log(2); }
console.log(a()); // 2
var a = 1;
function a(){
    console.log(2);
}
console.log(a); // 1
a = 3;
console.log(a()); // Uncaught TypeError: a is not a function

解析的过程就相当于

var a = function() {
    console.log(2);
}
var a;
console.log(a);
console.log(a());
a = 1;
console.log(a);
a = 3;
console.log(a());