путать с ключевым словом «this» в jquery

Question

Пожалуйста, помогите, я не мог понять это.

function Tour(el) { 
    var tour = this; 
    this.el = el; 
    this.fetchPhotos = function() { 
    $.ajax('/photos.html', { 
     data: {location: tour.el.data('location')}, 
     context: tour, 
     success: function(response) { 
     this.el.find('.photos').html(response).fadeIn(); 
     }, 
     error: function() { 
     this.el.find('.photos').html('<li>There was a problem fetching the latest photos. Please try again.</li>'); 
     }, 
     timeout: 3000, 
     beforeSend: function() { 
     this.el.addClass('is-fetching'); 
     }, 
     complete: function() { 
     this.el.removeClass('is-fetching'); 
     } 
    }); 
    } 
    this.el.on('click', 'button', this.fetchPhotos); 
} 
$(document).ready(function() { 
    var paris = new Tour($('#paris')); 
}); 

в приведенной выше функции, я знаю context: tour наборы this внутри функции this.fetchPhotos ссылаться на тур. Поэтому мой вопрос, почему эта часть кода tour.el.data('location') изменится на this.el.data('location')?

Спасибо расширенный за помощь

Answer 1

Причина, по которой работает потому, что tour.el.data('location') вызывается из fetchPhotos.

Пока вы

new Tour().fetchPhotos(); 

и не

var f = new Tour().fetchPhotos; 
f(); 

замена будет работать.

Но делать

this.el.on('click', 'button', this.fetchPhotos); 

, как последний. Это не работает.

Answer 2

Как писал charlietfl, это другой контекст внутри обратных вызовов ajax, вы должны кэшировать this любой переменной перед вызовом ajax и использовать эту переменную. Как вы это делали в tour переменном:

function Tour(el) { 
    var tour = this; 
    this.el = el; 
    this.fetchPhotos = function() { 
    $.ajax('/photos.html', { 
     data: {location: tour.el.data('location')}, 
     context: tour, 
     success: function(response) { 
     tour.el.find('.photos').html(response).fadeIn(); 
     }, 
     error: function() { 
     tour.el.find('.photos').html('<li>There was a problem fetching the latest photos. Please try again.</li>'); 
     }, 
     timeout: 3000, 
     beforeSend: function() { 
     tour.el.addClass('is-fetching'); 
     }, 
     complete: function() { 
     tour.el.removeClass('is-fetching'); 
     } 
    }); 
    } 
    this.el.on('click', 'button', this.fetchPhotos); 
} 
$(document).ready(function() { 
    var paris = new Tour($('#paris')); 
}); 

Вне АЯКС вызова (как вяжущее событие щелчка) это нормально использовать this, но в тех функциях обратного вызова, он относится к этому обратному вызову обработчику