如何在回调与匿名函数中保持this作用域？类加载JSON赋值遇问题

我太懂这种挫败感了——明明init()里的console.log能正常输出JSON数据，可一给类实例属性赋值就报this is undefined，箭头函数确实是解决这个问题的关键，我来给你拆解怎么整合它！

问题根源 #

你遇到的情况，大概率是在处理JSON的回调函数（比如异步请求的then回调、数组遍历的forEach回调）里用了普通函数，这类函数会绑定自己的this上下文，不再指向你的类实例。比如下面这种错误写法：

class User {
  constructor() {
    this.username = "";
    this.email = "";
  }

  init() {
    // 模拟加载JSON数据的异步操作
    fetch("/user-data.json")
      .then(function(res) { return res.json(); })
      .then(function(data) {
        console.log(data); // 这里能正常打印数据
        this.username = data.username; // 报错：this is undefined！
        this.email = data.email;
      });
  }
}

普通函数作为then的回调时，this会指向全局对象（非严格模式）或者undefined（严格模式），根本不是你的User实例，自然没法赋值。

用箭头函数解决的正确姿势 #

箭头函数的特性就是不绑定自己的this，它会继承外层作用域的this——也就是init()方法里的this，也就是你的类实例。把回调换成箭头函数就行：

class User {
  constructor() {
    this.username = "";
    this.email = "";
  }

  init() {
    fetch("/user-data.json")
      .then(res => res.json()) // 箭头函数
      .then(data => {
        console.log(data);
        this.username = data.username; // 现在this指向User实例啦！
        this.email = data.email;
      });
  }
}

如果是同步遍历JSON属性的场景（比如用forEach循环赋值），同样换成箭头函数：

init() {
  const userData = { username: "safetycopy", email: "xxx@xxx.com" };
  // 遍历属性赋值
  Object.keys(userData).forEach(key => {
    this[key] = userData[key]; // this正常指向实例
  });
}

备选方案：提前保存this #

如果你不想用箭头函数，也可以在init()开头把实例的this存到一个变量里（比如self或者that），之后在回调里用这个变量代替this：

init() {
  const self = this; // 保存实例的this
  fetch("/user-data.json")
    .then(function(res) { return res.json(); })
    .then(function(data) {
      self.username = data.username; // 用self代替this
      self.email = data.email;
    });
}

不过箭头函数的写法更简洁直观，也是现在社区推荐的方式。

关键总结 #

只要确保你执行赋值操作的代码块里，this指向的是你的类实例就行——箭头函数通过继承外层作用域的this，完美解决了回调函数里this上下文丢失的问题，直接替换掉原来的普通函数回调就搞定啦！

内容的提问来源于stack exchange，提问作者safetycopy