JavaScript原型扩展：为SVGElement添加my前缀方法并修正this指向

这个问题我之前也碰到过！核心问题就是当你把自定义方法直接挂在my对象上时，方法里的this会指向my本身，而不是你要操作的SVG元素。别担心，有几种靠谱的解决办法：

方法1：利用Getter返回绑定当前元素的方法集合 #

通过给SVGElement.prototype定义一个my的getter，每次访问my属性时，返回一个包含自定义方法的对象，并且让这些方法内部引用当前的SVG元素实例：

Object.defineProperty(SVGElement.prototype, 'my', {
  get() {
    // 保存当前SVG元素的引用
    const currentElement = this;
    return {
      logType() {
        console.log(`I am a SVGElement from type: ${currentElement.tagName.toLowerCase()}`);
      },
      // 可以添加更多自定义方法
      setFillColor(color) {
        currentElement.style.fill = color;
      }
    };
  }
});

这样调用svgText.my.logType()时，currentElement就是原svgText对象，完美解决this指向问题。

方法2：用类封装Helper逻辑（更易扩展） #

如果需要添加大量自定义方法，用类来封装逻辑会更清晰，同样通过getter返回类的实例：

class SVGMyHelper {
  constructor(element) {
    this.element = element;
  }

  logType() {
    console.log(`I am a SVGElement from type: ${this.element.tagName.toLowerCase()}`);
  }

  setStrokeWidth(width) {
    this.element.style.strokeWidth = width;
  }

  // 更多方法...
}

Object.defineProperty(SVGElement.prototype, 'my', {
  get() {
    return new SVGMyHelper(this);
  }
});

这种方式把所有自定义逻辑集中在SVGMyHelper类里，后续维护和扩展都更方便。

为什么直接挂载对象不行？ #

如果你之前是这么写的：

SVGElement.prototype.my = {
  logType() {
    console.log(`I am a SVGElement from type: ${this.tagName}`);
  }
};

调用svgText.my.logType()时，this指向的是my这个对象（因为方法是作为my的属性被调用的），而my对象并没有tagName属性，自然达不到预期效果。而上面的两种方法，都是通过getter在每次访问时绑定当前的SVG元素实例，确保方法内部能正确访问到原元素。

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