如何让JavaScript类的.extend()方法兼容扩展对象字面量？

首先咱们得先理清你的代码在对象字面量场景下出问题的核心原因：你的原逻辑会污染全局的Object.prototype（因为对象字面量的原型就是Object.prototype），这不仅是个隐藏隐患，还可能因为环境或其他代码的干扰导致方法无法正常访问。

更关键的是：没有办法100%准确判断一个对象是不是通过字面量{}创建的——{}和new Object()创建的对象在原型链上完全一致，没有任何专属标识能区分两者。所以咱们换个更靠谱的思路：判断对象的原型是否为默认的Object.prototype（或是null，比如Object.create(null)创建的对象），再分情况处理。

改进后的.extend()方法 #

class myClass {
  static extend(obj) {
    const proto = Object.getPrototypeOf(obj);
    // 判断对象原型是否为默认的Object原型或无原型
    if (proto === Object.prototype || proto === null) {
      // 直接将方法挂载到对象自身，避免污染全局原型
      Object.assign(obj, myClass.prototype);
    } else {
      // 原逻辑：给对象的现有原型合并myClass的方法，保留原有原型链
      Object.assign(proto, myClass.prototype);
    }
    // 确保构造函数逻辑在两种场景下都能执行
    myClass.call(obj);
  }
  sayHello() {
    return 'hello!'
  }
}

测试验证 #

1. 对象字面量场景：

const foo = {};
myClass.extend(foo);
console.log(foo.sayHello()); // 输出 'hello!'

2. 构造函数实例场景：

function foo() {
  myClass.extend(this);
}
const bar = new foo();
console.log(bar.sayHello()); // 输出 'hello!'

3. 自定义原型对象场景：

const customObj = Object.create({ customMethod: () => 'custom' });
myClass.extend(customObj);
console.log(customObj.sayHello()); // 输出 'hello!'
console.log(customObj.customMethod()); // 依然能访问原有自定义方法

额外说明 #

• 为什么不直接替换对象原型为myClass.prototype？因为如果对象原本有自己的原型链（比如构造函数创建的实例），直接替换原型会切断它原有的继承关系，用Object.assign合并方法能保留原有原型链的完整性。
• 如果你的需求是让对象完全继承myClass的原型体系，也可以考虑用Object.setPrototypeOf(obj, myClass.prototype)，但这种方式会直接替换原型，需要根据实际业务场景选择。

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