這個 JavaScript 陷阱，我整整踩了 3 年！
作者：story
作為一名前端開發(fā)者，我曾經(jīng)在 JavaScript 的 this 綁定問題上栽了大跟頭。今天分享下這個三年前困擾了我好久的 JavaScript 陷阱。
作為一名前端開發(fā)者，我曾經(jīng)在 JavaScript 的 this 綁定問題上栽了大跟頭。這個看似簡單的概念，實際上隱藏著許多令人困惑的行為。分享下這個 3 年前困擾了我好久的 JavaScript 陷阱。
問題場景
最初，我經(jīng)常這樣寫代碼：
class UserService {
constructor() {
this.users = [];
}
fetchUsers() {
// 獲取用戶數(shù)據(jù)
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綁定有四種情況：
- 默認(rèn)綁定：在非嚴(yán)格模式下指向全局對象，嚴(yán)格模式下指向undefined
- 隱式綁定：由調(diào)用位置的上下文對象決定
- 顯式綁定：通過call、apply或bind方法指定
- new綁定：使用new操作符時綁定到新創(chuàng)建的對象
在上面的代碼中，setTimeout的回調(diào)函數(shù)使用了默認(rèn)綁定，這就是問題所在。
常見的錯誤解決方案
(1) 使用變量保存this
fetchUsers() {
const self = this;
setTimeout(function() {
self.users = ['Tom', 'Jerry', 'Spike'];
self.render();
}, 1000);
}這種方法雖然有效，但不夠優(yōu)雅，而且容易在復(fù)雜代碼中混淆。
(2) bind方法
這種方法更好一些，但仍然不是最佳實踐。
現(xiàn)代解決方案
(1) 箭頭函數(shù)（推薦）
箭頭函數(shù)不會創(chuàng)建自己的this上下文，而是繼承外部作用域的this。這是最簡潔也是最推薦的解決方案。
(2) 類字段語法
這種方式通過類字段定義方法，自動綁定this。
實際應(yīng)用中的陷阱
(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);
});
}
}歡迎補充。
責(zé)任編輯：趙寧寧
來源：
JavaScript
