计划,每天学习两小时,坚持带来大改变。

理解 backbone.js 中的 bind 和 bindAll 方法,关于如何在方法中指定其中的 this,包含apply方法的说明

前端开发 阿尤 2636浏览 0评论
在backbone.js的学习过程中,被bind和bindAll弄得有点晕,这里包括underscore.js的bind和bindAll,以及JQuery提供的bind方法。
在一篇En博客中学习,写下这篇笔记

1、首先说熟悉的JQuery的bind,引用api帮助文件的内容即可很清晰地理解其使用意义和方法:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
dom.bind(type,[data],function(eventObject));
 
dom.bind(type,[data],false);
 
dom.bind(events);
 
 
//例子
 
//当每个段落被点击的时候,弹出其文本:
$("p").bind("click",function(){
  alert( $(this).text() );
});
 
//同时绑定多个事件类型:
$('#foo').bind('mouseenter mouseleave',function() {
  $(this).toggleClass('entered');
});
 
//同时绑定多个事件类型/处理程序:
$("button").bind({
  click:function(){$("p").slideToggle();},
  mouseover:function(){$("body").css("background-color","red");}, 
  mouseout:function(){$("body").css("background-color","#FFFFFF");} 
});
 
//你可以在事件处理之前传递一些附加的数据:
functionhandler(event) {
  alert(event.data.foo);
}
$("p").bind("click", {foo:"bar"}, handler)
 
//通过返回false来取消默认的行为并阻止事件起泡:
$("form").bind("submit",function() {returnfalse; })
 
//通过使用 preventDefault() 方法只取消默认的行为:
$("form").bind("submit",function(event){
  event.preventDefault();
});
 
//通过使用 stopPropagation() 方法只阻止一个事件起泡:
$("form").bind("submit",function(event){
  event.stopPropagation();
});

2、underscore.js的apply方法
apply主要作用是让我们可以控制方法中this指代的值,下面用代码表述:
1
2
3
4
5
varfunc =functionbeautiful(){
  alert(this+' is beautiful');
};
func.apply('Internet');
//输出Internet is beautiful

以上例子只帮我们理解apply的作用,实际上,apply的意义何在,请看下例:
1
2
3
4
5
6
7
8
9
10
functionDeveloper(skill) {
  this.skill = skill;
  this.says =function(){
    alert(this.skill +' rocks!');
  }
}
varjohn =newDeveloper('Ruby');
varfunc = john.says;
func();
//输出undefined rocks!

上例可看出,在给调用对象john中的says方法定义一个单独的方法func后,执行func,this将被认为是func所处的对象,而不是john。这时apply可以解决问题,代码如下:
1
2
3
4
5
6
7
8
9
10
functionDeveloper(skill) {
  this.skill = skill;
  this.says =function(){
    alert(this.skill +' rocks!');
  }
}
varjohn =newDeveloper('Ruby');
varfunc = john.says;
func.apply(john);
//输出Ruby rocks!

这样做太复杂,所以需要用bind和bindAll来简化和规范化,请往下看。

3、underscore.js的bind方法
1
2
3
4
5
6
7
8
9
10
functionDeveloper(skill) {
  this.skill = skill;
  this.says =function(){
    alert(this.skill +' rocks!');
  }
}
varjohn =newDeveloper('Ruby');
varfunc = _.bind(john.says, john);//绑定的方法是john对象执行says方法,里面的this指代的是第二个参数john
func();
//输出Ruby rocks!

注意:_.bind()返回的值才是绑定的方法,而不会影响里面绑定的方法本身,看下例:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
window.ProductView = Backbone.View.extrend({
  initialize:function() {
    _.bind(this.render,this);
    this.model.bind('change',this.render);
  }
});
//这样做的结果是change触发的是原this.render,方法中的this依然是不可性预计
 
 
window.ProductView = Backbone.View.extrend({
  initialize:function() {
    varf_render=_.bind(this.render,this);
    this.model.bind('change', f_render);
  }
});
//这是正确做法,或者更直接简单:
 
window.ProductView = Backbone.View.extrend({
  initialize:function() {
    this.model.bind('change', _.bind(this.render,this));
  }
});
 
//最简单当然是用_.bindAll:
window.ProductView = Backbone.View.extrend({
  initialize:function() {
   _.bindAll(this,this.render);
   this.model.bind('change',this.render);
  }
});


4、underscore.js的bindAll方法
1
2
3
4
5
6
7
8
9
10
11
12
functionDeveloper(skill) {
  this.skill = skill;
  this.says =function(){
    alert(this.skill +' rocks!');
  }
}
varjohn =newDeveloper('Ruby');
_.bindAll(john,'says');//绑定的方法是john中的says方法,里面的this指代john
                         //可以一次过指定this到多个方法:_.bindAll(john,'says','work','gohome');
varfunc = john.says;
func();
//输出Ruby rocks!

参考:http://blog.bigbinary.com/2011/08/18/understanding-bind-and-bindall-in-backbone.html


原文地址:http://gxxsite.com/content/view/id/132.html

转载请注明:阿尤博客 » 理解 backbone.js 中的 bind 和 bindAll 方法,关于如何在方法中指定其中的 this,包含apply方法的说明

游客
发表我的评论 换个身份
取消评论

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  • 验证码 (必填)点击刷新验证码