JavaScript中OOP使用正确性咨询：实例创建必要性及优化建议

首先，你确实可以不用创建类的实例来调用方法——通过**静态方法（static method）**就能实现。静态方法属于类本身，而非类的实例，无需new出对象就能直接调用。

先纠正你原代码里的一个小问题：execute方法里直接使用了hours和payRate，但正确写法应该是this.hours和this.payRate，避免依赖构造函数的参数名，提升代码健壮性。

方案1：使用静态方法实现无实例调用 #

把薪资计算逻辑封装成类的静态方法，直接通过类名调用，完全不需要创建实例：

const btnCalculate = document.getElementById('work');

class PayDay{
    // 静态方法，归属于类本身
    static calculate(hours, payRate){
        let grossPay = hours * payRate;
        let 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)';
        }
    }
}

btnCalculate.onclick = ()=>{
    const hoursWorked = parseInt(document.getElementById('hrsWorked').value);
    const hourlyPay = parseInt(document.getElementById('hourly').value);
    // 直接调用静态方法，无需创建实例
    PayDay.calculate(hoursWorked, hourlyPay);
}

方案2：优化实例类的简化写法 #

如果想保留类的实例模式，也可以不用将实例赋值给变量，直接链式调用方法，同时优化方法定义的内存占用：

const btnCalculate = document.getElementById('work');

class PayDay{
    constructor(hours, payRate){
        this.hours = hours;
        this.payRate = payRate;
    }
    // 定义在原型上的方法，所有实例共享，节省内存
    execute(){
        let grossPay = this.hours * this.payRate;
        let 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)';
        }
    }
}

btnCalculate.onclick = ()=>{
    const hoursWorked = parseInt(document.getElementById('hrsWorked').value);
    const hourlyPay = parseInt(document.getElementById('hourly').value);
    // 无需赋值变量，直接创建实例并调用方法
    new PayDay(hoursWorked, hourlyPay).execute();
}

额外优化建议 #

• 将输入框的type="text"改为type="number"，从源头减少非数字输入的情况；
• 处理parseInt结果时，增加空值/非数字的兜底处理，比如const hoursWorked = parseInt(document.getElementById('hrsWorked').value) || 0;，避免出现NaN导致计算异常。

内容的提问来源于stack exchange，提问作者Gzus24