Question

此HTML片段创建一个Object原型，对其进行实例化，然后尝试从Event中使用该对象的方法失败。

<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>

Answer 1

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

Answer 2

您对javascript环境有误解。 MDN对此有很好的article。请参阅评论以了解您的错误：

<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>

Answer 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>

Answer 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>

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

4 个答案: