js中改变this指向的三种方式

1、call方法

使用 call 方法调用函数，同时指定函数中 this 的值，使用方法如下代码所示：

<script>
  const obj = {
    uname: '刘德华'
  }
  function fn(x, y) {
    console.log(this) 
    console.log(x + y)
  }
  // 1. 调用函数  
  // 2. 改变 this 指向
  fn.call(obj, 1, 2)
</script>

运行结果如下：

总结：

1. call 方法能够在调用函数的同时指定 this 的值
2. 使用 call 方法调用函数时，第1个参数为 this 指定的值
3. call 方法的其余参数会依次自动传入函数做为函数的参数

2、apply方法

使用 call 方法调用函数，同时指定函数中 this 的值，使用方法如下代码所示：

<script>
 const obj = {
    age: 18
  }
  function fn(x, y) {
    console.log(this) // {age: 18}
    console.log(x + y)
  }
  // 1. 调用函数
  // 2. 改变this指向 
  //  fn.apply(this指向谁, 数组参数)
  fn.apply(obj, [1, 2])
  // 3. 返回值   本身就是在调用函数，所以返回值就是函数的返回值

  // 使用场景： 求数组最大值
  // const max = Math.max(1, 2, 3)
  // console.log(max)
  const arr = [100, 44, 77]
  const max = Math.max.apply(Math, arr)
  const min = Math.min.apply(null, arr)
  console.log(max, min)
  // 使用场景： 求数组最大值
  console.log(Math.max(...arr))
</script>

运行结果如下：

总结：

1. apply 方法能够在调用函数的同时指定 this 的值
2. 使用 apply 方法调用函数时，第1个参数为 this 指定的值
3. apply 方法第2个参数为数组，数组的单元值依次自动传入函数做为函数的参数

3、bind方法

bind 方法并不会调用函数，而是创建一个指定了 this 值的新函数，使用方法如下代码所示：

<script>
 const obj = {
    age: 18
  }
  function fn() {
    console.log(this)
  }

  // 1. bind 不会调用函数 
  // 2. 能改变this指向
  // 3. 返回值是个函数，  但是这个函数里面的this是更改过的obj
  const fun = fn.bind(obj)
  // console.log(fun) 
  fun()

  // 需求，有一个按钮，点击里面就禁用，2秒钟之后开启
  document.querySelector('button').addEventListener('click', function () {
    // 禁用按钮
    this.disabled = true
    window.setTimeout(function () {
      // 在这个普通函数里面，我们要this由原来的window 改为 btn
      this.disabled = false
    }.bind(this), 2000)   // 这里的this 和 btn 一样
  })
</script>

运行结果如下：

注：bind 方法创建新的函数，与原函数的唯一的变化是改变了 this 的值。