this變態面試題

let length = 10
function fn(){console.log(this.length)}

let obj = {
    length: 5,
    method(fn){
        fn()
        arguments[0]()
    }
}

obj.method(fn, 1) // 輸出是什麼？

錯誤答案：

10

1

爲什麼不是10和1？

考點一：打印的第一個值爲什麼不是10

大家很容易想到obj.method(fn)的結果不會是5，因爲console.log(this.length)是在全局中打印出來的，所以自然不會是obj.length。

那爲什麼不是10呢？let已經聲明瞭length=10了呀？因爲全局使用let並不會掛載到window上面，而全局的this會指向window，所以打印出來的this.length不是let length = 10聲明的length，而是window.length。

 

考點二：打印的第一個值是什麼

答案：不確定。

因爲第一個打印的this.length會指向window，而window中的length屬性表示你當前頁面有幾個iframe，有一個則會打印1，兩個則會打印2，這個值是根據實際情況確定的。

 

考點三：打印的第二個值是什麼

這個地方考察你對function中的arguments屬性熟不熟悉。function中會有一個默認的屬性arguments，它表示傳入參數的實參類數組對象，有length屬性。

我們可以將上面代碼改寫爲：

let obj = {
    length: 5,
    method(fn){
        fn()
        //arguments[0]() 源代碼
        //arguments[0].call(arguments) call的第一個參數爲指定的this，我們這裏顯示指定
        //fn.call(fn) arguments[0]就是fn，
        fn.call(fn)
    }
}

前面我們提到了arguments，function fn(){console.log(this.length)} 中的this等於arguments，它有兩個實參，因此arguments的length值爲2。

所以這道面試題打印出的正確結果應爲：

不確定

2