从html动态调用javascript对象函数

Question

我正在开发一种基于 javascript 文本的游戏引擎。我有一个带有“onuse”方法的 javascript 对象。当我像这样使用它时，它的效果非常好：

var button = new CanvasObject();
button.text = "test" // Necessary for the next code sample
button.onuse = function(){ button.x += 1 }; // Some simple reaction;

我在 Canvas 对象中有代码，在绘制 CanvasObject 时会将其包装在 span 标签中，如下所示：

<span onclick = "function{ button.x += 1 }">test</span>
// Or to make the HTML cleaner:
<span onclick = canvas.callFunction(5)>test</span>
// where canvas.callFunction will call the function needed.
// Canvas keeps an array of functions that can be called.

Canvas 将调用该函数，并且由于它使用“绝对”术语，因此“button.x += 1”行可以正常工作。问题是我有另一个从 CanvasObject 扩展的类，例如 ButtonObject。我希望类定义具有已定义的 onuse 函数。例如（使用here 列出的继承技术）

ButtonObject.method('onuse', function(){
   this.x++; // Some function requiring 'this'.
});

当我使用第一种技术从 HTML 中调用一个函数时，我的引擎会将其作为匿名函数调用。然后，“this”将被定义为窗口。我希望 ButtonObject 的每个实例都具有相同的“onuse”功能，因此每次都像使用 CanvasObject 一样定义它似乎需要很多额外的代码。我想到的一种可能的解决方案是修改我的引擎的工作方式，以便为每个对象赋予一个“名称”属性，这相当于它的 javascript 名称。这样引擎可以像这样简单地编写字符串：

innerHTML += ( "<span onclick=' + buttonObjectInstance.name + ".onuse()'>" );

但这种技术需要我两次声明对象的名称，每次实例化它时，如下所示：

var startButton = ButtonObject('startButton');

这真的是我唯一的选择吗？或者有没有办法在对象的上下文中调用一个函数而没有该对象的名称？

Answer 1

为此绑定一个函数以供以后使用：

ButtonObject.method('onuse', function(){
   this.x++; // Some function requiring 'this'.
} .bind(ButtonObject)  );

如果在调用上下文中不是 ButtonObject，则将其绑定到包含您的方法的任何内容。