前端 --弄懂JS的变量提升做这些题就够了

变量提升的知识点：juejin.cn/post/684490…

以下就是一些JS变量提升的题，没事可以拿出来做一做(答案已给出)

补充知识点

1、连等赋值：从右向左执行
2、var 三个变量 :
var a = b = c = 1;          相当于：var a = 1;b = 1; c = 1;
var a,b,c = 1;                 相当于：var a;var b;var c = 1;
var a = 1;b =1;c = 1;     相当于：var a = 1;var b = 1;var c =1;

例题

例一

var aaa = 100;
function f() {
    var aaa = 1;
    var fn = function () {
        console.log(aaa);
    }
    return fn;
}
var f2 = f();
f2();
答案：1

例二

console.log(a);
var a = 12,
    b = 12;
function fn() {
    console.log(a, b);
    var a = b = 13;
    console.log(a, b);
}
fn();
console.log(a, b);
答案：undefined undefined 12  13 13 12 13
（注意此题中，函数内部没有b这个变量，因此需要向上级查找，即全局作用域中的b；并且在函数内修改了这个变量的值，其实修改的就是全局中的b）

例三

var a = 4;
var f = 3;
function b(x, y, a) {
    alert(a);
    arguments[2] = 10;
    alert(a);
}
a = b(1, 2, f);
alert(a);
console.log(f);
答案：弹出：3 10 undefined 输出 3
（因为函数并没有返回值当没有返回值的时候就是undefined,因此在执行完a = b(1, 2, f)后，a的值是undefined）

例四

var a = { x: 12 };
var b = a;
b.c = b = { y: 12 };
a.c = b = { y: 100 };
console.log(a, b);
答案：a = {x:12,c:{y:100}} b = {y:100}
(连等赋值，.的优先级高于赋值，b.c = b = { y: 12 };因此在这一步执行的时候，先创建c这个属性，然后再去赋值)

例五

console.log(a);
a = 12;
function fn() {
    console.log(a);
    a = 13;
}
fn();
console.log(a);
答案：报错（没有变量提升，找不到a，因此报错；并且JS是单线程的，只要代码报错，那么就不再向下执行）

例六

console.log(a);
var a = 12;
function fn(a) {
    console.log(a);
    a = 13;
}
fn();
console.log(a);
答案：undefined undefined 12
（不给函数的形参赋值，就是undefined）

例七

console.log(a);
var a = 12;
function fn() {
    console.log(a);
    var a = 13;
}
fn();
console.log(a);
答案：undefined undefined 12
（这里第二个undefined是因为在函数内有私有的a,变量提升过，未赋值的undefined）

例八

var n = 10;
function outer() {
    var n = 15;
    function inner(n) {
        console.log(n); 
        function center() {
            n++;
            console.log(n); 
        }
        center();
    }
    inner(n);
}
outer();
答案：15 16
（这里用到的就是修改的变量值是上一级查找到的）

例九

var n = 20;
function outer() {
    ++n;
    function inner() {
        console.log(n++);
        function center() {
            n += 2;
            console.log(n);
        }
        center();
    }
    inner();
};
outer();
console.log(n)；
答案：21 24 24

例十

var n = 20;
function outer() {
    console.log(++n);
    function inner() {
        console.log(n++);
        var n = 100;
        console.log(--n);
        function center() {
            n += 2;
            console.log(n);
        }
        center();
    }
    inner();
};
outer();
console.log(n)
答案：21 NaN 99 101  21
（undefined ++，相当于JS中的加法，需要把他转化为数字类型再加，因此undefined转为数字类型为NaN,NaN再加仍是NaN）

例十一

alert(a); 
console.log("a" in window);
if (!("a" in window)) {
    var a = 10;
}
alert(a);
console.log(fn);
if (9 == 8) {
    function fn() {
        alert(2);
    }
}
答案：undefined true undefined undefined
(变量提升都是针对等号左边的，并且变量提升的时候不看条件是否成立)
（"a" in window的值是true或者false，意思就是看window这个对象中是否有a这个对象）

例十二

fn();
var fn = function(){console.log(0)}
fn();
function fn(){console.log(1)};
fn();
var fn = function(){console.log(2)};
fn();
答案：1 0 0 2

例十三

f = function () {return true};
g = function () {return false};
(function () {
    console.log(g);
    if (g() && [] == ![]) {
        f = function f() {
            return false
        };
    }
    function g() {
        return true
    };    
})();
alert(f());
alert(g())

例十四

var x = 5;
function fn() {
    return function (y) {
        console.log(y + (++x));
    }
}
var f = fn(6);
f(7);
fn(8)(9);
f(10);
console.log(x);

例十五

var x = 5;
function fn(x) {
    return function (y) {
        console.log(y + (++x));
    }
}
var f = fn(6);
f(7);
fn(8)(9);
f(10);
console.log(x);
答案：

例十六

var x = 0,
    y = 1;

function fn() {  //这里加一个形参X呢？
    x += 2;      //var x += 2?最后的结果呢？
    fn = function (y) {
        console.log(y + (--x));
    };
    console.log(x, y);
}
fn(3);
fn(4);
console.log(x, y);

例十七

function fn() {
    var i = 5;
    return function (n) {
        console.log(n * (--i))
    }
}
var f = fn();
f(10);
fn()(10);
fn()(20);
f(20);

例十八

var i = 2;
function fn() {
    var m = 0;
    i += 2;
    return function (n) {
        m = ++n + (--i)
        console.log(m++);
    }
}
var f = fn();
f(2);
f(3);
fn()(2);
fn()(3);
f(4);

例十九

var n = 10;

function fn() {
    var n = 20;

    function f() {
        n++;
        console.log(n);
    }
    f();
    return f;
}
var x = fn();
x();
x();
console.log(n);

例二十

console.log(f)
function f(){1}
console.log(f) 
var f = function(){2}
console.log(f) 
function f(){3}
console.log(f) 

例二十一

console.log(a);
    var a=12;
    function fn(){
        console.log(a);
        var a=13;
    }
    fn();
    console.log(a)

例二十二

 console.log(a);
    var a=12;
    function fn(){
          console.log(a);
          a=13
    }
    fn();
    console.log(a)

例二十三

 var foo=1;
    function bar(){
        if(!foo){
            var foo=10;
        }
        console.log(foo);
    }
    bar();
    console.log(foo);

例二十四

var n=13;
    function fn(n){
       console.log(n);
       var n=14;
       console.log(n);
    }
    fn(n);
    console.log(n)

例二十五

 var n = 13;
    function fn(){
         n = 15;
         console.log(n); // 15
    }
    fn();
    alert(n); // '15'

例二十六

var n = 10;
    function outer(){
        n = 15;
        function inner(){
            function center(){
                alert(n);
            }
            center();
        }
        inner();
    }
    outer()

例二十七

 var n=0;
    function a(){
        var n=10;
        function b(){
            n++;
            alert(n);
        }
        b();
        alert(n)
    }
    a();
    alert(n);

例二十八

console.log(num,str);
    var num = 18;
    var str = "lily";
    function fn2(){
        console.log(str,num);
        num = 19;
        str = "candy";
        var num = 14;
        console.log(str,num);
    }
    fn2();
    console.log(str,num);