JS 面向对象编程：如何优雅地处理类中的 this 指向与继承陷阱

2025-12-19

在 JavaScript 中，“Classes の Classes” 通常指的是类的嵌套（Nested Classes）或者类的继承（Inheritance）。虽然 JavaScript 不像 Java 那样经常使用显式的“内部类”，但在处理复杂逻辑时，这依然是一个非常强大的工具。

让我们用轻松的方式来看看在使用类时经常遇到的坑，以及更聪明的替代方案吧！

这是开发者最容易抓狂的地方。当你把类的方法作为回调函数（比如在 setTimeout 或事件监听器中）传递时，this 往往会丢失，指向 undefined 或全局对象。

容易出错的代码

class Timer {
  constructor() {
    this.seconds = 0;
  }
  start() {
    setInterval(function() {
      this.seconds++; // 报错！这里的 this 不是 Timer 实例
      console.log(this.seconds);
    }, 1000);
  }
}

解决方法（箭头函数）
箭头函数不会创建自己的 this，它会捕获外层上下文的 this。

class Timer {
  constructor() {
    this.seconds = 0;
  }
  start() {
    setInterval(() => {
      this.seconds++; 
      console.log(`计时: ${this.seconds}s`);
    }, 1000);
  }
}

有时候我们会想在一个类里面再定义一个类（Classes inside Classes），以此来实现封装。

潜在问题
内部类如果过度依赖外部类的私有属性，会导致代码非常难以测试和维护。

更好的替代方案
组合（Composition）与其嵌套类，不如将逻辑拆分成独立的类，然后通过构造函数注入。这样代码更模块化！

代码示例

// 独立的引擎类
class Engine {
  start() { console.log("引擎启动..."); }
}

// 汽车类组合了引擎类
class Car {
  constructor() {
    this.engine = new Engine(); // 组合
  }
  drive() {
    this.engine.start();
    console.log("汽车出发了！");
  }
}

如果你在子类中写了 constructor，你必须先调用 super()，否则 JavaScript 会毫不留情地抛出错误，因为它还没初始化父类的 this。

正确的继承方式

class Animal {
  constructor(name) {
    this.name = name;
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name); // 必须先调用 super！
    this.breed = breed;
  }
  bark() {
    console.log(`${this.name} (${this.breed}) 在汪汪叫！`);
  }
}