JavaScript中使用bind()方法

墨蓝 2022-09-25 07:22 244阅读 0赞

## 什么是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的最佳定义是，它允许你在多个步骤中传递参数。