改变 this 指向的三种方法 call() apply() bind()

函数内部中的 this 指向谁，不是在函数定义时决定的，而是在函数第一次调用并执行的时候决定的

1、call();可以调用函数，可以改变this指向，还可以继承类
2、apply();以伪数组形式存放，可以调用函数，可以改变this指向
3、bind();开发使用最多，不会调用函数，改变指向但是不会立即调用函数

call()

语法：函数名.call(更改 this 指向，实参一，实参二...)

作用：1、可以调用函数 2、可以改变函数内部的 this 指向 3、还可以继承类

结果：普通函数的this指向window，利用call方法将this指向了obj

function fn(a,b){
  console.log(a+b)   //3
  console.log(this)   // {name: 'lqc', age: 18}
}
let obj = {name:'lqc',age:18}
fn.call(obj,1,2)   // 调用函数 改指向到obj，传参，a+b = 1+2

apply()

语法： 函数名.apply(更改的 this 指向，[实参一、实参...])

作用：1、调用函数 2、改变函数内部的 this 指向

返回值：就是函数的返回值

结果：普通函数的this指向window，利用apply方法将this指向了obj

// 可以求和，传参可传数组
function fun(a, b) {
  console.log(a, b) // 1 2
  console.log(a + b) // 3
  console.log(this) // { name: 'lqc', age: 18 }
}
let obj = { name: "lqc", age: 18 }
fun.apply(obj, [1, 2])
let arr = [1, 2, 3, 4]
console.log(Math.max.apply(null, arr)) //4
console.log(Math.max(...arr)) //4

bind()

不会调用函数，但是能改变函数内部this指向

语法：函数名.bind(更改 this 指向，实参一、实参...)

作用：用来改变函数内部的 this 指向

返回值：将原函数拷贝之后返回 ，是一个新函数 (不可以直接调用)

注意点：bind 不会调用原函数

应用场景：只想更改 this 指向，不想调用函数，比如改变定时器内部的this指向

结果：普通函数的this指向window，利用bind方法将this指向了obj

function fun(a, b) {
  console.log(a + b)  // NaN
  console.log(this)     // {name: 'lqc', age: 18}
}
let obj = { name: "lqc", age: 18 }
let f = fun.bind(obj) // 不能调用函数，但是能改变函数内部的this指向
console.log(f, 4, 5) 
f()

call apply bind 总结

相同点：

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

区别点：

        call 和 apply 会调用函数，并且改变函数内部 this指向

        call 和 apply 传递的参数不一样，call 传递参数以逗号的形式，apply必须数组形式

        bind 不会调用函数，但可以改变函数内部 this 指向

主要应用场景：

        call 调用函数并且可以传递参数

        apply 经常跟数组有关系，比如借助于数学对象实现数组最大值最小值

        bind 不调用函数，但是还想改变 this 指向，比如改变定时器内部的 this 指向