如何让内置类Image继承自定义类Counter特性（不重写构造函数）

嘿，这个问题挺有意思的——通常我们都是写自定义类去继承内置类，现在要反过来让内置类「拥有」自定义类的特性，确实得换个思路。先给你明确说：直接让内置Image类继承自定义Counter类是不可行的，因为JavaScript里内置类的构造函数和原型链是受保护的，没法直接修改它们的继承关系来指向自定义类。不过有两种靠谱的方案可以实现你的需求，我给你详细说说：

方案一：使用混入（Mixin）模式，给Image原型注入Counter的特性 #

这种方式不需要修改Image的构造函数，而是把Counter的方法和属性逻辑「混入」到Image的原型上，让所有Image实例都能使用这些特性。

示例代码：

// 你的自定义Counter类
class Counter {
  constructor(orientation) {
    this.orientation = orientation;
  }
  // 可以扩展Counter的方法，比如获取/修改方向
  getOrientation() {
    return this.orientation;
  }
  setOrientation(newOrientation) {
    this.orientation = newOrientation;
  }
}

// 实现混入逻辑：把Counter的能力加到Image原型上
function mixinCounterToImage() {
  // 把Counter的原型方法复制到Image.prototype
  Object.assign(Image.prototype, Counter.prototype);
  
  // 给Image加一个初始化方法，用来设置orientation属性（避免重写构造函数）
  Image.prototype.initCounter = function(orientation) {
    this.orientation = orientation;
  };
}

// 调用混入，让所有Image实例都拥有Counter的特性
mixinCounterToImage();

// 使用示例
const img = new Image();
img.initCounter('landscape'); // 初始化Counter的方向属性

console.log(img.getOrientation()); // 输出：landscape
img.setOrientation('portrait');
console.log(img.getOrientation()); // 输出：portrait

// 同时保留Image的原生功能
img.src = 'your-image.jpg';
img.onload = function() {
  console.log('图片加载完成');
};

这个方案的好处是直观，所有新创建的Image实例都能直接用Counter的方法，不需要额外包装。但要注意：混入会污染内置类的原型，如果其他代码也修改Image原型，可能会有冲突。

方案二：创建包装类（Wrapper），用组合替代继承 #

如果不想污染内置Image的原型，更安全的做法是创建一个新类，同时包装Image实例和Counter实例，通过代理的方式让这个新类拥有两者的特性。

示例代码：

// 你的自定义Counter类
class Counter {
  constructor(orientation) {
    this.orientation = orientation;
  }
  getOrientation() {
    return this.orientation;
  }
  setOrientation(newOrientation) {
    this.orientation = newOrientation;
  }
}

// 包装类：同时拥有Image和Counter的能力
class ImageWithCounter {
  constructor(orientation) {
    // 初始化内置Image实例和Counter实例
    this._image = new Image();
    this._counter = new Counter(orientation);

    // 代理Counter的方法到当前实例
    Object.keys(Counter.prototype).forEach(methodName => {
      this[methodName] = (...args) => this._counter[methodName](...args);
    });

    // 代理Image的方法和属性到当前实例，方便直接调用
    Object.keys(Image.prototype).forEach(propName => {
      if (typeof Image.prototype[propName] === 'function') {
        this[propName] = (...args) => this._image[propName](...args);
      } else {
        // 处理Image的属性（比如src、width等）
        Object.defineProperty(this, propName, {
          get: () => this._image[propName],
          set: (value) => this._image[propName] = value,
          enumerable: true
        });
      }
    });
  }
}

// 使用示例
const imgWithCounter = new ImageWithCounter('landscape');

// 使用Counter的方法
console.log(imgWithCounter.getOrientation()); // 输出：landscape

// 使用Image的原生功能
imgWithCounter.src = 'your-image.jpg';
imgWithCounter.onload = function() {
  console.log('图片加载完成');
};

这个方案的优势是完全不修改内置类，避免了原型污染的风险，而且逻辑更清晰，符合「组合优于继承」的设计原则。如果你需要严格隔离内置类和自定义类的逻辑，这是更推荐的做法。

不推荐的方案：修改实例的原型链 #

有些同学可能会想到用Object.setPrototypeOf把Image实例的原型指向Counter实例，但这种方式会彻底破坏Image的原生原型链，导致Image的内置方法（比如setAttribute、drawImage等）失效，非常不安全，绝对不建议在生产环境使用。

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