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

10次阅读

共计 1217 个字符，预计需要花费 4 分钟才能阅读完成。

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();