视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
JavaScript中使用bind()方法让代码更干净的详细介绍
2020-11-27 20:24:23 责编:小采
文档

几个星期前,我写了一篇关于如何在一个循环中关闭调用异步函数的影响以及处理这个问题的若干方法。

在我最近的编码中,我发现了一个更简单的方法。在这个过程中,它消除了匿名函数并删除了linting错误,“不要在循环中写函数”。

你看,我一直在使用JavaScript中的bind()试验。事实证明,我们可以在多个场合,包括处理我几周前提到的闭包问题中,使用bind。

什么是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);

下载本文
显示全文
专题