JavaScript变量声明与提升

Posted 2020-10-17 心欲无痕

　　一直以来对变量提升都是比较模糊的，今天特地看了一下这个知识点，总结一下。

　　1、举个最简单的例子来说一下什么是变量提升吧。　

function foo(){
    console.log(x);  // undefined
    var x = 12;
    console.log(x)  // 12
}
foo();

　　由于变量声明提升，其实上述代码相当于

function foo(){
    var x;
    console.log(x);  // undefined
    x = 12;
    console.log(x)  // 12
}
foo();

　　可以看出，变量提升其实是变量声明的提升，变量值并没有提升。

　　现在将上述代码变一下。

var x = 123;
function foo(){
    console.log(x);  // undefined
    var x = 12;
    console.log(x)  // 12
}
foo();
console.log(x) // 123  这里之所以结果为123，是因为在函数内声明的变量x虽然与函数外同名，但由于是在函数内且用关键字var来声明的，所以函数内的x只是一个局部变量，函数外无法访问到

 

　　2、在函数内变量声明前使用return关键字。

function too(){
    console.log(y+"*"); // undefined*
    y = 10;
    console.log(y+"**");  // 10**
    return;  // 函数内return后的语句不会执行
    console.log(y+"***");
    var y = 2;
    console.log(y+"****")
}
too();

　　因为变量声明提升，且函数内使用了return关键字，故函数内return后面的语句并不会执行。所以上述语句相当于

function too(){
    var y;
    console.log(y+"*"); // undefined*
    y = 10;
    console.log(y+"**");  // 10**
}
too();

 

　　3、控制语句内声明变量（如for循环或if语句中）

　　（1）、for语句内声明变量：

for(var i=0;i<5;i++){}
console.log(i)  // 5

　　运行后可以看出，for语句内声明的变量，语句外仍然可以使用。

　　

　　（2）、if语句内声明变量：

if(100){
    var x = 30;
}
console.log(x)  // 30

　　运行后，可以看出，在if语句内声明的变量在if语句外仍然可以使用。

　　

　　（3）、在if语句内声明一个与外部同名的变量：　

var x = 123;
if(100){
    var x = 30;
}
console.log(x) // 30

　　运行后，可以看出if语句内的变量会覆盖if语句外声明的变量。