如何在閉包內部訪問“ this”？

Question

我對JavaScript和jQuery還是很陌生，但是在編寫一些代碼時遇到了麻煩。

HTML：

<div class="toggle" style="display: block; width: 200px; height: 200px; background-color: red;">test</div>

JavaScript的：

jQuery(document).ready(
    function()
    {
        jQuery(".toggle").on("click", function() {
            console.log("let the toggling begin!");

            jQuery(this).slideToggle(600, function(){ // slide up
                setTimeout(function(){ // wait 4 sec, then slide back down
                    jQuery(this).slideToggle(600)
                }, 4000);
            });
        });
    }
);

因此，您的想法是單擊div，然后將其向上滑動，然后在4秒鍾后向下滑動。 沒用

JSFIDDLE： http : //jsfiddle.net/zEqN9/2/

但是，如果我將每個閉包內部的this更改為".toggle" ，則它確實可以工作。

JSFIDDLE： http : //jsfiddle.net/YZxMb/

顯然，問題是我this使用。

我嘗試將this作為參數傳遞到兩個閉包函數中的每個函數中，但這給了錯誤Unexpected token this 。

如何從內部函數訪問this變量？

Answer 1

在slideToggle函數中創建this的引用。

 jQuery(document).ready(
    function()
    {
        jQuery(".toggle").on("click", function() {
            console.log("let the toggling begin!");

            jQuery(this).slideToggle(600, function(){ // slide up
                var self = this; // <-- notice this
                setTimeout(function(){ // wait 4 sec, then slide back down
                    jQuery(self).slideToggle(600)
                }, 4000);
            });
        });
    }
);

Answer 2

使用bind為您希望在上下文之外調用的函數指定一個this 。

var foo = {
    bar: function () {
        setTimeout(function () { // though in a setTimeout
            console.log(this);
        }.bind(this), 0); // binding to `this` here means
    }
};

foo.bar(); // invoking it still has `this` of `foo`

Answer 3

原因是，對於一個jQuery事件，函數的上下文中明確設置，使this指的是目標元素-這是由jQuery的為你做。 但是， setTimeout的匿名函數沒有為您設置該上下文-它獲取默認的全局上下文，因此this引用該窗口。

您需要做的是獲取對click事件上下文的引用，然后在超時中使用該引用：

jQuery(function () {
    jQuery(".toggle").on("click", function () {
        var $this = $(this);

        $this.slideToggle(600, function () { // slide up
            setTimeout(function () { // wait 4 sec, then slide back down
                $this.slideToggle(600);
            }, 4000);
        });
    });
});

但是，正如評論中指出的那樣，可以這樣寫：

jQuery(function () {
    jQuery(".toggle").click(function () {
        jQuery(this).slideToggle(600).delay(4000).slideToggle(600);
    });
});

Answer 4

var yourThing = jQuery(this);

yourThing.slideToggle(600, function(){ // slide up
     setTimeout(function(){ // wait 4 sec, then slide back down
          yourThing.slideToggle(600)
     }, 4000);
});

Answer 5

只需在代碼中添加以下行即可了解原因：

setTimeout(function(){ // wait 4 sec, then slide back down
      console.log(jQuery(this)); //this one
      jQuery(this).slideToggle(600)
      }, 4000);

打開控制台。 您會看到，在setTimeout函數中，$（this）引用窗口對象。

Answer 6

您需要為此創建一個引用，因此在運行與setTimeout關聯的函數時可以傳遞此引用。

 jQuery(document).ready(
        function()
        {
            jQuery(".toggle").on("click", function() {
                console.log("let the toggling begin!");
                var that = this; // <--- reference to this
                jQuery(this).slideToggle(600, function(){ // slide up
                    setTimeout(function(){ // wait 4 sec, then slide back down
                        jQuery(that).slideToggle(600)
                    }, 4000);
                });
            });
        }
    );