转载自:http://gxxsite.com/content/view/id/132.html

在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");} 
});
 
//你可以在事件处理之前传递一些附加的数据:
function handler(event) {
  alert(event.data.foo);
}
$("p").bind("click", {foo: "bar"}, handler)
 
//通过返回false来取消默认的行为并阻止事件起泡:
$("form").bind("submit", function() { return false; })
 
//通过使用 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
var func = function beautiful(){
  alert(this + ' is beautiful');
};
func.apply('Internet');
//输出Internet is beautiful

  以上例子只帮我们理解apply的作用,实际上,apply的意义何在,请看下例:

1
2
3
4
5
6
7
8
9
10
function Developer(skill) {
  this.skill = skill;
  this.says = function(){
    alert(this.skill + ' rocks!');
  }
}
var john = new Developer('Ruby');
var func = john.says;
func();
//输出undefined rocks!

  上例可看出,在给调用对象john中的says方法定义一个单独的方法func后,执行func,this将被认为是func所处的对象,而不是john。这时apply可以解决问题,代码如下:

1
2
3
4
5
6
7
8
9
10
function Developer(skill) {
  this.skill = skill;
  this.says = function(){
    alert(this.skill + ' rocks!');
  }
}
var john = new Developer('Ruby');
var func = john.says;
func.apply(john);
//输出Ruby rocks!

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

3、underscore.js的bind方法

1
2
3
4
5
6
7
8
9
10
function Developer(skill) {
  this.skill = skill;
  this.says = function(){
    alert(this.skill + ' rocks!');
  }
}
var john = new Developer('Ruby');
var func = _.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() {
    var f_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
function Developer(skill) {
  this.skill = skill;
  this.says = function(){
    alert(this.skill + ' rocks!');
  }
}
var john = new Developer('Ruby');
_.bindAll(john, 'says'); //绑定的方法是john中的says方法,里面的this指代john
                         //可以一次过指定this到多个方法:_.bindAll(john,'says','work','gohome');
var func = john.says;
func();
//输出Ruby rocks!

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

理解 backbone.js 中的 bind 和 bindAll 方法,关于如何在方法中指定其中的 this,包含apply方法的说明[转载]的更多相关文章

  1. Backbone.js的技巧和模式

    Backbone.js的技巧和模式 Backbone.js的技巧和模式   本文由白牙根据Phillip Whisenhunt的<Backbone.js Tips And Patterns> ...

  2. Js apply方法与call方法详解 附ES6新写法

    我在一开始看到javascript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示例,总算是看的有点眉目了,在这里我做如下笔记,希望和大家 ...

  3. Js apply 方法 具体解释

    Js apply方法具体解释 我在一開始看到javascript的函数apply和call时,很的模糊,看也看不懂,近期在网上看到一些文章对apply方法和call的一些演示样例,总算是看的有点眉目了 ...

  4. Backbone中bind和bindAll的作用

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

  5. 全面解析JavaScript的Backbone.js框架中的Router路由

    这篇文章主要介绍了Backbone.js框架中的Router路由功能,Router在Backbone中相当于一个MVC框架中的Controller控制器功能,需要的朋友可以参考下. Backbone ...

  6. js中的bind方法的实现方法

    js中目前我遇见的改变作用域的5中方法:call, apply, eval, with, bind. var obj = { color: 'green' } function demo () { c ...

  7. js中的bind、apply、call、callee、caller的区别

    1.bind.apply与call的区别与使用 相同点:2者是函数原型的一个方法,因此调用者都必须是函数,第1个参数都是对象.作用是,用另一个对象替换当前对象,另一对象也即是你传的第一个参数.通常用于 ...

  8. js中bind,call,apply方法的应用

    最近用js的类写东西,发现一个无比蛋疼的事,那就是封装的类方法中的this指针经常会改变指向,失去上下文,导致程序错误或崩溃. 比如: function Obj(){ this.type = &quo ...

  9. Backbone.js中的where和findWhere

    小编的公司框架用的MVC框架依旧是Backbone.js,老大说框架不重要,重要的是框架的编程思想.于是乎,小编从头开始学习Backbone.走马观花似的看了下API文档,撸起袖子就是干.但是碰到一个 ...

随机推荐

  1. GBK

    GBK是汉字编码标准之一,全称<汉字内码扩展规范>(GBK即“国标”.“扩展”汉语拼音的第一个字母,英文名称:Chinese Internal Code Specification) ,中 ...

  2. Leetcode 38 Count and Say 传说中的递推

    class Solution { public: vector<string> vs_; Solution(){ "); vs_.push_back(t); ; i< ;+ ...

  3. Beta版本冲刺总结

    小组:The Expendables 本来这篇Beta版本的冲刺总结应该在演示前就要写的,但在演示前的几天我们小组还在对一些功能进行反复的测试和修改,所以就将冲刺总结延后再写. 一.项目预期计划 改进 ...

  4. MATLAB画ROC曲线,及计算AUC值

    根据决策值和真实标签画ROC曲线,同时计算AUC的值 步骤: 根据决策值和真实标签画ROC曲线,同时计算AUC的值: 计算算法的决策函数值deci 根据决策函数值deci对真实标签y进行降序排序,得到 ...

  5. Numpy数组索引为-1和None

    numpy的数组操作方便,可以用:来切片,用布尔数组或者布尔表达式来查找符合条件的数据,也可以用数组作为另一个数组的索引来查找指定的数据.但有时也会见到数组索引为-1和None.两者的用法如下: 1. ...

  6. 【刷题】BZOJ 1413 [ZJOI2009]取石子游戏

    Description 在研究过Nim游戏及各种变种之后,Orez又发现了一种全新的取石子游戏,这个游戏是这样的: 有n堆石子,将这n堆石子摆成一排.游戏由两个人进行,两人轮流操作,每次操作者都可以从 ...

  7. shell 脚本传参

    在 shell 中我们会见到  $0.$1.$2这样的符号,这是什么意思呢? 简单来说 $0 就是你写的shell脚本本身的名字,$1 是你给你写的shell脚本传的第一个参数,$2 是你给你写的sh ...

  8. sql management studio正则替换sql

    需要把create proc xxx替换为 drop proc xxx go create proc xxx 方法,使用正则查找替换 create procedure {\[dbo\]\.[^\(]+ ...

  9. MONGODB用户、角色和权限管理

      最近遇到很多问MONGODB用户认证授权方面的问题,现在特记录下来,与大家共享. 一.概念理解 1.用户概念 Mongodb的用户是由 用户名+所属库名组成 例如: 登录mongo  testdb ...

  10. 嵌入式 Linux 如何操作 GPIO ?

    作者:刘凯链接:https://www.zhihu.com/question/19704852/answer/19760467来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出 ...