本文解析一个典型 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 操作分离，以提升可测试性与复用性：
立即学习“Java免费学习笔记（深入）”；
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”，而是一个真正具备内聚性、可维护性与演化能力的面向对象组件。
