Ja vaScript类中this指向当前实例，所有实例方法通过this共享同一对象状态；需在constructor初始化属性，注意this丢失场景并用箭头函数或bind修复。

在 Ja vaScript 的类里，this 并不是某种被“共享”出来的东西。

它更像是实例方法天然带着的一把“当前实例钥匙”。只要方法以实例方法的方式调用，比如 obj.method()，this 就会自动指向这个实例。

正因为如此，不同方法都能通过它读写同一份实例状态，也能互相调用其他实例方法。这才是“方法之间共享基础”的真正含义。

直接用 this 访问实例属性和调用其他方法

这是最自然、最常用的方式。

类中所有实例方法共享的，不是某个变量，而是同一个 this 所代表的实例对象本身。

• 实例属性（如 this.name、this.items）天然可被所有实例方法读写
• 调用本类其他方法只需 this.otherMethod()，无需传参或额外绑定
• 避免把状态打包成参数反复传递，逻辑更内聚

例如：

class Cart {
constructor() {
this.items = [];
}
addItem(item) {
this.items.push(item);
this.updateTotal(); // 直接调用本类方法
}
updateTotal() {
this.total = this.items.reduce((sum, i) => sum + i.price, 0);
}
}

注意 this 丢失的常见场景和修复方式

当方法被“脱离上下文”调用时，比如作为回调、赋值给变量、传入定时器，this 会丢失。

这时，它默认指向全局或 undefined（严格模式下）。

• 错误：const fn = obj.addItem; fn(); → this 不再是 obj
• 修复一：箭头函数（在类字段中定义）→ 自动继承外层 this
  addItem = (item) => { this.items.push(item); }
• 修复二：bind 绑定 → const bound = obj.addItem.bind(obj);
• 修复三：事件监听中用箭头函数或 bind，避免 button.onclick = obj.handleClick 这种写法

构造函数中正确初始化 this 状态

类的 constructor 是设置初始状态的唯一可靠位置。

所有后续方法都依赖这里建立的 this 结构。

• 必须用 this.xxx = xxx 显式挂载实例属性，否则方法里访问不到
• 不要在 constructor 中把 this 泄露出去（比如传给异步回调、全局变量），否则可能访问到未初始化完成的对象
• 若需复用逻辑，可在 constructor 中调用私有初始化方法：this.initConfig();

与原型方法的关系：this 始终指向实例，不是原型

即使方法定义在 prototype 上，例如 Cart.prototype.addItem，只要它是通过实例调用的，this 仍指向该实例。

它并不会指向 prototype 对象本身。

• 验证：cart.addItem === Cart.prototype.addItem 返回 true（同一函数）
• 但执行时 this 仍是 cart，所以能正常读写 this.items
• 原型上的方法和 class 内部定义的方法，在 this 行为上完全一致

《夸克》非常好用的免费AI浏览器

下载APP查看