一文帶你搞懂JavaScript中this綁定問題

更新時間：2026年04月01日 08:32:33 作者：卷簾依舊

在JavaScript中,當(dāng)在回調(diào)函數(shù)中使用this時,經(jīng)常會出現(xiàn)this指向丟失的問題,本文檔詳細(xì)分析了這個問題及其解決方案,有需要的小伙伴可以參考下

問題描述

在JavaScript中，當(dāng)在回調(diào)函數(shù)（如setTimeout）中使用this時，經(jīng)常會出現(xiàn)this指向丟失的問題。本文檔詳細(xì)分析了這個問題及其解決方案。

示例代碼分析

原始代碼

var obj = {
    count: 0,
    cool: function coolFn() {
        var self = this;

        if (self.count < 1) {
            setTimeout(function timer() {
                self.count++;
                console.log('awesome?');
            }, 100);
        }
    }
}

obj.cool();

代碼執(zhí)行流程

步驟1: 執(zhí)行 obj.cool()，調(diào)用cool方法
步驟2: 在cool方法內(nèi)部，this指向obj對象，通過var self = this;保存這個引用
步驟3: 條件判斷 self.count < 1 為true（初始值為0）
步驟4: 設(shè)置setTimeout定時器，延遲100ms執(zhí)行
步驟5: cool方法執(zhí)行完畢
步驟6: 100ms后定時器觸發(fā)，執(zhí)行回調(diào)函數(shù)
步驟7: self.count++ 將count變?yōu)?，輸出"awesome?"

var self = this的工作原理

1. 調(diào)用時的this指向

當(dāng)執(zhí)行 obj.cool() 時，根據(jù)隱式綁定規(guī)則，函數(shù)內(nèi)的this指向obj對象本身。

obj.cool();  // 此時cool函數(shù)內(nèi)的this指向obj

2. 保存this引用

var self = this;

這行代碼的作用：

將當(dāng)前this（指向obj）的引用保存到局部變量self中
self變量存儲的是對obj對象的引用
通過閉包機(jī)制，這個引用在定時器回調(diào)函數(shù)中仍然可訪問

3. 解決this丟失問題

如果沒有保存this引用：

// ? 錯誤示例 - this指向丟失
setTimeout(function timer() {
    this.count++;  // this指向全局對象或undefined，不是obj
}, 100);

// ? 正確示例 - 使用self
setTimeout(function timer() {
    self.count++;  // self仍指向obj
}, 100);

閉包的作用

timer回調(diào)函數(shù)形成了閉包：

function coolFn() {
    var self = this;  // 外層函數(shù)作用域

    return function timer() {
        // 內(nèi)層函數(shù)可以訪問外層函數(shù)的self變量
        self.count++;
    };
}

閉包特性：

即使coolFn函數(shù)執(zhí)行完畢，self變量仍然存在于內(nèi)存中
timer函數(shù)引用著self變量，所以不會被垃圾回收
定時器觸發(fā)時，仍然可以訪問到保存的self引用

三種解決this綁定問題的方法

方法1：使用箭頭函數(shù)（推薦）

var obj = {
    count: 0,
    cool: function coolFn() {
        if (this.count < 1) {
            setTimeout(() => {
                // 箭頭函數(shù)不改變this指向，this仍然指向obj
                this.count++;
                console.log('awesome?');
            }, 100);
        }
    }
}

obj.cool();

特點(diǎn)：

箭頭函數(shù)沒有自己的this，繼承外層作用域的this
代碼簡潔優(yōu)雅
ES6語法，現(xiàn)代瀏覽器和Node.js都支持

方法2：使用bind綁定

var obj = {
    count: 0,
    cool: function coolFn() {
        if (this.count < 1) {
            setTimeout(function timer() {
                this.count++;
                console.log('awesome?');
            }.bind(this), 100);  // 使用bind將this綁定到當(dāng)前函數(shù)的this
        }
    }
}

obj.cool();

特點(diǎn)：

使用Function.prototype.bind方法顯式綁定this
代碼稍長，但意圖明確
兼容性較好（ES5）

方法3：使用var self = this（經(jīng)典方案）

var obj = {
    count: 0,
    cool: function coolFn() {
        var self = this;  // 保存this引用

        if (this.count < 1) {
            setTimeout(function timer() {
                self.count++;  // 使用保存的引用
                console.log('awesome?');
            }, 100);
        }
    }
}

obj.cool();

特點(diǎn)：