再談this

關於 this，之前有寫一篇文章略微涉及到：就是這裏。

當時還沒理解得很深入，淺嘗輒止的感覺，也沒有很全面地總結 this 的指向和用法。

直到我昨晚看到了一篇博文，google搜索 js this 出來的第一篇文章，茅塞頓開，對於 this 有了更直觀更全面更細致更清晰的了解！我真希望每一個對 this 感到困惑的朋友可以看到這篇文章，寫得很好，感謝這位作者和他的文章。

先列舉一下他的觀點：

1.如果一個函數中有this，但是它沒有被上一級的對象所調用，那麽this指向的就是window，這裏需要說明的是在js的嚴格版中this指向的不是window，但是我們這裏不探討嚴格版的問題，你想了解可以自行上網查找。
2.如果一個函數中有this，這個函數有被上一級的對象所調用，那麽this指向的就是上一級的對象。
3.如果一個函數中有this，這個函數中包含多個對象，盡管這個函數是被最外層的對象所調用，this指向的也只是它上一級的對象。

特殊情況：

this永遠指向的是最後調用它的對象，也就是看它執行的時候是誰調用的。
(當this碰到return時)如果返回值是一個對象，那麽this指向的就是那個返回的對象，如果返回值不是一個對象那麽this還是指向函數的實例。

這樣順著脈絡一分析，像下面這種題目，是難不倒我們了：

function X(){
    return object = {
        name: ‘object‘,
        options: null,
        f1(x){
            this.options = x    // 3.x.f1 被調用後，這裏的 this 就是 object,this.options = options
            this.f2()   // 4.x.f1 被調用後，這裏的 this 就是 object,所以這裏就相當於 object.f2()
        },
        f2(){
            this.options.f2.call(this)  // 5.object.f2() 因為是 object 調用了 f2,所以這裏的 this 也是 object ，即 object.options.f2.call(object)
        }
    }
}

var options = {
    name: ‘options‘,
    f1(){},
    f2(){
        console.log(this) // 6.既然 object 都被當成了 this 傳進來了，那這裏的 this 毫無以為就是 object
    }
}

var x = X() // 1.x 是 X 的實例，X 被調用後返回一個對象 object，所以 x === object
x.f1(options)   // 2.x 調用了 f1，所以這裏的 this 就是 x，也就是 object，這句代碼相當於 x.f1.call(object,options)
 

這下可以理解 this 了吧~

再次感謝這篇博文以及他的作者。

[JavaScript]再談 this