面试系列:改变this指向的方法有哪些?
源码共读
共 1237字,需浏览 3分钟
·
2022-01-23 11:28
来源丨幽默gif图
大家好,我是前端发现者,一名有一丢丢代码强迫症的前端代码仔,喜欢的朋友可以点个关注,一起踩坑前端知识。
面试官:说说改变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指向。
-End-
最近有一些小伙伴,让我帮忙找一些 面试题 资料,于是我翻遍了收藏的 5T 资料后,汇总整理出来,可以说是程序员面试必备!所有资料都整理到网盘了,欢迎下载!
面试题
】即可获取评论