无法从事件处理程序访问 js 对象方法答案

【问题标题】：Cannot access js object methods from an event handler无法从事件处理程序访问 js 对象方法
【发布时间】：2014-07-03 04:21:19
【问题描述】：

这个 HTML sn-p 创建一个对象原型，实例化它，然后尝试使用事件中该对象的方法，但未成功。

<body>
    <button type="button" onclick="TestLogic()">Test Logic</button>
    <script>
        function onOff() //Object prototype
        {
            this.state = false;

            function setState(newState) {
                this.state = newState;
            }
        }
        var inputOne = new onOff(); //Instantiate object prototype
        function TestLogic() //buttonClick Event Handler
        {
            inputOne.setState(true);
            // generates Uncaught Type Error undefined is not a function */
            document.inputOne.setState(true);
            // generates Uncaught Type Error Cannot read property setState of undefined 
        }
    </script>
</body>

【问题讨论】：

document.inputOne 应该只是 inputOne 并且“function setState”应该是“this.setState= function setState”
setState 是 onOff 的本地。您永远不会将其暴露为从外部调用。 inputOne 也不是 document 对象的属性。我建议阅读 quirksmode.org/js/contents.html 以更好地了解 JavaScript 以及它在浏览器中的工作原理。

标签： javascript html object eventhandler

【解决方案1】：

onOff 中的函数是私有的，它不会作为公共属性发布。将function setState(newState) { ... } 更改为this.setState = function(newState) { ... }。

【讨论】：

【解决方案2】：

您对 javascript 上下文有误解。 MDN 对它有很好的article。看 cmets 知道你错在哪里：

<body>
    <button type="button" onclick="TestLogic()">Test Logic</button>
    <script>
        function onOff() //Object prototype
        {
            this.state = false;

            //set method to context of creating Object
            this.setState = function (newState) {
                this.state = newState;
            }
        }
        var inputOne = new onOff(); //Instantiate object prototype
        function TestLogic() //buttonClick Event Handler
        {
            inputOne.setState(true);
            //document is not a scope, window is global scope
            window.inputOne.setState(true);
        }
    </script>
</body>

【讨论】：

【解决方案3】：

试试这个

<html>
 <body>
<button type="button" onclick="TestLogic()">Test Logic</button>
<script>
    function onOff() //Object prototype
    {
        this.state = false;

         this.setState=function(newState) 
         {
            this.state = newState;
            console.log(this.state);
         }
    }
    var inputOne = new onOff();
    function TestLogic()
    {
        inputOne.setState(true);
    }
</script>
</body>
</html>

【讨论】：

由于 OP 似乎是一个初学者，解释他们的代码有什么问题以及您的解决方案如何/为什么解决它对他们来说非常有价值。

【解决方案4】：

如果你想使用原型，那么就使用这样的原型

function Object () {
    this.instanceMethod = false;
}
Object.prototype.prototypeMethod = function () {};

另外你应该避免使用内联事件监听器，而是这样做

document.querySelector('button').addEventListener('click', function () {
// logic
});

这是一个一起使用的例子 (http://jsfiddle.net/sAH35/)

<body>
    <button type="button">Test Logic 1</button>
    <button type="button">Test Logic 2</button>
    <button type="button">Test Logic 3</button>
    <script>
        //Object prototype
        function OnOff(element) {
            this.element = element;
            this.state = false;
        }
        OnOff.prototype.setState = function (newState) {
            this.state = newState;

            if (this.state) {
                this.element.style.backgroundColor = 'red';
            } else {
                this.element.style.backgroundColor = 'grey';
            }
        };

        // bind to elements
        var elements = document.querySelectorAll('button');
        for (var i = 0; i < elements.length; i++) {
            elements[i].addEventListener('click', function () {
                if (!this.onOff) this.onOff = new OnOff(this);
                this.onOff.setState(!this.onOff.state);
            });
        }
    </script>
</body>

【讨论】：

由于 OP 似乎是初学者，解释他们的代码有什么问题以及您的解决方案如何/为什么解决它对他们来说非常有价值。