var self = this：为什么它在处理回调函数中的 this 丢失问题如此有效？-CSDN博客

本文链接：https://blog.csdn.net/weixin_42554191/article/details/142645906

在这里插入图片描述

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》
💬 前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站。

文章目录

在 JavaScript 中，使用 var self = this 这种模式常见于为了在回调函数中保持对外部上下文（即外部函数或方法）中 this 的引用。让我们逐步了解其中的原因及用法。

1. `this` 的问题

在 JavaScript 中， this 的值是动态确定的，具体取决于函数的调用方式。特别是当你在回调函数中使用 this 时，它可能不会指向你希望的对象。这就导致了一些问题，比如在事件处理、异步操作等场景中。

示例：`this` 的指向变化

function Person(name) {
  this.name = name;

  this.sayHello = function() {
    console.log(`Hello, my name is ${this.name}`);
  };

  setTimeout(function() {
    this.sayHello(); //这里的 this 指向全局对象，undefined 在严格模式下
  }, 1000);
}

const person = new Person('Alice');
// person.sayHello() 会输出: Hello, my name is Alice
// 但是 setTimeout 中的 this.sayHello() 是一个错误的调用

在这里插入图片描述

在上面的例子中，setTimeout 的回调函数中的 this 并不是指向 Person 对象。这会导致 this.name 不指向 Alice。

2. 使用 `var self = this`

为了在回调函数中保留外部上下文的 this，常用的解决方案是将 this 赋值给一个变量，例如 self 或 that。

示例代码

function Person(name) {
  this.name = name;

  this.sayHello = function() {
    console.log(`Hello, my name is ${this.name}`);
  };

  var self = this; // 保存外部函数中的 this

  setTimeout(function() {
    self.sayHello(); // 现在 self 是指向 Person 对象的
  }, 1000);
}

const person = new Person('Alice');
// 输出: Hello, my name is Alice (延迟 1 秒)

在这里插入图片描述

在这个例子中，使用 var self = this 将 this 的引用保存在 self 中，然后在 setTimeout 的回调中使用 self 引用。

3. 箭头函数的替代方案

在箭头函数中，this 会从外部上下文中捕获。因此，在现代 JavaScript 中，推荐使用箭头函数来避免使用 var self = this 的模式。

示例代码

function Person(name) {
  this.name = name;

  this.sayHello = function() {
    console.log(`Hello, my name is ${this.name}`);
  };

  setTimeout(() => {
    this.sayHello(); // 这里的 this 指向 Person 对象
  }, 1000);
}

const person = new Person('Alice');
// 输出: Hello, my name is Alice (延迟 1 秒)