为什么前端代码中 let _self = this

一个前端小白的小白问题。

let _self = this;

在我阅读一些JS代码中，经常遇到这么一句，初看觉得不解，this明明我随时随地都可以取来用，为什么还需要再存一下它？后来想了想是自己对this作用域的不理解。

这一行代码通常出现在 JavaScript 或 TypeScript 中的某些上下文中，其中开发者希望在嵌套函数或回调函数中访问外部函数的 this，但是由于 JavaScript 中函数作用域的特性，this 的值可能会在嵌套函数内部改变。 在这种情况下，通过在外部函数中创建一个变量 _self 来保存 this 的值，可以确保在嵌套函数中仍然能够访问到正确的 this。

function MyObject() {
  this.value = 42;

  // 在这个函数中使用了嵌套的回调函数
  this.doSomething = function() {
    setTimeout(function() {
      // 这里的 this 不再是 MyObject 实例，而是全局对象（在浏览器环境中是 window）
      console.log(this.value); // undefined
    }, 1000);
  };

  // 使用 _self 保存 this 的值
  this.doSomethingWithSelf = function() {
    let _self = this;
    setTimeout(function() {
      // 通过 _self 访问正确的 this
      console.log(_self.value); // 42
    }, 1000);
  };
}

const obj = new MyObject();
obj.doSomething();
obj.doSomethingWithSelf();

上述例子中，doSomething 方法中的嵌套函数内的 this 不再指向 MyObject 实例，而是指向了全局对象（在浏览器环境中是 window）。而在 doSomethingWithSelf 方法中，通过 let _self = this; 将外部函数的 this 保存在 _self 中，确保在嵌套函数中能够访问到正确的 this。

虽然使用 _self 这样的命名约定是一种常见的做法，但也可以选择其他命名，比如 that、self、context 等，这取决于个人或团队的偏好。重要的是理解这一模式的作用，即在嵌套函数中保持对外部函数的正确 this 的引用。