说明
bind函数说明
bind()方法不会调用函数,但是能改变函数内部this的指向。
语法:
fun.bind(thisArg, arg1, arg2, ...)
参数:
- thisArg:在fun函数运行时指定的this值。
- arg1, arg2:传递的其它参数。
返回值:返回由指定的this值和初始化参数改造的原函数拷贝(新函数)
如果只想改变this指向,并且不想调用这个函数的时候,可以使用bind,比如改变定时器内部的this指向。
call、apply、bind的比较
相同点:都可以改变函数内部的this指向。
区别:
- call和apply会调用函数,并且可以改变函数内部的this指向。
- call 和 apply 传递的参数不一样,call 传递
arg1, arg2, ...
形式,而apply 传递数组形式[arg]
- bind 不会调用函数,但可以改变函数内部的this指向。
示例
示例:用bind改变this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
const obj = {
age: 18
}
function fn() {
console.log(this)
}
// 返回值是个函数,但这个函数里面的this是更改过的
const fun = fn.bind(obj)
fun()
</script>
</body>
</html>
一个稍微复杂的例子
下面的示例中,有一个按钮,点击就禁用,2秒之后开启。在该示例中,用bind修改了this的指向:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>点击后禁用2秒后自动开启</button>
<script>
// 有一个按钮,点击就禁用,2秒之后开启
const btn = document.querySelector('button')
btn.addEventListener('click', function () {
// 禁用按钮
this.disabled = true
setTimeout(function () {
// 在这个普通函数里面,我们要this由原来指向windonw,改为指向按钮
this.disabled = false
}.bind(this), 2000)
})
</script>
</body>
</html>
点击:
2秒以后自动开启: