Javascript 原型(prototype)函数和 SVG setAttribute(onclick)

Question

尝试使用 svg onClick 来调用原型(prototype)函数。

通常要调用原型(prototype)函数，我只会这样做。(functionName) 但是当我将其放入 .setAttribute(onclick, "this.(functionName)") 时，它无法识别原型(prototype)函数。有人有这方面的经验吗？

如果上面的内容不清楚，这里是它的基本要点......

function myobject(svgShape) {
    this.svgshape.setAttribute(onclick, 'this.doSomething()');
}
myobject.prototype.doSomething = function() {
    alert("works");
}

Answer 1

三件事可能有帮助:

1)首先，我认为您缺少 myobject 函数顶部的这一行:

this.svgshape = svgshape;

我假设这只是发布问题时出现的错误，并将其插入到下面。

2) 通常，当您使用 Prototype(或任何现代库)时，您不会使用字符串进行回调，而是使用函数。此外，您通常使用库的 addEventListener/attachEvent 包装器(在 Prototype 的情况下为 observe )而不是旧的 DOM0 属性来分配处理程序。所以:

function myobject(svgShape) {
    this.svgshape = svgshape;
    $(this.svgshape).observe('click', this.doSomething); // STILL WRONG, see below
}
myobject.prototype.doSomething = function() {
    alert("works");
}

3) 但是 JavaScript 没有方法(它并不真正需要它们)，它只有函数，所以上面的内容不能确保 this (调用的上下文)设置正确。使用原型(prototype)，您可以使用 bind设置上下文:

function myobject(svgShape) {
    this.svgshape = svgshape;
    $(this.svgshape).observe('click', this.doSomething.bind(this));
}
myobject.prototype.doSomething = function() {
    alert("works");
}

(或者你可以使用你自己的闭包来做到这一点。bind的优点是闭包处于一个非常受控的环境中，因此不会关闭你不关闭的东西想要保留在身边。)

现在，我从未使用 Prototype 进行过任何 SVG 编程，因此如果 observe 由于某种原因不起作用，您可以尝试直接分配给反射的 onclick属性:

function myobject(svgShape) {
    this.svgshape = svgshape;
    this.svgshape.onclick = this.doSomething.bind(this);
}
myobject.prototype.doSomething = function() {
    alert("works");
}

我仍然在那里使用 bind ，以便 this 具有正确的值。

我贫血的小博客中的这些帖子提供了对上述内容的更多讨论:

• Mythical methods
• You must remember this
• Closures are not complicated