Question

我是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作为参数传递，但事件对象呢？它会将“自我”解释为事件对象吗？

Answer 1

一个标准策略是利用闭包：

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

另一种是创建绑定函数：

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

这两种技术都使用预期的上下文（值this）调用函数。

将this / self / that绑定到事件回调时，可以将其称为事件回调

1 个答案: