具有自己的集合名称的 JS 原型函数扩展

Question

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

例如：

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

如果 svgText 是一个 svgText-Objekt 并且我调用 svgText.logType() 这工作正常... -> 日志是 "I am a SVGelement form type: 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。

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

Answer 1

如果你想在你所做的所有添加中使用 "my" 前缀，到目前为止最简单的方法是将其作为方法名称的一部分：

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

但一般来说，不要使用直接赋值在用作原型的对象上创建新方法，它会创建一个可枚举的属性，这往往会出现问题。相反，使用 Object.defineProperty 并且不要使新的属性可枚举（默认情况下它将是不可枚举的）。

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

然而，可以做你想做的事，只是（稍微）低效和麻烦：使my成为具有访问函数的属性并自定义生成您 return 第一次在实例上使用的对象。

查看评论：

// 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 的改进可能会更简洁，但希望它能帮助您入门...

具有自己的集合名称的 JS 原型函数扩展

JS-prototype functionextension with own Collection Name

javascript

expand

prototype