17370845950

本文解析一个典型 javascript oop 初学者案例，指出将业务逻辑与 dom 操作耦合、错误使用箭头函数定义方法、命名语义失当等关键问题，并提供符合 oop 原则的重构方案。

在 JavaScript 中实践面向对象编程（OOP），核心不在于“是否用了 class”，而在于是否遵循了封装、职责单一、语义清晰、可复用与可扩展等基本原则。你提供的 PayDay 示例虽已使用 class 语法，但在设计层面存在两个普遍且重要的改进点：

✅ 1. 方法应定义在原型上，而非实例属性中

当前代码中，execute 被声明为箭头函数并赋值给 this.execute，这导致每个 PayDay 实例都拥有独立的一份函数副本，既浪费内存，又破坏了继承机制（无法通过 super.execute() 调用父类逻辑），更严重的是——它捕获了构造时的 hours 和 payRate 值，而非访问当前实例的最新状态。

// ❌ 错误：实例属性式箭头函数（绑定初始值，非响应式）
this.execute = () => {
  let grossPay = (hours * payRate); // 注意：这里引用的是参数，不是 this.hours/this.payRate！
  // ...
};

// ✅ 正确：标准方法定义（自动绑定 this，响应实例状态变化）
execute() {
  const grossPay = this.hours * this.payRate; // ✅ 访问当前实例属性
  const deduction = grossPay * 0.0765;
  if (isNaN(deduction)) {
    document.querySelector('.result').textContent = "Enter a number";
  } else {
    document.querySelector('.result').textContent = '$' + Math.floor(grossPay - deduction);
    document.querySelector('.third').textContent = '(federal income taxes not included)';
  }
}

? 关键提醒：原代码中 grossPay = (hours * payRate) 实际使用的是构造函数参数，而非 this.hours 和 this.payRate —— 这意味着即使后续修改 userOne.hours = 45，execute() 仍会计算旧值，严重违背封装原则。

✅ 2. 方法名必须准确反映其职责与语义

execute() 是一个典型的“动词滥用”：PayDay 是一个数据实体（代表某次薪资周期），它本身不具备“执行”行为。真正执行的是计算逻辑或UI 渲染动作。更贴切的命名应体现其真实意图，例如：

• calculateNetPay() → 专注纯计算，返回数值（推荐 ✅）
• renderResultToDOM() → 明确职责是操作 DOM（次选，但需注意解耦）
• toNetPayString() → 返回格式化字符串，由外部决定如何展示

理想情况下，计算逻辑应与 DOM 操作分离，以提升可测试性与复用性：

class PayDay {
  constructor(hours, payRate) {
    this.hours = Number(hours) || 0;
    this.payRate = Number(payRate) || 0;
  }

  // ✅ 纯计算方法：无副作用，可单元测试，可复用
  calculateGrossPay() {
    return this.hours * this.payRate;
  }

  calculateDeduction() {
    return this.calculateGrossPay() * 0.0765;
  }

  calculateNetPay() {
    return this.calculateGrossPay() - this.calculateDeduction();
  }

  // ✅ 格式化输出（仍属领域逻辑，不操作 DOM）
  formatNetPay() {
    const net = this.calculateNetPay();
    return isNaN(net) ? null : `$${Math.floor(net)}`;
  }
}

// ✅ 视图层（UI）与模型层（PayDay）解耦
btnCalculate.addEventListener('click', () => {
  const hoursWorked = parseInt(document.getElementById('hrsWorked').value) || 0;
  const hourlyPay = parseInt(document.getElementById('hourly').value) || 0;

  const payday = new PayDay(hoursWorked, hourlyPay);
  const formatted = payday.formatNetPay();

  if (formatted === null) {
    document.querySelector('.result').textContent = "Enter a number";
  } else {
    document.querySelector('.result').textContent = formatted;
    document.querySelector('.third').textContent = '(federal income taxes not included)';
  }
});

? 总结：OOP 在 JavaScript 中的实践要点

• 不要为了用 class 而用 class：优先思考“这个对象代表什么？”、“它的责任边界在哪？”
• 方法属于类，不是实例：用标准方法语法（methodName() { ... }），避免 this.method = () => { ... }
• 命名即契约：方法名应精准描述其行为（如 calculateX, validateY, serializeZ），避免模糊动词如 execute, handle, process
• 关注分离关注点：PayDay 负责薪资计算，UIRenderer 或事件处理器负责更新页面 —— 后者可被重用于打印、导出或 API 响应
• 构造函数应健壮：对输入做基础校验与类型转换（如 Number()），避免后续计算崩溃

遵循这些原则，你的 PayDay 就不再只是一个“能跑通的 class”，而是一个真正具备内聚性、可维护性与演化能力的面向对象组件。