A-A+

关于Function中的bind()示例详解

2018年09月15日 javascript 暂无评论 阅读 4 views 次

前言

bind()接受无数个参数,第一个参数是它生成的新函数的this指向,比如我传个window,不管它在何处调用,这个新函数中的this就指向window,这个新函数的参数就是bind()的第二个、第三个、第四个....第n个参数加上它原本的参数。(行吧,我自己都蒙圈了)

示例介绍

我们还是看看栗子比较好理解,举个bind()最基本的使用方法:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
this.x = 9;
varmodule = {
 x: 81,
 getX:function() {returnthis.x; }
};
 
module.getX();// 返回 81
 
varretrieveX = module.getX;
retrieveX();// 返回 9, 在这种情况下,"this"指向全局作用域
 
// 创建一个新函数,将"this"绑定到module对象
// 新手可能会被全局的x变量和module里的属性x所迷惑
varboundGetX = retrieveX.bind(module);
boundGetX();// 返回 81

这里很明显,我们在window对象下调用retrieveX,得到的结果肯定是window下的x,我们把module对象绑定到retrieveX的this上,问题就解决了,不管它在何处调用,this都是指向module对象。

还有bind()的其他参数,相信第一次接触bind()的朋友看到上面的定义都会蒙圈。

还是举个栗子:

?
1
2
3
4
5
6
7
8
9
10
11
functionlist() {
 returnArray.prototype.slice.call(arguments);
}
 
varlist1 = list(1, 2, 3);// [1, 2, 3]
 
// 创建一个拥有预设初始参数的函数
varleadingThirtysevenList = list.bind(undefined,[69,37],{a:2});
 
varlist2 = leadingThirtysevenList();// [[69,37],{a:2}]
varlist3 = leadingThirtysevenList(1, 2, 3);// [[69,37],{a:2}, 1, 2, 3]

list函数很简单,把传入的每个参数插入到一个数组里,我们用bind()给list函数设置初始值,因为不用改变list中this的指向,所以直接传undefined,从第二个参数开始,就是要传入list函数的值,list2和list3的返回值很好的说明了一切。

我自己一般使用的bind()的场景是配合setTimeout函数,因为在执行setTimeout时,this会默认指向window对象,在使用bind()之前,我是这么做的:

?
1
2
3
4
5
6
7
8
9
10
11
12
functionCoder(name) {
 varthat =this;
 that.name = name;
 that.getName =function() {
  console.log(that.name)
 };
 that.delayGetName =function() {
  setTimeout(that.getName,1000)
 };
}
varme =newCoder('Jins')
me.delayGetName()//延迟一秒输出Jins

在函数内顶层定义一个that缓存this的指针,这样不论怎么调用,that都是指向 Coder的实例,但是多定义一个变量总是让人不太舒服。

使用bind()就简单多了:

?
1
2
3
4
5
6
7
8
9
10
11
functionCoder(name) {
 this.name = name;
 this.getName =function() {
  console.log(this.name)
 };
 this.delayGetName =function() {
  setTimeout(this.getName.bind(this),1000)
 };
}
varme =newCoder('Jins')
me.delayGetName()//延迟一秒输出Jins

这样就OK了,直接把setTimeout的this绑定到外层的this,这肯定是我们想要的!

打赏作者
如果文章对您有所帮助请打赏支持本站发展。

您的支持将鼓励我们继续创作!

[微信] 扫描二维码打赏

[支付宝] 扫描二维码打赏

标签:

给我留言

您必须 登录 才能发表留言!

Copyright © 前端技术分享休闲玩耍去处分享-大一网 保留所有权利.   Theme  Ality

用户登录 ⁄ 注册

分享到: