Question

问题在于对象的变量：

this.timer

它不是“全局”，所以当我点击停止按钮时，变量的值是错误的如果我声明一个全局变量MyObject（loke var mytimer;）并使用它而不是this.timer，它就可以工作。

这是我的代码：

<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <title></title>
        <script type="text/javascript" language="JavaScript">               
            var MyObject = {

                init: function(){
                    this.timer = 0;
                    document.getElementById("btn1").onclick = function(){
                        MyObject.RunIt();
                    };
                    document.getElementById("btn2").onclick = function(){
                        clearInterval(this.timer);
                    };

                },

                RunIt: function(){
                    var x=0;
                    this.timer = setInterval(function(){
                x++;
                        document.getElementById("spn").innerHTML=x;
                    }, 1000);

                }

            };


        </script>
        <style type="text/css">
        </style>
    </head>
    <body onload="MyObject.init();">
        <input type="button" id="btn1" value="Run"/>
        <input type="button" id="btn2" value="Stop"/>
        <span id="spn"></span>
    </body>
</html>

Answer 1

问题在于：当你将“onclick”设置为这样的函数调用时，调用中没有对象引用。浏览器调用你的函数来执行“clearInterval”，但是“this”并没有指向你的对象 - 事实上，它指的是按钮元素本身。

这是解决问题的一种方法：

var self = this;
document.getElementById('btn2').onclick = function() {
  clearInterval(self.timer);
};

我知道，当人们敦促他们调查jQuery或其他一些现代的Javascript框架时，Stackoverflow上的问题有时会让人烦恼，但这只是一种更好的做事方式。

Answer 2

这是编写javascript代码时的常见问题; 范围。

在元素的 .onclick 方法中，范围（this）是元素本身而不是您所在的类（MyObject）。

我使用这个/那个方法;如下所示：

            init: function(){
                this.timer = 0;
                document.getElementById("btn1").onclick = function(){
                    MyObject.RunIt();
                };

                var that = this;
                document.getElementById("btn2").onclick = function(){
                    /** 
                        Here i use 'that' instead of 'this';
                        because 'this' is the button element
                    */
                    clearInterval(that.timer);
                };

            },

Answer 3

~~只有当对象由this创建时，才能通过new访问对象。~~

~~代码中的this引用window对象。~~在事件处理程序中，它引用相应的HTML元素。

Read a detailled explanation.

~~您的MyObject声明是一个对象，但我们可以说它不是一个对象实例。 JS中存在差异。~~

对象实例示例：

        function MyClass() {
                this.timer = 0;

                this.RunIt = function() {
                        var x=0;
                        this.timer = setInterval(function(){
                                x++;
                                document.getElementById("spn").innerHTML=x;
                        }, 1000);
                };

                var me = this; // alias to current "this"

                document.getElementById("btn1").onclick = function(){
                    // "this" refers to btn1, use me
                    me.RunIt();
                };
                document.getElementById("btn2").onclick = function(){
                    // "this" refers to btn2, use me
                    clearInterval(me.timer);
                };
        }

        var MyObject = new MyClass();

请注意，在JavaScript中构建对象的方法有很多种。

编辑：它包含另一个错误：事件处理函数将作为HTML元素的成员执行。因此处理程序中的this引用HTML元素，而不是对象。

编辑：修正了代码

编辑：糟糕的一天，不要听我的话; - ）

对象的全局变量

3 个答案: