将 jquery-ui 回调连接到其处理程序类

Question

有趣的 JavaScript！我正在通过 CoffeeScript 学习它，它很有趣，但有时也令人惊讶。

我有一个 jquery-ui 滑块和一个自己的类 Slider，我在 Slider 构造函数中创建了 jquery-ui 滑块，并将 Slider.onChange 方法注册为 slide-ui 滑块 slide 和 change 的回调事件。

我不明白回调接收到的this 对象有什么用。它似乎是 jquery-ui 滑块对象，而不是我的 Slider 控制器。

为什么我需要它，因为它也在 event.target 字段中？

如何从 Slider 对象的方法中访问它？

我应该阅读文档吗？ （链接到文档赞赏！）

请多多包涵，接受一些咖啡，而不是 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) =>

看看会发生什么 (relevant doc section)。

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

JavaScript 中的this 值将根据调用函数的方式而改变。调用者可以使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

Answer 4

事件处理程序中的this指的是滑块。

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

当您移动此滑块时，它会将带有id=slider 的元素打印到控制台。没有创建Slider 对象，jQueryUI 只是将一堆样式和行为附加到所选元素以提供滑块功能。

我应该阅读文档吗？

总是。

Answer 5

在这里和其他地方总结一些答案和 cmets。

---

下划线

一位同事指点我underscore，我将方法与事件相关联的部分变成了这样：

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

它看起来足够好并且按预期工作。

但是添加了一个依赖... :(

---

jQuery

​​>

正如@Dennis 指出的那样，一个人可以做同样的事情，留在 jQuery 中。

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

如果我不在咖啡脚本中，这可能是我会使用的。无论如何我都在使用jQuery！但我并没有真正理解函数名称背后的原因。 _.bind 对我来说更有意义。

---

咖啡脚本

在 coffeescript 中使用 => 运算符，这是我正在寻找的实用简写：它与我最初的猜测只是一个字符差异。对coffeescript不感兴趣的人可能会对它的javascript等价物感兴趣。

咖啡脚本

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;
})();