在jquery中与'this'关键字混淆

时间:2013-11-11 06:36:26

标签: javascript jquery function object

请帮助,我无法弄明白。

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函数中的thisthis.fetchPhotos来引用Tour。所以我的问题是为什么代码tour.el.data('location')的这一部分可以更改为this.el.data('location')

先谢谢你的帮助

2 个答案:

答案 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,但在那些回调函数中,它引用了该回调处理程序