如何扩展Google Maps类？优化自定义代理类的原型继承策略

你的问题核心在于直接用Object.create(google.maps.Map.prototype)覆盖了MapProxy的原型，导致无法在MapProxy原型上定义自定义方法，只能退而求其次在构造函数里创建实例方法（每个实例都会生成一份独立副本）。下面有几种更优的解决方案，既能继承Google Maps的所有原型方法，又能让自定义方法挂载在MapProxy的原型上实现共享：

方案1：ES6类继承（最简洁推荐） #

如果你的环境支持ES6+，这是最直观的方式——直接让MapProxy继承自google.maps.Map，自定义方法正常写在类的原型上：

export default class MapProxy extends google.maps.Map {
  constructor(element, options) {
    // 调用父类构造函数完成Google Maps实例初始化
    super(element, options);
    // 初始化自定义属性
    this.markers = {};
  }

  // 自定义方法挂载在MapProxy原型上，所有实例共享同一份
  hasMarkers() {
    return Object.keys(this.markers).length > 0;
  }
}

优点：

• 语法简洁，符合现代JavaScript类的写法逻辑
• 自定义方法在原型上，不会重复创建副本，内存效率更高
• 自动继承google.maps.Map的所有原型方法，无需额外处理

注意：目前绝大多数新版本的Google Maps JS API都支持ES6类继承，放心使用即可。

方案2：原型混入（兼容老环境） #

如果无法使用ES6类，可以手动将google.maps.Map原型上的方法复制到MapProxy的原型上，保留自己的原型方法：

export default class MapProxy {
  constructor(element, options) {
    this.markers = {};
    // 调用Google Maps构造函数完成实例初始化
    google.maps.Map.call(this, element, options);
  }

  // 自定义方法直接写在类中，会自动挂载到原型
  hasMarkers() {
    return Object.keys(this.markers).length > 0;
  }
}

// 将google.maps.Map原型上的方法（排除constructor）复制到MapProxy原型
Object.getOwnPropertyNames(google.maps.Map.prototype).forEach(key => {
  if (key !== 'constructor') {
    MapProxy.prototype[key] = google.maps.Map.prototype[key];
  }
});

优点：

• 兼容性好，支持不支持ES6类的老旧环境
• 自定义方法依然在MapProxy原型上，实现实例共享
• 避免直接覆盖原型，保留了MapProxy自身的原型链结构

缺点：需要手动同步原型方法，如果Google Maps API更新了原型方法，需要同步修改这段代码（不过API整体稳定性很高，问题不大）

方案3：组合+代理模式（解耦继承） #

如果不想用继承，而是用组合的方式，可以内部持有一个Google Maps实例，通过代理让未定义的方法自动转发到内部实例：

export default class MapProxy {
  constructor(element, options) {
    this.markers = {};
    // 内部持有独立的Google Maps实例
    this._mapInstance = new google.maps.Map(element, options);
  }

  hasMarkers() {
    return Object.keys(this.markers).length > 0;
  }

  // 自定义代理逻辑：优先返回自身属性/方法，否则转发到内部实例
  get(prop) {
    if (prop in this) {
      return this[prop];
    }
    return this._mapInstance[prop];
  }
}

// 使用时通过Proxy包装实例，实现自动代理
export function createMapProxy(element, options) {
  const instance = new MapProxy(element, options);
  return new Proxy(instance, {
    get(target, prop) {
      return target.get(prop);
    }
  });
}

优点：

• 完全解耦MapProxy与google.maps.Map的继承关系，避免继承带来的潜在耦合问题
• 灵活性高，可以自定义哪些方法需要代理、哪些需要拦截
• 自定义方法依然在原型上，内存友好

缺点：需要额外的Proxy包装，使用时要调用createMapProxy创建实例，稍微增加了一点使用成本

内容的提问来源于stack exchange，提问作者Stephan-v