Javascript：bind方法改变this指向

听海边涛声

已于 2024-07-08 18:07:52 修改

阅读量255

点赞数 4

文章标签： javascript 开发语言 ecmascript

于 2024-07-08 18:06:28 首次发布

本文链接：https://blog.csdn.net/panghuangang/article/details/140270783

版权

说明

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>