這個 JavaScript 陷阱，我整整踩了 3 年！
作者：story
作為一名前端開發者，我曾經在 JavaScript 的 this 綁定問題上栽了大跟頭。今天分享下這個三年前困擾了我好久的 JavaScript 陷阱。
作為一名前端開發者，我曾經在 JavaScript 的 this 綁定問題上栽了大跟頭。這個看似簡單的概念，實際上隱藏著許多令人困惑的行為。分享下這個 3 年前困擾了我好久的 JavaScript 陷阱。
問題場景
最初，我經常這樣寫代碼：
class UserService {
constructor() {
this.users = [];
}
fetchUsers() {
// 獲取用戶數據
setTimeout(function() {
this.users = ['Tom', 'Jerry', 'Spike']; // 這里的this是undefined
this.render(); // 報錯：Cannot read property 'render' of undefined
}, 1000);
}
render() {
console.log(this.users);
}
}
const service = new UserService();
service.fetchUsers();這段代碼看起來很合理，但實際運行時卻會報錯。問題出在哪里？
深入理解this綁定
JavaScript中的this綁定有四種情況：
- 默認綁定：在非嚴格模式下指向全局對象，嚴格模式下指向undefined
- 隱式綁定：由調用位置的上下文對象決定
- 顯式綁定：通過call、apply或bind方法指定
- new綁定：使用new操作符時綁定到新創建的對象
在上面的代碼中，setTimeout的回調函數使用了默認綁定，這就是問題所在。
常見的錯誤解決方案
(1) 使用變量保存this
fetchUsers() {
const self = this;
setTimeout(function() {
self.users = ['Tom', 'Jerry', 'Spike'];
self.render();
}, 1000);
}這種方法雖然有效，但不夠優雅，而且容易在復雜代碼中混淆。
(2) bind方法
這種方法更好一些，但仍然不是最佳實踐。
現代解決方案
(1) 箭頭函數（推薦）
箭頭函數不會創建自己的this上下文，而是繼承外部作用域的this。這是最簡潔也是最推薦的解決方案。
(2) 類字段語法
這種方式通過類字段定義方法，自動綁定this。
實際應用中的陷阱
(1) 事件處理器
(2) Promise鏈中的this
class DataService {
fetchData() {
return fetch('/api/data')
.then(function(response) {
// 這里的this會丟失
this.processData(response);
});
// 正確方式
return fetch('/api/data')
.then((response) => {
this.processData(response);
});
}
}歡迎補充。
責任編輯：趙寧寧
來源：
JavaScript
