Question

我对绑定功能的细节有疑问。这是一个例子：

// Parent class
function Widget(width, height) {
  this.width = width || 50;
  this.height = height || 50;
  this.$elem = null;
}

Widget.prototype.render = function($where) {
  if (this.$elem) {
    this.$elem.css({
      width: this.width + "px",
      height: this.height + "px"
    }).appendTo($where);
  }
};

// Child class
function Button(width, height, label) {
  // "super" constructor call
  Widget.call(this, width, height);
  this.label = label || "Default";
  this.$elem = $("<button>").text(this.label);
}

// make `Button` "inherit" from `Widget`
Button.prototype = Object.create(Widget.prototype);
// override base "inherited" `render(..)`
Button.prototype.render = function($where) {
  // "super" call
  Widget.prototype.render.call(this, $where);
  this.$elem.click(this.onClick.bind(this));
};

Button.prototype.onClick = function(evt) {
  console.log("Button '" + this.label + "' clicked!");
};

$(document).ready(function() {
  var $body = $(document.body);
  var btn1 = new Button(125, 30, "Hello");
  var btn2 = new Button(150, 40, "World");
  btn1.render($body);
  btn2.render($body);
});

上面的代码片段来自书[你不知道JS：这个＆amp; amp;对象原型]，问题是代码：

this.$elem.click(this.onClick.bind(this));

由于$elem被分配给按钮，但为什么this.onClick.bind(this)可以绑定到Button.prototype.onClick的click事件。这个语法让我困惑，有没有人知道确切的原因？

非常感谢。

Answer 1

使用jQuery附加事件监听器时，如：this.$elem.click(...);，jQuery会自动将元素（在本例中为button元素）绑定到回调函数的上下文。换句话说，jQuery在事件处理程序中使用this关键字来引用触发事件的元素。

在您的情况下，onClick函数的代码（在Button.prototype中）期望this引用Button对象的当前实例，而不是HTML元素。因此，您必须使用bind - this.onClick.bind(this)将正确的对象显式绑定到回调函数的上下文。

<强> TL; DR

如果您没有使用bind，则回调函数中的this关键字将引用所单击的button元素而不是Button对象实例。

关于jQuery onclick绑定函数的使用在书中[你不知道JS：这个＆amp;对象原型]

1 个答案: