javascript - 具有自己的集合名称的JS原型(prototype)功能扩展

我想用一些新功能扩展所有SVGElement。

例如：

SVGElement.prototype.logType= function () {
            console.log('I am a SVGelement from type: ' + this.nodeName);
        }

如果svgText是svgText-Objekt，我调用svgText.logType（）
效果很好...->日志为“我是SVGelement表单类型：svgText”

但是我希望所有功能都带有前缀my。
我尝试过：

SVGElement.my= {};
SVGElement.prototype.my.logType= function () {
    console.log('I am a SVGelement from type: ' + this.nodeName);
}

问题是，当我调用svgText.my.logType（）时，“ this”指向“ my” -Objekt，而不是svgText-Object。

有办法吗？感谢您的帮助，对不起我的英语;）

最佳答案

如果您要在所有添加的内容上添加“ my”前缀，那么到目前为止，最简单的方法是使其成为方法名称的一部分：

SVGElement.prototype.myLogType = function() { /*...*/ };
// ------------------^^

但通常，不要使用直接赋值在用作原型的对象上创建新方法，它会创建可枚举的属性，这往往会产生问题。而是使用Object.defineProperty并不要使新属性可枚举（默认情况下它将不可枚举）。

Object.defineProperty(SVGElement.prototype, "myLogType", {
    value: function() { /*...*/ },
    writable: true,
    configurable: true
});

但是，可以做您想做的事，只是（略）低效且麻烦：将my设置为带有访问器函数的属性，并自定义生成在实例上首次使用时返回的对象。

看评论：

// Stand-in for SVGElement for the example
function FakeElement(id) {
  this.id = id;
}

// An object with the methods we want to add
var ourMethods = {
  logText: function() {
    return this.id;
  }
};

// Add our "my" property
Object.defineProperty(FakeElement.prototype, "my", {
  get() {
    // If we're being called on the prototype object itself, don't
    // do anything and just return null
    if (this === FakeElement.prototype) {
      return null;
    }

    // Define 'my' on this specific object with bound functions
    console.log("Creating 'my' for element id = " + this.id);
    var obj = this;
    var my = {};
    Object.keys(ourMethods).forEach(function(key) {
      my[key] = ourMethods[key].bind(obj);
    });
    Object.defineProperty(this, "my", {value: my});

    return my;
  }
});

// Test it
var f1 = new FakeElement(1);
var f2 = new FakeElement(2);
console.log(f1.my.logText());
console.log(f2.my.logText());
console.log(f1.my.logText());
console.log(f2.my.logText());

这样做是为了清楚而不是简洁，如果我们利用ES2015 +对JavaScript的改进可能更加简洁，但是希望它可以帮助您入门...

关于javascript - 具有自己的集合名称的JS原型(prototype)功能扩展，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48720645/