笔试题-Js前端变量提升的问题

今天做笔试的时候遇到了一个问题,是关于变量提升的

var b = 2;//全局作用域,遇到var 和 function提升

function s1() {
    function s2() {
        b++;
        console.log(b);
    }
    var b = 3;//提升变量,b的值变成了3
    s2();//执行函数,b自增结果为4
}
s1(); //4

输出结果是4,这个好理解,s2内部变量提升了,重新赋值为3
我当初琢磨着是不是把s2()和var b = 3换个位置,会不会输出是3,结果我错了

看下面一个代码

var b = 2;

function s1() {
    function s2() {
        b++;
        console.log(b);
    }
    s2();
    var b = 3;
}
s1(); //NaN

为什么输出是NaN,因为s2里面的b是undefined,但是为什么呢,不是变量提升了,var b = 3赋值了一个新的吗,或者顺序执行下去,用最上面的全局变量var b = 2呢
这里涉及一个变量提升的问题

变量提升

先来看一个例子

console.log(a);//undefined
var a = "hello world!"

为什么输出是undefined呢,因为a其实已经在调用前被声明了,只是没有被初始化,JavaScript会把作用域里面的所有变量和函数提到函数的顶部声明,
所以上面的代码相当于

var a;

console.log(a);

a = "hello world!"

所以上面的NaN问题相当于

var b = 2;

function s1() {
    var b;
    function s2() {
        b++;
        console.log(b);
    }
    s2();
    b = 3;

}
s1(); 

所以就是NaN啦~

扩展

1.隐式全局变量
不带var的全局变量,处于最高层,但是不推荐

g = 10;
console.log(g);//10

利用隐式全局变量扩充上面的笔试题

var b = 2;

function s1() {
    function s2() {
        b++;
        console.log(b);
    }
    s2();
    b = 3;

}
s1(); //3

为什么为3,因为它用了外部的var b = 2;s1内部没有var 所以就没有变量声明了,隐式全局变量是后面才执行的,所以无关

那么去掉外部的var b = 2呢

function s1() {
    function s2() {
        b++;
        console.log(b);
    }
    s2();
    b = 3;

}
s1();

那就是undefined报错了,在s2()执行的时候,b没有全局或局部声明,也没有变量提升,所以就报错啦~
收获满满~
END