подключение обратного вызова jquery-ui к его классу обработчика

Question

забавный JavaScript!Я изучаю его с помощью CoffeeScript, это забавно, но иногда удивительно.

У меня есть слайдер jquery-ui и собственный класс Slider, я создаю слайдер jquery-ui внутри конструктора Slider изарегистрируйте метод Slider.onChange в качестве обратного вызова для событий ползунка и пользовательского интерфейса slide и change.

Я не понимаю, для чего используется объект this, который получает обратный вызов.похоже, это объект-слайдер jquery-ui, а не мой контроллер Slider.

зачем он мне нужен, поскольку он также находится в поле event.target?

как получить доступ кСлайдер объекта из его метода?

я должен прочитать документацию?(ссылки в документы приветствуются!)

, пожалуйста, потерпите меня и примите немного кофе вместо javascript.

class Slider
  constructor: (itemId, @managed=[]) ->
    $('#' + itemId).slider
      value: 0
      orientation: "horizontal"
      min: 0
      max: 255
      length: 255
      animate: true
      slide: @onChange
      change: @onChange

  onChange: (event, ui) ->
    console.log this # the jquery-ui slider
    ...

Есть ли "лучший" или вНаименее распространенная / рабочая практика?

Answer 1

Существует сокращение для связывания:

Измените

onChange: (event, ui) ->

на

onChange: (event, ui) =>

и посмотрите, что произойдет ( соответствующий раздел документа ).

Answer 2

В JavaScript, а не только в jQuery или jQuery UI, this почти всегда ссылается на объект, вызывающий метод.Например:

$('.myDiv').click(function(){
    //inside here, 'this' refers to the .myDiv HTML element object because that's what's calling this anonymous callback function.
});

Я говорил «почти» всегда выше, потому что есть способы, которыми вы можете заставить this ссылаться на что-то еще, но я предполагаю, что это не то, что происходит в вашем случае.

Если вы разместите некоторый код, я мог бы более конкретно указать, что this относится к вашему конкретному случаю.

Answer 3

обобщая некоторые ответы и комментарии, здесь и в других местах.

---

подчеркивание

коллега указал мне на подчеркивание , часть, где я общаюсьметод к событию стал следующим:

    slide: _.bind(this.onChange, this),
    change: _.bind(this.onChange, this)

, который выглядит достаточно хорошо и работает, как ожидалось.

, но добавляет зависимость ...: (

---

jQuery

, как указал @Dennis, можно делать то же самое, оставаясь в jQuery.

    slide: $.proxy(this.onChange, this),
    change: $.proxy(this.onChange, this)

, что, возможно, я бы использовал, если бы не был в coffeescript. Яв любом случае, используя jQuery! но я не понимаю причину названия функции. _.bind имеет для меня больше смысла.

---

coffeescript

в coffeescript используется один => оператор, практическое сокращение для того, что я искал: это всего лишь ОДНО символьное отличие от моего первоначального предположения. Его эквивалент javascript может заинтересовать тех, кто не заинтересован в coffeescript.

coffeescript

class Slider
  constructor: (@itemId) ->
    @slider = $('#' + @itemId).slider
      value: 0
      orientation: "horizontal"
      change: @onChange

  onChange: (event, ui) =>
    ###
    ...
    ###

JavaScript

var Slider;
var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
Slider = (function() {
  function Slider(itemId) {
    this.itemId = itemId;
    this.onChange = __bind(this.onChange, this);
    this.slider = $('#' + this.itemId).slider({
      value: 0,
      orientation: "horizontal",
      change: this.onChange
    });
  }
  Slider.prototype.onChange = function(event, ui) {
    /*
        ...
        */
  };
  return Slider;
})();

Answer 4

this в обработчике событий ссылается на ползунок.

$("#slider").slider({
    change: function() {
        console.log(this);
    }
});

Когда вы перемещаете этот ползунок, он напечатает элемент с id=slider на консоли. Slider объект не создан, jQueryUI просто присоединяет набор стилей и поведения к выбранным элементам для обеспечения функциональности слайдера.

мне читать документацию?

Всегда.

Answer 5

Значение this в JavaScript будет меняться в зависимости от способа вызова функции. Вызывающий абонент может сделать this практически любым, что им захочется. Обычно в таких средах, как jQuery, значение this для обработчика события является элементом DOM, в котором произошло событие.

В этом сценарии неясно, что будет this, потому что мы видим только обработчик, а не вызов.

Slider.prototype.onChange = function (event, ui) { 
  ...
}

Чтобы объяснить, что такое this, нам нужно увидеть использование onChange. Например

var slider = new Slider();
slider.onChange();  // this === slider in onChange

var obj = {};
slider.onChange.apply(obj); // this === obj