请帮助,我无法弄明白。
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。所以我的问题是为什么代码tour.el.data('location')
的这一部分可以更改为this.el.data('location')
?
先谢谢你的帮助
答案 0 :(得分:3)
有效的原因是因为tour.el.data('location')
调用了fetchPhotos
。
只要你这样做
new Tour().fetchPhotos();
而不是
var f = new Tour().fetchPhotos;
f();
替换将起作用。
但是在做
this.el.on('click', 'button', this.fetchPhotos);
就像后者。它不起作用。
答案 1 :(得分:0)
正如charlietfl所写,这是ajax回调中的一个不同的上下文,你必须在ajax调用之前将this
缓存到任何变量并使用该变量。就像你在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'));
});
在ajax调用之外(如click事件绑定器)可以使用this
,但在那些回调函数中,它引用了该回调处理程序