Использование jQuery в классе

Question

У меня проблема с областью действия.

У меня есть класс со свойством mouseX и mouseY.

Я хотел установить их с помощью jQuery, например:

// Store the mouse position at all times
$('#'+canvasId).mousemove( function(e) {
    this.mouseX = e.pageX-this.offsetLeft;
    this.mouseY = e.pageY-this.offsetTop;
});

Работает нормально, только this.mouseX остается в области действия функции. Я неявно объявил mouseX и mouseY в классе, используя this. Если я не сделаю, они становятся частными переменными, верно?

Answer 1

Я думаю, вам нужно что-то похожее на следующее:

// I usually put this at the top of my class declaration
var that = this;

// Store the mouse position at all times
$('#'+canvasId).mousemove( function(e) {
    that.mouseX = e.pageX-this.offsetLeft;
    that.mouseY = e.pageY-this.offsetTop;
});

Поскольку this меняет значение в обработчике событий, вам необходимо сохранить ссылку на него для дальнейшего использования;условное название для такой сохраненной ссылки: that.

Answer 2

Вы можете использовать небольшую функцию jQuery.proxy () .Примерно так:

var obj = {
  mouseX: 0,
  mouseY:0,
  el:$('#'+canvasId),
  mousemove: function(e) {
    this.mouseX = e.pageX-this.el.offsetLeft;
    this.mouseY = e.pageY-this.el.offsetTop;
  }
};

$('#'+canvasId).mousemove( jQuery.proxy( obj.mousemove, obj ) );

Конечно, вы больше не получаете доступ к исходному элементу jQuery через this , поэтому вы должны сохранить его как свойство объекта, что-то вроде this.el , заранее

Вы даже можете создать событие внутри объекта следующим образом:

this.el.mousemove( jQuery.proxy( this.mousemove, this ) );

Answer 3

Вы могли бы сделать что-то вроде этого:

// Store the mouse position at all times
var base = this;
// ...
$('#'+canvasId).mousemove( function(e) {
    base.mouseX = e.pageX-this.offsetLeft;
    base.mouseY = e.pageY-this.offsetTop;
});

Да, и да. Если вы не используете this для переменных в определении класса, вы не сможете получить к ним доступ через экземпляр.

Answer 4

Я неявно объявил mouseX и MouseY в классе, используя это. Если я разве они не становятся частными переменными, право

Использование this связывает эти свойства с текущей областью действия функции (которая в вашем случае является функцией jquery mousemove). Если вы удалите this, эти переменные станут глобальными. Частные свойства могут быть объявлены с использованием var.

Частные переменные:

// Store the mouse position at all times
$('#'+canvasId).mousemove( function(e) {
    var mouseX = e.pageX-this.offsetLeft;
    var mouseY = e.pageY-this.offsetTop;
});

Глобальные переменные:

// Store the mouse position at all times
$('#'+canvasId).mousemove( function(e) {
    mouseX = e.pageX-this.offsetLeft;
    mouseY = e.pageY-this.offsetTop;
});