javascript - 将 onclick 函数扩展至 javascript 类

Question

这个问题已经有答案了:

Class methods as event handlers in JavaScript? (5 个回答)

已关闭 9 年前。

我想在 JavaScript 类中包含 onclick 事件，但由于 onclick 是类内部的函数，因此 this变量将无法正常工作。

如何修改/输出 this onclick 函数中的变量？

img = new image();

function image() {
    this.width = 400;
    this.height = 600;
    document.getElementById('button').onclick = function()
    {
        alert(this.width); // alerts undefined
    };
}

请参阅此处的 JSfiddle:http://jsfiddle.net/ZghRv/

Answer 1

您可以使用bind() 创建一个新函数，将this 设置为您传递给bind() 的对象。

img = new image();

function image() {
    this.width = 400;
    this.height = 600;
    document.getElementById('button').onclick = (function()
    {
        alert(this.width); // alerts undefined
    }).bind(this);  // <---  Add bind() here to pick the value of 'this' inside onclick
}

查看JavaScript Function bind了解更多信息和互动示例。