将this/self/that绑定到事件回调，当它可以不作为事件回调调用时

Binding this/self/that to an event callback when it can be called not as an event callback

本文关键字：事件 回调 不作为 调用 绑定 that this self      更新时间：2023-09-26

我是javascript模块化编程的新手，我经常遇到这个问题，我不确定处理它的最佳方法是什么。

假设我有一个方法，我想在某些情况下作为事件处理程序使用，并根据url参数在其他情况下作为模块初始化的常规流程的一部分。

var people = {
    render: function(data){
        // This takes data from a JSON object and turns it into HTML
        var html = '';
        for(var i; i < data.length; i++){
             html += '<li><a data-firstname="'+data.firstName+'" data-lastname="'+data.lastName+'">Some text</a>';
        }
        $('#element').html(html).find('li a').click(this.getFullName);
    },
    getFirstName: function(event){
         // This method is called both as an event handler or as part of the initialization process.
         if(event !== undefined){
             event.preventDefault();
         }
         var fullName = $(this).attr('data-firstname') || someOtherSource.firstName;
    },
    someOtherMethod: function(){
          this.getFirstName();
    }
};

关于它的事情是，虽然我失去了'this'关键字，因为这需要引用正在被操作的DOM元素。我知道我可以这样做:

var self = this;
$(#element).click(self.getFirstName.bind(this, self));

传递self作为参数，但是事件对象呢?它会解释"自我"作为事件对象吗?

一个标准策略是使用闭包:

var self = this;
$(#element).click( function(evt) { self.getFirstName(evt); } );

另一种是创建一个绑定函数:

$(#element).click(this.getFirstName.bind(this));

两种技术都使用预期的上下文(this的值)调用函数。

相关文章：