改变函数内部this的指向

js中可以利用call、apply、bind改变函数内部this的指向

1、call方法

call()方法调用一个对象，简单理解为调用函数的方法、但是它可以改变函数this的指向

call()方法调用一个对象，简单理解为调用函数的方法、但是它可以改变函数this的指向

func.call(thisArg, arg1, arg2, ...)

let o = {
  name: 'andy'
}

function fn () {
  console.log(`我的名字叫${this.name}`)
}

fn.call(o) // 我的名字叫andy

call的作用：
1、调用函数
2、改变函数内的this指向
3、可以实现继承

2、apply方法

func.apply(thisArg, [arg1, arg2, ...])

let o = {
  name: 'andy'
}

function fn (arr) {
  console.log(`我的名字叫${this.name}`)
  console.log(arr) // 'pink'
}

fn.apply(o, ['pink']) // 我的名字叫andy

1、调用函数
2、改变函数内的this指向，不需要改变时，第一个参数传入null
3、参数是数组形式（伪数组）

apply的应用

求数组最值

let arr = [1, 4, 6]

Math.max.apply(Math, arr) // 6
Math.min.apply(Math, arr) // 1

bind

bind()方法不会调用方法，但是可以改变函数内部this的指向

func.bind(thisArg, arg1, arg2, ...)

thisArg 在func函数运行时指定的this值
arg1, arg2 传递参数
不会执行函数但返回由指定的this值和初始化参数改变的原函数拷贝

let o = {
  name: 'andy'
}

function fn () {
  console.log(`我的名字叫${this.name}`)
}

let f = fn.bind(o)

f()
有时候不需要立即调用，但是又想改变函数内部this的指向，可以用bind

例如有个按钮点击之后就禁用，3s之后开启这个按钮

let btn = document.getSelector('button')

btn.onclick = function () {
  this.disabled = true
  setTimeout(function() {
    this.disabled = false
  }.bind(this), 3000) // 这个this指向btn这个对象
}