`this` и область применения в Javascript обратного вызова

Question

Я покажу код непосредственно:

disable: function(e){ 
    that = this; 
    var haha = this; 
    $.post(url, function(){ 
     console.log(this);// (why ajax object here? 
     console.log(that);// (I understand this one works 
     console.log(haha);// ReferenceError 
    }) 
} 

Что я запутаться здесь есть:

1. Почему this в обратном вызове не относится к внешним одной? Я думаю, this в обратном вызове следует за обязательной привязкой по умолчанию.
2. Почему haha не упоминается как that do? Я думаю, что когда haha не найден в локальной области, он перейдет в внешний охват.

Я знаю, что использование that не является хорошим способом. Вот почему я попробовал haha, но это не удалось.

Answer 1

Ответ на вопрос 1: Потому что вы можете переназначить его волю-неволей в Javascript и JQuery случается для jQuery.post(), а the documentation for jQuery.ajax() состояний:

this ссылки во всех обратных вызовах является объектом в context в настройках передан $.ajax; если context не указан, this - это ссылка на настройки Ajax.

Как правило, вы не должны, вероятно, никогда не полагаться на библиотеку Javascript для не перепривязывают this. Если вам нужно его значение во вложенном обратном вызове, просто сохраните его. Либо в другом именем переменной, или с помощью Function.bind():

$(function() { 
    var self = this; 
    $.post("/echo/json/", (function() { 
     console.log("self", self); // this will be the document itself 
     console.log("this", this); // as will self 
     console.log("self === this", self === this); // should output true 
    }).bind(this)); 
}); 

Пример на jsFiddle: https://jsfiddle.net/millimoose/Lx2oxobg/. Для чего это важно: сильно предпочитает использовать отдельную переменную для удобочитаемости, потому что вы можете дать ей описательное имя и тот факт, что this не отскакивает и что вы эффективно переназначили один из параметров обратного вызова , не скрывается полностью после блок, для которого это верно.

Что касается вашего вопроса 2, я не могу воспроизвести его, см. Мою вторую скрипку: https://jsfiddle.net/millimoose/zL352rzf/.Как утверждают другие, вы, вероятно, фактически не получаете ReferenceError от самого console.log(), учитывая ваш скриншот.

Answer 2

Я думаю, что вы пытаетесь получить доступ к этим значения из консоли ... в этом случае haha не будет работать, как он является локальным для функции, где, как вы создали that как глобальную переменную (так как нет var б/у).

Но это неправильный шаблон, потому что какой-то другой скрипт может изменить значение that до завершения запроса ajax.

Answer 3

Функция обратного вызова работает в другой своей области, поэтому это относится к ней, а не к ее определению. вы можете использовать функцию привязки или применить или вызвать функции для ее привязки. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

так что это относится к чему-то другому, но поскольку это объявлено в области, в которой была объявлена ​​функция, она все еще существует.

Answer 4

Попробуйте использовать context вариант $.ajax() для установки this из success, error Callbacks

disable: function(e) { 
    $.ajax({ 
     context: this 
     , type:"POST" 
     , url:url 
     , success: function() { 
      console.log(this); 
     } 
     , error: function() { 
      console.log(this) 
     } 
    }) 
}