前端 --弄懂JS的變數提升做這些題就夠了

不要情緒發表於2020-02-07

變數提升的知識點:juejin.im/post/5e3d0f…

以下就是一些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
(這裡用到的就是修改的變數值是上一級查詢到的)
複製程式碼

前端 --弄懂JS的變數提升做這些題就夠了

例九

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);
複製程式碼

相關文章