面試題之arguments[0]()

題目

var length = 10;
function fn(){
    console.log(this.length)
}
var obj = {
    length: 5,
    method: function(fn) {
        arguments[0]()
    }
}
obj.method(fn)

// 這段代碼中最終輸出什麼？
// fn 指向 this的指向是誰？

答疑

這裏沒有輸出 5，也沒有輸出 10，反而輸出了 1，有趣。這裏 arguments 是javascript的一個內置對象，是一個類數組（就是長的比較像數組，可是欠缺一些數組的方法，能夠用slice.call轉換成數組），其存儲的是函數的參數。也就是說，這裏arguments[0]指代的就是你method函數的第一個參數：fn，因此arguments0的意思就是：fn()。不過這裏有個疑問，爲什麼這裏沒有輸出5呢？我method裏面用this，不該該指向obj麼，至少也會輸出10呀，這個1是鬧哪樣？實際上，這個1就是arguments.length，也就是本函數參數的個數。爲啥這裏的this指向了arguments呢？由於在Javascript裏，數組只不過使用數字作屬性名的方法，也就是說：arguments0的意思，和arguments.0()的意思差很少（固然這麼寫是不容許的），你更能夠這麼理解：

arguments = {
    0: fn, //也就是 functon() {alert(this.length)} 
    1: 第二個參數, //沒有 
    2: 第三個參數, //沒有
    ..., 
    length: 1 //只有一個參數
}

因此這裏 alert 出來的結果是 1 。

若是要輸出 10 應該咋寫呢？

var length = 10;
function fn(){
    console.log(this.length)
}
var obj = {
    length: 5,
    method: function(fn) {
        fn()
    }
}
obj.method(fn)

若是要輸出 5 應該咋寫呢？

var length = 10;
function fn(){
    console.log(this.length)
}
var obj = {
    length: 5,
    method: fn
}
obj.method()

或者

var length = 10;
function fn(){
    console.log(this.length)
}
var obj = {
    length: 5,
    method: function(fn) {
        fn.call(obj)
        // fn.call(this)
    }
}
obj.method(fn)

擴展

var length = 5
function fun(){
    console.log(this.length)
}
var arr = [fun]

fun()     // ？
arr[0]()  // ？

參考

https://www.zhihu.com/question/21466212