javascript - 从 html 事件调用 javascript 类方法的正确方法

Question

我有一个 Foo 类，它有一个生成显示的 HTML 的方法。我希望 HTML 具有调用 Foo.clickHandler 的 onclick 事件处理程序。问题是我不知道 Foo 的这个特定实例的名称。同样，onclick 事件无法知道如何访问此 Foo 实例。这是一些代码:

function Foo(){
    this.nonStaticVariable='Something non-static (different for every instance of Foo).';
    this.getHTML=function(){
        return '<a href="javascript:void(0);" onclick="/* How do I call Foo.clickHandler? */">Click Me!</a>';
    }
    this.clickHandler=function(){
        alert(nonStaticVariable);
    }
}

非静态函数的要点是表明 onclick 需要调用 Foo 的正确实例。

我考虑过将一个字符串传递给 Foo，其中包含包含 Foo 的变量名，但这似乎是反 OOP:

function Foo(container){
    this.container=container;
    this.nonStaticVariable='Something non-static (different for every instance of Foo).';
    this.getHTML=function(){
        return '<a href="javascript:void(0);" onclick="'+container+'.clickHandler();">Click Me!</a>';
    }
    this.clickHandler=function(){
        alert(nonStaticVariable);
    }
}

var fooInstance=new Foo('fooInstance');

你有什么建议？

我也对 jQuery 解决方案持开放态度。

Answer 1

nonStaticVariable 和 clickHandler 需要在 Foo 之外访问吗？如果没有，你可以简单地做这样的事情:

function Foo(){
    //changed these to private variables only accessible from within Foo
    var nonStaticVariable='Something non-static (different for every instance of Foo).';
    var clickHandler = function(){
        alert(nonStaticVariable);
    }
    this.getHTML=function(){
        return $('<a href="#">Click Me!</a>').click(clickHandler);
    }
}


var fooInstance = new Foo();

var button = fooInstance.getHTML();


$("#container").html(button);​