var的变量提升和函数提升 - js篇

什么是提升（Hosting）？
引擎会在解释JavaScript代码之前首先对齐进行编译，编译过程中的一部分工作就是找到所有的声明，并用合适的作用域将他们关联起来，这也正是词法作用域的核心内容。
简单说就是在js代码执行前引擎会先进行预编译，预编译期间会将变量声明与函数声明提升至其对应作用域的最顶端。举例来说：

• var变量提升

console.log(a);
var a = 3;

• 预编译后的代码结构可以看做如下：

var a; // 将变量a的声明提升至最顶端，赋值逻辑不提升。
console.log(a); // undefined
a = 3; // 代码执行到原位置即执行原赋值逻辑

---

• 函数提升

console.log(foo1); // [Function: foo1]
foo1(); // foo1
console.log(foo2); // undefined
foo2(); // TypeError: foo2 is not a function
function foo1 () {
    console.log("foo1");
};
var foo2 = function () {
    console.log("foo2");
};

即函数提升只会提升函数声明，而不会提升函数表达式。

---

• 再举一个小例子：

var a = 1;
function foo() {
    a = 10;
    console.log(a);//10
    return;
    function a() {};
}
foo();
console.log(a);//1

• 上面的代码块经过预编译后可以看做如下形式（只分析foo方法内部情况）：

var a = 1; // 定义一个全局变量 a
function foo() { // 首先提升函数声明function a () {}到函数作用域顶端， 然后function a () {}等同于 var a =  function() {};最终形式如下
    var a = function () {}; // 定义局部变量 a 并赋值。
    a = 10; // 修改局部变量 a 的值，并不会影响全局变量 a
    console.log(a); // 打印局部变量 a 的值：10
    return;
}
foo();
console.log(a); // 打印全局变量 a 的值：1

---

• 函数提升与变量提升的优先级

console.log(a);    // f a() {console.log(10)}
console.log(a());    //  undefined
var a = 3;
function a() {
  console.log(10) //10
}
console.log(a)   //3
a = 6;
console.log(a());  //a is not a function;

• 上面的代码块经过预编译后可以看做如下形式：

var a = funtion () {
  console.log(10)
}
var a;
console.log(a);    // f a() {console.log(10)}
console.log(a());  //  undefined
a = 3;
console.log(a)   //3
a = 6;
console.log(a());   //a() is not a function;

由此可见函数提升要比变量提升的优先级要高一些，且不会被变量声明覆盖，但是会被变量赋值之后覆盖。

原文参考链接

留下足迹～