如何在JavaScript中创建复用方法处理多属性？避免代码重复

原代码存在大量重复的addXxx/subtractXxx方法，且部分方法存在逻辑错误（比如addDefense错误修改了offense属性而非defense）。可以通过动态属性访问实现两个通用方法，完全替代原有6个重复方法，具体代码如下：

const points = {
    sum: 10,
    offense: 0,
    defense: 0,
    support: 0,

    // 通用添加方法：接收要操作的属性名称
    add(prop) {
        if (this.sum > 0) {
            this.sum--;
            this[prop]++; // 用方括号语法动态操作目标属性
        }
        return this; // 保持链式调用能力
    },

    // 通用减少方法：接收要操作的属性名称
    subtract(prop) {
        if (this[prop] > 0) {
            this[prop]--;
            this.sum++;
        }
        return this;
    }
};

// 调用示例
console.log(points.add('offense').offense); // 输出 1，sum变为9
points.add('defense').add('support');
console.log(points.defense, points.support, points.sum); // 输出 1 1 7
points.subtract('offense');
console.log(points.sum, points.offense); // 输出 8 0

核心逻辑说明 #

• 动态属性访问：JavaScript中可以通过对象[属性名字符串]的语法，动态访问或修改对象属性。只要传入正确的属性名（如'offense'、'defense'），就能精准操作对应属性，避免硬编码重复代码。
• 链式调用兼容：方法返回this，可以像原代码一样连续调用多个方法（如points.add('offense').subtract('defense')），保持原有调用习惯。
• 修复原代码错误：原代码中addDefense、addSupport等方法错误操作了offense属性，通用方法通过动态参数彻底避免了这类硬编码失误。

如果希望保留原代码中addOffense这类语义化方法名，也可以通过动态生成方法实现（但通用方法已足够简洁）：

const points = {
    sum: 10,
    offense: 0,
    defense: 0,
    support: 0,

    add(prop) {
        if (this.sum > 0) {
            this.sum--;
            this[prop]++;
        }
        return this;
    },

    subtract(prop) {
        if (this[prop] > 0) {
            this[prop]--;
            this.sum++;
        }
        return this;
    }
};

// 动态生成语义化方法
['offense', 'defense', 'support'].forEach(prop => {
    const capitalizedProp = prop.charAt(0).toUpperCase() + prop.slice(1);
    points[`add${capitalizedProp}`] = () => this.add(prop);
    points[`subtract${capitalizedProp}`] = () => this.subtract(prop);
});

// 兼容原风格调用
points.addOffense();
console.log(points.offense); // 输出 1

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