Использование $ (this) внутри setInterval в jQuery

Question

Я использую этот код внутри плагина jQuery:

setInterval(function() {                        
   localStorage.setItem("flag", "set");
   var data = $(this).serializeArray();
   console.log($(this));
   $.each(data, function(i, obj) {
      localStorage.setItem(obj.name, obj.value);
   });
   console.log('saved');
   console.log(localStorage);                       
}, 5000);

if (localStorage.getItem("flag") == "set") {
   alert("This form has saved data!");
   var data = $(this).serializeArray();
   console.log($(this));
   $.each(data, function(i, obj) {
      $("[name='" + obj.name +"']").val(localStorage.getItem(obj.name));
   });                      
}

Как ни странно, первый $(this) содержит форму (на которой запущен плагин), а второй $(this) содержит DOMWindow.Почему два $(this) содержат разные вещи?Это потому, что первый находится внутри setInterval?

Answer 1

Да, у вас есть анонимная функция (функция без имени) в объявлении setInterval, которая создает свою собственную область.

Первый console.log($(this)) будет иметь доступ ко всему глобальному или чему-либо установленному внутри себя, а второй console.log($(this)) будет иметь доступ только к глобальным переменным (и, как вы узнали, this в глобальной области window объект).

Answer 2

Вы можете использовать простое замыкание или использовать $.proxy: http://api.jquery.com/jQuery.proxy/

var repeat = function() {                        
    localStorage.setItem("flag", "set");
    var data = $(this).serializeArray();
    .......
}

setInterval($.proxy(repeat, $("#form")), 500);

Что-то в этом роде ...

Answer 3

Дело не в том, что оно внутри setInterval, а в том, что оно внутри этой анонимной функции.

Первый $(this) находится в области действия анонимной функции. Второй $(this) находится в глобальной области видимости.

Answer 4

this является ссылкой на текущий объект. Он представляет контекст функции. Ссылка по умолчанию является глобальной (в нашем случае это объект window).
Поскольку обратный вызов setInterval выполняется в глобальной области видимости, this всегда будет указывать на объект окна.
Вот несколько примеров, иллюстрирующих связь между this и областью действия:

var a = "window";
function f(){
    console.log(this.a);
}
f();// scope = window
var obj = {a:'object',f:f};
obj.f();// scope = object