Objects's global variable_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2022-12-19 21:47 出处：网络

The problem is with object\'s variable: this.timer it\'s not \"global\", so when I click the stop button theval开发者_如何学Goue of the variable is wrong.

相关专题：javascript

The problem is with object's variable:

this.timer

it's not "global", so when I click the stop button the val开发者_如何学Goue of the variable is wrong.

If I declare a global variable MyObject (loke var mytimer;) and use it instead this.timer, it works.

This is my code:

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

The problem is this: when you set "onclick" to a function call like that, there's no object reference in the call. The browser calls your function to do the "clearInterval", but "this" is not pointing to your object - in fact, it's pointing at the button element itself.

Here's one way to work around the problem:

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

I know that question-askers on Stackoverflow get annoyed sometimes when people urge them to investigate jQuery or some other modern Javascript framework, but it's simply a better way to do things.

This is a common problem in writing javascript code; the Scope.

in an .onclick method on an element, the scope (this) is the element itself not the class you are in (MyObject).

i use this/that method; like below:

            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);
                };

            },

~~You can access an object through this only if the object was created by new.~~

~~The this in your code refers to the window object.~~ In the event handlers it refers to the respective HTML element.

Read a detailled explanation.

~~Your MyObject declaration is an object, but lets say that it is not an object instance. There is a difference in JS.~~

Object instance example:

        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();

Note, that there are many different ways to construct objects in JavaScript.

EDIT: it contains another bug: the event handler functions will be executed as members of the HTML element. So this in the handlers refers to the HTML element, not to your object.

EDIT: fixed the code

EDIT: Bad day, don't listen to me ;-)