JavaScript this 指向混乱怎么通过保存 self 或 bind 解决-js教程-PHP中文网

应根据场景选择 this 绑定方式：嵌套函数中用 self = this 捕获外层 this；需复用或预设参数时用 bind 永久绑定；现代开发优先用箭头函数继承词法 this，避免手动绑定。

javascript this 指向混乱怎么通过保存 self 或 bind 解决

JavaScript 中 this 指向混乱，本质是函数调用方式决定的，不是定义位置。保存 self = this 或用 bind 都是绕过运行时绑定的“兜底方案”，但适用场景和原理不同，选错反而加重混乱。

什么时候该用 `self = this`（或 `that = this`）

主要解决**嵌套函数中 this 丢失**的问题，尤其是回调函数里需要访问外层实例属性或方法时。它靠的是闭包捕获外层作用域的 this 值。

常见于事件监听、定时器、Ajax 回调、Promise.then 等异步操作内部
适用于传统 function 声明（箭头函数不需要）
注意：只在函数执行前赋值一次，适合 this 在外层确定且不变的场景

例如：

Java调试

通过 JDWP 实现 Java 远程调试：连接远程 JVM、设置断点、单步执行代码、查看变量值、获取调用栈。适用于需要调试远程 Java 应用、排查运行时状态、追踪代码执行流程的场景。术语注解 JDWP：Java Debug Wire Protocol，Java 调试有线协议（Java 远程调试底层通信协议） remote JVM：远程 Java 虚拟机 step through code：代码单步调试（步入 / 步过 / 步出调试） inspect variables：变量查看 / 变量检视 stac

下载

const obj = {
  name: 'Alice',
  sayHi() {
    const self = this; // 捕获当前 this
    setTimeout(function() {
      console.log('Hello, ' + self.name); // 正确输出 Alice
    }, 100);
  }
};

什么时候该用 `bind`

bind 是显式绑定 this，返回一个新函数，**永久锁定 this 值**。适合需要复用、传递或延迟执行的函数。

常用于将对象方法作为事件处理器传入（如 btn.addEventListener('click', obj.handleClick.bind(obj))）
适合需要预设部分参数（柯里化）同时固定 this 的情况
注意：每次 bind 都创建新函数，避免在 render 或循环中频繁调用，可能影响性能或导致 React 中的重复渲染

例如：

const obj = {
count: 0,
increment() { this.count++; }
};

const btn = document.querySelector('#btn');
btn.addEventListener('click', obj.increment.bind(obj)); // this 始终指向 obj

更现代、更推荐的替代方案

ES6+ 提供了更简洁、不易出错的方式，优先考虑它们：

箭头函数：没有自己的 this，自动继承外层词法作用域的 this。适用于回调、Promise、setTimeout 内部
类字段语法 + 箭头函数（React 类组件常用）：handleClick = () => { ... }，天然绑定实例
bind 在构造函数中提前绑定（避免每次 render 创建新函数）：this.handleClick = this.handleClick.bind(this)

例如（箭头函数版）：

const obj = {
  name: 'Alice',
  sayHi() {
    setTimeout(() => {
      console.log('Hello, ' + this.name); // this 正确指向 obj
    }, 100);
  }
};