前言
bind()接受无数个参数,第一个参数是它生成的新函数的this指向,比如我传个window,不管它在何处调用,这个新函数中的this就指向window,这个新函数的参数就是bind()
的第二个、第三个、第四个....第n个参数加上它原本的参数。(行吧,我自己都蒙圈了)
示例介绍
我们还是看看栗子比较好理解,举个bind()
最基本的使用方法:
var retrieveX = module.getX;
retrieveX(); // 返回 9,在这种情况下,"this"指向全局作用域
// 创建一个新函数,将"this"绑定到module对象
// 新手可能会被全局的x变量和module里的属性x所迷惑
var boundGetX = retrieveX.bind(module);
boundGetX(); // 返回 81
这里很明显,我们在window对象下调用retrieveX,得到的结果肯定是window下的x,我们把module
对象绑定到retrieveX
的this
上,问题就解决了,不管它在何处调用,this
都是指向module
对象。
还有bind()
的其他参数,相信第一次接触bind()
的朋友看到上面的定义都会蒙圈。
还是举个栗子:
// 创建一个拥有预设初始参数的函数
var leadingThirtysevenList = list.bind(undefined,[69,37],{a:2});
var list2 = leadingThirtysevenList(); // [[69,{a:2}]
var list3 = leadingThirtysevenList(1,3); // [[69,{a:2},1,3]
list函数很简单,把传入的每个参数插入到一个数组里,我们用bind()
给list
函数设置初始值,因为不用改变list
中this
的指向,所以直接传undefined
,从第二个参数开始,就是要传入list
函数的值,list2
和list3
的返回值很好的说明了一切。
我自己一般使用的bind()
的场景是配合setTimeout
函数,因为在执行setTimeout
时,this
会默认指向window对象,在使用bind()
之前,我是这么做的:
在函数内顶层定义一个that缓存this
的指针,这样不论怎么调用,that
都是指向 Coder的实例,但是多定义一个变量总是让人不太舒服。
使用bind()
就简单多了:
这样就OK了,直接把setTimeout
的this
绑定到外层的this
,这肯定是我们想要的!
最后附上参考地址:
nofollow" target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">Function.prototype.bind()
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对编程之家的支持。
原文链接:https://www.f2er.com/js/43966.html