Javascript & # 39;这个# 39;上下文使用jQuery

Javascript 'this' context with jQuery

本文关键字：jQuery 上下文 Javascript 这个      更新时间：2023-09-26

我有一个对象ChatHandler，它拥有一个div，并且它的div包含一些其他dom元素。然后将事件处理程序绑定到其中包含的DOM元素的某个子集，如下所示:

$(this.element).find('.render-box').unbind('click').click(this.handleBoxClick);

，我指定了一些函数来处理这些点击。

ChatHandler.prototype.handleBoxClick = function(event) {
    // 'this' refers to a DOM object. 
    var partner = $(this).attr('partnerid');
    // But now I want to be able to access a public attribute of this object.
    this.myAttribute = partner;
}

如何访问ChatHandler对象的公共成员/函数?我假设我不能改变执行上下文，但一定有一些方法可以做到这一点，我错过了。

使用$.proxy绑定this值

$(this.element).find('.render-box')
               .unbind('click')
               .click($.proxy(this, "handleBoxClick"));

或者如果您需要在处理程序中保留默认的this值，您可以将您的对象作为事件数据传递。

$(this.element).find('.render-box')
               .unbind('click')
               .click(this, this.handleBoxClick);

然后在处理程序中通过event.data访问它。

ChatHandler.prototype.handleBoxClick = function(event) {
    var partner = $(this).attr('partnerid');
    event.data.myAttribute = partner;
}

通过一个知道ChatHandler对象的包装器函数显式传递元素。

this将引用该对象，并且该元素仍然可以作为参数使用。

var handler = this;
$(this.element).find('.render-box').unbind('click')
  .click(
    function(event) {
      handler.handleBoxClick(this, event);
    } 
  );
// ...
ChatHandler.prototype.handleBoxClick = function(el, event) {
  var partner = $(el).attr('partnerid');
  this.myAttribute = partner;
};

放弃原型，我将删除任何this关键字-它将变得混乱:

ChatHandler = function() {
    var self = this;
    self.element = document.getElementById("wtv");
    self.myAttribute = undefined;
    self.handleBoxClick = function() {
        var partner = $(self.element).attr('partnerid');
        self.myAttribute = partner;
    }
    $(self.element).find('.render-box').unbind('click').click(self.handleBoxClick);
};
new ChatHandler();
相关文章：