这个 JavaScript 陷阱，我整整踩了 3 年！-51CTO.COM

作为一名前端开发者，我曾经在 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);
            });
    }
}

欢迎补充。