Resolve these two chaotic scenes of this, and make its direction clear!

This always points to the owner of the current function. In the constructor, this points to the newly created object, indicating that the owner of the constructor is the newly created object. But there are two scenarios that can cause confusion in this direction:

Timer added

When new goes to create an object, this points to the newly created object, a1, and outputs 10 when we call a1.show().

        function Aaa(){
            this.a = 10;
        }
        Aaa.prototype.show = function(){
            alert(this.a);
        }
        var a1 = new Aaa();
        a1.show();//10

But when we add a timer to the constructor, let it call this.show in four seconds and output undefined.

        function Aaa(){
            this.a = 10;
            setInterval(this.show,4000);
        }

        Aaa.prototype.show = function(){
            alert(this.a);
        }
        var a1 = new Aaa();
        a1.show();

We print this on the prototype method and find that four seconds later, this points to the current window. this.show was originally the method of a1, but when the parameter is passed to the timer, this points to the window, and the owner of the function becomes window.

        function Aaa(){
            this.a = 10;
            setInterval(this.show,4000);
        }

        Aaa.prototype.show = function(){
            alert(this);
        }
        var a1 = new Aaa();
        a1.show();

To avoid this situation, we assign this to a new variable _this and store this before giving the timer parameters. Now let's execute a1.show() again, and print 10 in 4 seconds, so that there's no point of confusion.

    function Aaa(){
        this.a = 10;
        //Set up a variable and store this
        var _this = this;
        /*
            this.show function is passed to the timer when the parameters are given.
        */
        setInterval(function(){
            _this.show();
        },4000);
    }
    Aaa.prototype.show = function(){
        alert(this.a);//10
    }

    var a1 = new Aaa();
    a1.show();//10

Event binding

Now create a Bbb constructor, generate a B1 object through new, and call the b1.show() method to output 20.

        window.onload = function(){
            function Bbb(){
                this.b = 20;
            }

            Bbb.prototype.show = function(){
                alert(this.b);
            }

            var b1 = new Bbb();
            b1.show();//20

Add a button to the page, place the method in window.onload, get the button, add a click event to the button, and bind this.show to the button. When the button is clicked, the. show function is executed with the output value undefined.

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        window.onload = function(){
            function Bbb(){
                this.b = 20;
                var oBtn = document.getElementById("btn1");
                oBtn.onclick = this.show();//undefined
            }

            Bbb.prototype.show = function(){
                alert(this.b);
            }
            var b1 = new Bbb();
            b1.show();//20
        }
    </script>
</head>
<body>
    <button id = "btn1">Button</button>
</body>

We also output this on the prototype method. When the page is loaded, this points to the current object [Object], but after clicking the button, this points to Button [ObjectHTML ButtonElement].

            Bbb.prototype.show = function(){
                alert(this);
            }

Adding a timer is to pass this.show as a parameter, and event binding assigns this.show as a value to Button. Now we still store this in _this, and then write the method in function when binding the event to Button, so that this points to the original object.

        window.onload = function(){
            function Bbb(){
                this.b = 20;
                var _this = this;
                var oBtn = document.getElementById("btn1");
                /*
                    Assign this.show to the click of the button
                */
                oBtn.onclick = function(){
                    _this.show()
                }
            }

            Bbb.prototype.show = function(){
                alert(this.b);
            }

            var b1 = new Bbb();
            b1.show();//20

Tags: Javascript

Posted on Tue, 10 Sep 2019 02:10:43 -0700 by phenley