JS閉包問題(二)

在之前的JS閉包問題(一)文章中大概介紹了一下JS閉包,同時講了閉包與變量之間的問題,今天我們繼續聊閉包,聊聊閉包與this對象之間的問題。

我們知道,this指向當前對象,而在全局環境中,this就等于window對象,舉個例子:

var name = "The Window";
var object = {
    name: "My Object",
    getName: function(){
        return this.name;
    }
}
alert(this);   // [object Window]
alert(this.name);    // "The Window"
alert(object.getName());     // "My Object"

上面例子很好理解,在全局環境中,name == window.name == this.name,而object.getName中的this指向object。

那么遇到閉包又會是什么樣的結果呢?我們接著往下看:

var name = "The Window";
var object = {
    name: "My Object",
    getName: function(){
        return function(){
            return this.name;
        }
    }
}
alert(object.getName()());   // "The Window"

通常情況下,匿名函數的執行環境具有全局性,this對象指向window,所以上面例子中返回 "The Window"。但是,也存在例外的情況:

① 通過call()或者apply()改變函數的執行環境,這時this會指向其他對象

比如還是上面這個例子,只不過最后改成這樣:

alert(object.getName().call(object));    // "My Object"

雖然還是執行同樣一個匿名函數,但是執行環境卻強制改成了object,這時的this就指向了object。

② 給HTML元素添加事件,這時匿名函數中的this會指向該事件所在元素

例如:

<input type="button" id="btn" value="點擊我吧" />
var oBtn = document.getElementById("btn");
oBtn.onclick = function(){
    alert(this.value);   // "點擊我吧"
}
oBtn.addEventListener('click',function(){
    alert(this.value);   // "點擊我吧"
});

可以看出,不管哪種綁定事件方式,匿名函數中的this對象均指向oBtn。

總而言之,this對象是在運行時基于函數的執行環境綁定的。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容