Question

我正在尝试将$(..).click(function () {...放在javascript对象中，但我觉得我要求不可能。

在这个对象中可以有几个Dom元素，所以我认为制作一个jQuery扩展也被排除在外？但我承认，我无法理解如何制作一个jQuery扩展，在这方面仍有一些概念让我无法理解。

无论如何，这是我要做的一个例子，即使它不起作用：

$(document).ready(function() {
  class bt_Fab {
    constructor($elem_ID, $messageBox_ID, message) {
      this.$_ID = $elem_ID;
      this.$_ID_MsgBox = $messageBox_ID;
      this._msg = message;

      this.$_ID.click(function() {
        this.$_ID_MsgBox.text(this._msg); // does nothing...
      });
    }
  };

  var
    myOneButton = new bt_Fab($('#btn_one'), $('#messageBox'), 'message from button one!'),
    myTwoButton = new bt_Fab($('#btn_two'), $('#messageBox'), 'message from button two!');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='btn_one'>button One</button>
<button id='btn_two'>button Two</button>
<!-- lot of html here -->
<div id="messageBox">... </div>

[更新编辑]（适用于@Sam Hanley＆amp; @meagar）这个问题与How to access the correct `this` inside a callback?不同因为这个问题是关于在Javascript对象中使用jQuery函数;它们与Javascript对象模型中this的核心使用无关。

Answer 1

在jQuery中，在$.click()之类的事件处理程序中，this关键字将覆盖发件人对象的引用，在本例中为$_ID。在this.$_ID.click中，this实际上是该类的实例。在点击处理程序内部，即function() { this.msgBox... }，this指的是被点击的元素。

当我在javascript中创建一个类时，我通常创建一个名为my的类变量，我在类的构造函数中设置为this。当您使用jQuery避免混淆时，不要使用this my变量。

有时候this被覆盖真的很好，但是当你定义一个类时，它就太可怕了。

如何把jQuery $（..）。click（function（）{在javascript对象里面？

1 个答案: