bind方法主要是为了改变函数内部this的指向,它与call,apply方法的主要区别是不会调用原函数,且会返回一个新的函数。
看看栗子:
var obj = {
name: 'zed'
}
function fn() {
console.log(this)
}
fn()
这是一个没有添加bind方法的代码段,输出结果为:Window对象
添加bind方法之后:
var obj = {
name: 'zed'
}
function fn() {
console.log(this)
}
var fn1 = fn.bind(obj)
fn1()
输出结果为:obj对象
现在,来看一个简单的案例。
需求:网页中有五个按钮,点击按钮,将按钮变为不可编辑,3s后恢复
var btns = document.querySelectorAll('button')
for (var i = 0; i < btns.length; i++) {
btns[i].onclick = function () {
this.disabled = true
setTimeout(function ()
this.disabled = false
}, 3000)
}
}
这样子写看似没毛病,其实有一个很大的问题。第一个this 的指向为调用者btns[i],计时器函数setTimeout中this的指向为调用者window。
window.setTimeout(function (){},3000)
二者不相同,肯定就错了。
利用bind修改计时器方法中的this指向即可解决。
//需求:点击按钮,将按钮变为不可编辑,3s后恢复
var btns = document.querySelectorAll('button')
for (var i = 0; i < btns.length; i++) {
btns[i].onclick = function () {
this.disabled = true
setTimeout(function () {
//计时器函数里的this指向window
this.disabled = false
}.bind(this), 3000)
}
}
这里的 bind(this) 中,this指向为btn[i],运行结果,正常。
如果有所收获的话,点个赞吧~