Javascript 原型函数和 SVG setAttribute(onclick)

Question

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

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

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

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 (observe，在 Prototype 的情况下）而不是旧的 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 具有正确的值。

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

• 神话方法
• 你必须记住<代码>此
• 闭包并不复杂