理清Js變量等面試問題 一系列腦洞問題及解決思路

第0種 解析順序

    function a() {
        b = function () {
            console.log(1)
        }

        return this;
    }

    var b = function () {
        console.log(2)
    }

    function b() {
        console.log(3)
    }

    b();

    a().b();

    b();

1.首先，你要明白的是3永遠不可能打印出來。這涉及到函數的聲明方式和執行順序問題。
直接用function的方式聲明的函數，函數可以在function聲明之前被調用，這說明在代碼運行之前就已經調用了。
再次聲明的函數var b會替代原有的函數b

2.第二點： 第一個函數中的this指向。一個點：函數中的this是在運行時候決定的，而不是函數定義時， 具體就看誰調用了this.在第一個函數中，沒有調用對象，在瀏覽器中，this就指向window

3.第三點： 還是第一個函數中，不使用var標識符直接定義的變量都屬於全局變量,也就是說第一個函數中的b是掛載到window上的。

第1種 變量提升

(function(){
    a = 5;
    alert(window.a);
    var a = 10;
    alert(a);
})();

喜聞樂見！看見一堆的變量a就知道了，這是變量提升的問題了，只需要自己模擬出執行順序就行了.

等同於：

var  a; // 第一步：變量提升
a = 5; // 後面的就直接拿上來
alert(window.a);
a = 10;
alert(a);

同類型題目：

var a=1;
function test(){
    console.log(a);
    var a=1;
}
test();

看見var就把它提升到最前面就行了，一樣畫瓢解決：

var a;
a = 1;

function test() {
  var a;
  console.log(a);
  a = 1;
}

還有同類型的題目一樣可以依葫蘆畫瓢解決:

 var foo = 'hello';
    (function (foo) {
        console.log(foo);
        var foo = foo || 'world';
        console.log(foo);
    })(foo);
    console.log(foo);

等。

解決這些問題的關鍵是：不要想當然，動手一步一步模擬執行順序，模擬變量提升情況

第二種 面向對象問題（ 等待更新 ）