Javascript POO：可以将对象方法放在 onclick 中吗？

Question

我想在 onclick 中放置一个对象方法，但我的代码不起作用。

代码在这里，非常简单:

<script type="text/javascript">

//The constructor :
function Foo()
{   
    /*Create a div element and add it to the document :*/
    div_element = document.createElement("div");
    document.body.insertBefore(div_element, null);

    /*Create a method for hidding div element :*/
    this.hide = function()
    {
        div_element.style.display = "none";
    }

    /*Insert button inside the div element. This button contains the method this.hide() in an onclick for hidding the div element :*/
    div_element.innerHTML = '<input type="button" value="Hide" onclick="this.hide();">';
}

foo = new Foo();

</script>

但是按钮中的方法 this.hide() 没有 work.You 可以尝试这里的代码：https://jsfiddle.net/0s5smd52/

你有想法吗？

在此先感谢您，诚挚的

Answer 1

您的 hide() 函数的范围是您的 Foo() 对象。如果您以现在的方式将它添加到输入中，它将在全局范围内进行解释，并且 this.hide() 实际上意味着 window.hide()，它不存在。

此问题的解决方案是创建新输入，设置 onclick 处理程序，然后将其添加到 DOM。

此外，在变量前使用 var，这样它们就不会污染全局范围。

function Foo()
{   
    var div_element = document.createElement('div');

    this.hide = function()
    {
        div_element.style.display = 'none';
    }

    // create hide button
    var btn = document.createElement('input');
    btn.type = 'button';
    btn.value = 'Hide';
    btn.onclick = this.hide;

    // add it to the div
    div_element.appendChild(btn);

    // add everything to the DOM
    document.body.insertBefore(div_element, null);
}

foo = new Foo();

Answer 2

this.hide() 中的 this 是对 div_element 而非 foo 的引用。

为了在点击后调用方法hide，您需要使用闭包、全局变量或方法绑定。

在您的代码中，foo 是一个全局变量，因此 foo.hide() 应该有效。

Javascript POO：可以将对象方法放在 onclick 中吗？

Javascript POO : it is possible to put a object method in an onclick?

javascript

methods

event-handling