改变this指向

JavaScript 中还允许指定函数中 this 的指向，有 3 个方法可以动态指定普通函数中 this 的指向

• call()
• apply()
• bind()

1. call() –了解

使用 call 方法调用函数，同时指定被调用函数中 this 的值

• ：fun.call(thisArg, arg1, arg2, ...)
• thisArg：在 fun 函数运行时指定的 this 值
• arg1，arg2：传递的其他参数
• 返回值就是函数的返回值，因为它就是调用函数

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

Version:0.9 StartHTML:0000000105 EndHTML:0000002386 StartFragment:0000000141 EndFragment:0000002346

2. apply()-理解

使用 apply 方法调用函数，同时指定被调用函数中 this 的值

• 语法：fun.apply(thisArg, [argsArray])
• thisArg：在fun函数运行时指定的 this 值
• argsArray：传递的值，必须包含在数组里面
• 返回值就是函数的返回值，因为它就是调用函数
• 因此 apply 主要跟数组有关系，比如使用 Math.max() 求数组的最大值

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))

3. bind()-重点

bind() 方法不会调用函数。但是能改变函数内部this 指向

• 语法：fun.bind(thisArg, arg1, arg2, ...)
• thisArg：在 fun 函数运行时指定的 this 值
• arg1，arg2：传递的其他参数
• 返回由指定的 this 值和初始化参数改造的 原函数拷贝 （新函数）
• 因此当我们只是想改变 this 指向，并且不想调用这个函数的时候，可以使用 bind，比如改变定时器内部的this指向

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()

总结

相同点:

都可以改变函数内部的this指向.

区别点:

1. call 和 apply 会调用函数, 并且改变函数内部this指向.
2. call 和 apply 传递的参数不一样, call 传递参数 aru1, aru2..形式 apply 必须数组形式[arg]
3. bind 不会调用函数, 可以改变函数内部this指向.

主要应用场景:

1. call 调用函数并且可以传递参数
2. apply 经常跟数组有关系. 比如借助于数学对象实现数组最大值最小值
3. bind 不调用函数,但是还想改变this指向. 比如改变定时器内部的this指向