Javascript中的变量提升、函数提升及变量访问原则

1、变量提升

什么是变量提升？
在函数体内声明的变量，无论你是在函数的最底端还是中间声明的，那么都会把该变量的声明提升到函数的最顶端(相当于第一行)，但是只是提升变量的声明，不会赋值。

var num = 10;
fun(); //输出结果为undefined
function  fun(){
    console.log(num);
    var num = 20;
}

/*上面这个函数相当于：
    function  fun(){
        var num;
        console.log(num);
        num = 20;
    }
*/

2、函数提升

什么是函数提升？
在JavaScript中以函数声明的方式创建的函数就跟用var创建的变量一样，它们的声明都会提前声明，这就使得我们在JavaScript中可以调用函数在前面，而声明函数在后面，这就是函数提升。

func();
function func(){
    alert(“函数执行了！”);
}
/*
上面这段代码相当于：
function func(){
    alert(“函数执行了！”);
}
func();
*/

3、函数与变量同名时的变量提升

alert(fun); // 最终输出结果为：输出fun函数体
function fun(){
    alert(“我是一个函数”);
}
var fun = “我是一个变量”;
alert(fun); // 输出：我是一个变量

/* 为什么第一个alert输出的是fun函数体，而第二个alert输出的是“我是一个变量”？
因为用var声明的变量及function声明的函数在执行前都会将声明提升到最前面，如果变量与函数同名，
那么在声明的时候会忽略变量，只提升函数声明！ */

/*
上面这段代码相当于：
function fun(){
    alert(“我是一个函数”);
}
alert(fun);
fun = “我是一个变量”;
alert(fun);
*/

4、变量搜索原则(变量访问原则)

在JavaScript中变量的访问(搜索)是有原则的：

1）、首先在访问变量的作用域(函数)中查找该变量，如果找到直接使用
2）、如果没有找到，去上一级作用域中查找，如果找到直接使用
3）、如果还是没有找到，则再去上一级作用域中查找，知道全局作用域
4）、如果找到了就直接使用，如果没有找到则报错

var num = 123;
function foo1(){
    function foo2(){
        console.log(num);
    }
    /*当调用foo2时，会首先去foo2这个作用域中查找是否有num变量，结果没找到则去上一级作用域(即foo1)中查找是否有foo1变量，
    结果还 是没找到，则再去上一级作用域(全局作用域)中查找，结果找到了，则拿来使用*/
    foo2();
}

5、变量提升、变量搜索机制经典面试题

fun();

console.log(b);
console.log(c);
console.log(a);

function fun(){
    var a = b = c = 9;
    console.log(a);
    console.log(b);
    console.log(c);
}