1

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

4 回答 4

0

中的功能onOff是私有的，它不会作为公共财产发布。更改function setState(newState) { ... }为this.setState = function(newState) { ... }。

于 2014-07-03T04:27:28.010 回答
0

您对 javascript 上下文有误解。MDN 有关于它的好文章。查看评论以了解您错在哪里：

<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>
于 2014-07-03T04:27:49.510 回答
0

尝试这个

<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>
于 2014-07-03T04:29:47.310 回答
0

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

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>
于 2014-07-03T04:42:37.420 回答