我是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
的值)调用函数。