JavaScript中使用bind()方法

转载 2016年08月16日 16:44:03

什么是bind()?


bind函数最近才添加到JavaScript的规范说明中,所以它只能工作于最新的浏览器上。你可以查看兼容性表看看哪些浏览器实现bind()以及其他JavaScript功能。我仔细地看了看名单,我关注的浏览器没有不支持bind()的。当然你的情况可能会有所不同。


bind所做的就是自动封装函数在函数自己的闭包中,这样我们可以捆绑上下文(this关键字)和一系列参数到原来的函数。


你最终得到的是另一个函数指针。

function add(a,b){ 
   return a + b; }
var newFoo = add.bind(this,3,4);

请注意,我们不仅捆绑this到foo()函数,而且我们也捆绑了两个参数。所以,当我们调用newFoo()的时候,返回值将是7。


但是,如果我们在调用之前newFoo更改的参数的话,会发生什么?


更改bind参数


如果我们使用变量绑定参数到foo(),然后在调用newFoo()前改变变量,你觉得值会变为什么呢?

function add(a,b){    
   return a + b; }
var a = 3;
var b = 4;var newFoo = add.bind(this,a, b); a = 6; b = 7;
console.log(newFoo());

返回值仍然是7,因为bind()绑定的是参数的值,而不是实际变量的值。


这是好消息,就像我说的,我们可以在代码中利用这个巨大的优势。但是,对我而言它最有用的地方是在callbacks中。


bind和callbacks


还记得那篇文章中我们在循环中处理callbacks的解决方案之一就是,围绕我们想要调用的函数创建匿名函数。

for(var i = 0;i < 10;i++){
    (function(ii){
        setTimeout(function(){            
           console.log(ii);        },1000);    })(i);

但是我们可以使用bind,大大简化代码。

function consoleLog(i){  
 console.log(i); }
for(var i = 0;i < 10;i++){    setTimeout(consoleLog.bind(this,i),1000); }

这是因为每次调用bind就会给出一个新的函数指针,并且保留原来的函数不变。


同时,我们还删除了linting错误“不要在循环写函数”,因为我们不是在循环中创造的函数,我们只是指向了我们在循环外创建的函数。


bind用于事件处理程序


bind()可以让你的代码干净起来的另一个地方是在事件处理程序。大家都知道,或者应该知道,当一个事件处理程序被调用时,它访问的上下文会生成事件,而不是在创建事件处理程序的对象中。通过使用bind,可以肯定的是,函数会被访问正确的上下文。

function ClassName(){
  this.eventHandler = (function(){   }).bind(this); }

不是说你要像那样写代码,这只是为了说明要点。


Currying


什么?!

OK。我会是第一个承认,自己的函数式编程知识是有限的。我能给出的关于Currying的最佳定义是,它允许你在多个步骤中传递参数。


使用bind,我们就可以像这样写代码实现Currying:

function add(a,b,c) {
 return a+b+c; }
var addAgain = add.bind(this, 1, 2);
var result = addAgain(3);

Javascript通过bind()掌控this

     最近博客的更新明显跟不上脚步,不是因为最近什么都没看不知道写什么,而是因为最近工作比较忙看了好多东西以至于一时无从下手。东西要整理的太多了,还有很多不足啊,给自己打打气,一点点来~不能...
  • rznice
  • rznice
  • 2014年05月18日 10:59
  • 39646

JS中的bind方法与函数柯里化

绑定函数bind()最简单的用法是创建一个函数,使这个函数不论怎么调用都有同样的this值。...
  • y_xiao_
  • y_xiao_
  • 2016年02月15日 22:37
  • 2749

js原生函数bind

在javascript中,函数总是在一个特殊的上下文执行(称为执行上下文),如果你将一个对象的函数赋值给另外一个变量的话,这个函数的执行上下文就变为这个变量的上下文了。下面的一个例子能很好的说明这个问...
  • lidiansheng
  • lidiansheng
  • 2013年04月06日 11:35
  • 5741

js中call,apply和bind方法的区别和使用场景

详解js中的call,apply和bind函数
  • yaojxing
  • yaojxing
  • 2017年05月14日 12:09
  • 1499

自定义实现js的bind()方法

自定义实现js的bind()方法
  • GreyBearChao
  • GreyBearChao
  • 2017年12月01日 13:49
  • 96

JS中的bind()方法

Function.prototype.bind()方法 bind()方法主要就是将函数绑定到某个对象,bind()会创建一个函数,函数体内的this对象的值会被绑定到传入bind()第一个参数的值,例...
  • kongjunchao159
  • kongjunchao159
  • 2017年03月01日 17:59
  • 506

JavaScript-Javascript中bind()方法的使用与实现

Javascript中bind()方法的使用与实现 原文链接:http://blog.liuwanlin.info/javascriptzhong-bindfang-fa-de-shi-xian/ ...
  • qiqingjin
  • qiqingjin
  • 2016年02月20日 21:14
  • 525

简述泛型算法之 三bind_参数绑定

简述泛型算法之 三bind 参数绑定lambda不足在上篇博客简述泛型算法之 二lambda表达式中提到lambda有不足之处。何以见得? 1) 对于那种只在一两个地方使用的简单操作,lambda表...
  • tubin100
  • tubin100
  • 2016年03月28日 08:33
  • 700

bind()函数介绍

bind()函数介绍        在建立套接字文件描述符成功后,需要对套接字进行地址和端口的绑定,才能进行数据的接收和发送操作。 函数原型        bind()函数将长度为addlen的str...
  • xc_tsao
  • xc_tsao
  • 2015年03月08日 15:42
  • 7062

bind参数绑定

参数绑定格式:auto A=bind(B,_1);A,B都是可调用表达式,_1,_2是占位符,表示参数列表。 当B的参数是多个时,但是当用到B的函数只允许传递单个参数,就需要把B的格式转换成A。 ...
  • special_hg
  • special_hg
  • 2016年06月16日 13:19
  • 183
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JavaScript中使用bind()方法
举报原因:
原因补充:

(最多只允许输入30个字)