面试系列：改变this指向的方法有哪些？

大家好，我是前端发现者，一名有一丢丢代码强迫症的前端代码仔，喜欢的朋友可以点个关注，一起踩坑前端知识。

面试官：说说改变this的指向有哪些方法？

听到这个问题我首先想到的是小程序经常用的 let that = this 这句代码，着实有点菜哈。“我知道这个肯定不是，所以没有跟面试官说这个答案”。然后我思前想后说了一个:“闭包算吗？”，“闭包应该不算”面试官有点尴尬的答道。最后面试官为了缓解尴尬，提醒了我说call、apply、bind用过吗？显然我平时没怎么用过它们。

今天就来总结下这三个改变this的用法吧！

bind方式

@参数说明

• 第一个参数：改变this指向
• 第二个参数之后：实参
• 结果：返回值为一个新的函数使用的时候
• 使用：需要手动调用下返回的新函数（不会自动执行）

function fn(a, b, c) {
  console.log(this, a + b + c)
}
fn(1, 2, 3) // window 6
let newFn = fn.bind('小明', 1, 2, 3)
newFn() // 小明 6

call方式

@参数说明

• 第一个参数：改变this指向
• 第二个参数之后：实参
• 使用之后会自动执行该函数(无需手动调用)

function fn(a,b,c){
  console.log(this,a+b+c)
}
fn(1,2,3) // window 6
fn.call('小红',1,2,3)  //小红 6

apply方式

@参数说明

• 第一个参数：改变this指向
• 第二个参数：数组（里面为实参，且总共只有2个参数）
• 使用之后会自动执行该函数(无需手动调用)

function fn(a,b,c){
  console.log(this,a+b+c)
}
fn(1,2,3) // window 6
fn.apply('张三',[1,2,3]) // 张三 6

总结

「相同点」

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

「不同点」

• call、apply会自动调用函数，bind需要手动调用。
• call、bind有无数个参数，apply只有2个参数，且第二个参数必须为数组。

「使用场景」

• call 经常做继承。
• apply 经常跟数组有关系。比如借助数学对象实现数组最大值最小值
• bind 不调用函数,但是还想改变this指向时。比如改变定时器内部的this指向。