面试官:你来说说关于this的指向问题

前言

那你说一下 js 中的 this 指向吧!这句话已经成为面试官口中的高频面试题,作为前端开发的我们,你真的搞懂了 this 指向了吗?快来跟我一起来查漏补缺吧!通过几个小案例让大家更能直白的理解 this 指向。

this 指向

默认window

首先来说我们的 this 指向默认是指向的 window

new 绑定

如果函数或者方法调用之前带有关键字 new,会构造一个新对象并把它绑定到所调用函数的this上。称为 new 绑定

箭头函数

箭头函数就比较特殊了,他没有明确的指向,他里面的 this 其实是根据他的上级来定的,也就是他的 this 指向等于他的上级。

隐形绑定

大家应该根据字面意思猜测到,其实就是我们没有通过代码去绑定 this 的指向,但是我们的 this 也被秘密的绑定到了某个地方

大家可以看出我们通过obj.behavior()调用了 fun1 函数 打印的 this 其实是我们函数的调用者 obj

显式绑定

大家也是能够从字面意思看明白,就是我们通过代码的方式去绑定,通过 call()、apply()、bind()方法把对象绑定到 this 上,叫做显式绑定。

xml 复制代码
<script>
    var fun1= function(params) {
         console.log('我的名字是:'+this.name)
     }
     var obj={
         name:'几何',
         behavior:fun1
     }
     var obj1={
         name:'泽南',
     }
     obj.behavior()
</script>

看到上面的代码片段大家应该可以猜到我们的打印一定是 '我的名字是:几何',这个不难理解因为我们在fun1函数中的 this 指向的就是我们的函数调用者 obj 所以相当于 console.log('我的名字是:'+obj.name) ,如果我想要打印的结果为'我的名字是:泽南',其实我们这里只需要改变 this 的指向就可以了,让他指向 obj1

我用了三种方式去改变 this 的指向,通过打印台看出我们的三种方式都实现了效果,只是第三种的写法上多了一个 (),难闹他们就没有区别了吗?当然有区别:传参:他们的第一个参数都为 this 要绑定的对象,差距就在第二个参数了,机制:call()和apply()是立即执行函数,bind()不会立即执行函数,而是会返回一个修改过this的新函数。

arduino 复制代码
obj.behavior.call(obj1,24,'北京')//我的名字是:泽南,我今年24岁,我现在在北京
obj.behavior.apply(obj1,[24,'北京'])//我的名字是:泽南,我今年24岁,我现在在北京
obj.behavior.bind(obj1,24,'北京')()//我的名字是:泽南,我今年24岁,我现在在北京
相关推荐
IT_陈寒1 小时前
SpringBoot性能飙升200%?这5个隐藏配置你必须知道!
前端·人工智能·后端
小时前端2 小时前
React性能优化的完整方法论,附赠大厂面试通关技巧
前端·react.js
Nicko2 小时前
Jetpack Compose BOM 2026.02.01 解读与升级指南
前端
小蜜蜂dry3 小时前
nestjs学习 - 控制器、提供者、模块
前端·node.js·nestjs
优秀稳妥的JiaJi3 小时前
基于腾讯地图实现电子围栏绘制与校验
前端·vue.js·前端框架
前端开发呀3 小时前
从 qiankun(乾坤) 迁移到 Module Federation(模块联邦),对MF只能说相见恨晚!
前端
Lee川3 小时前
深度解构JavaScript:作用域链与闭包的内存全景图
javascript·面试
没想好d3 小时前
通用管理后台组件库-10-表单组件
前端
恋猫de小郭3 小时前
你用的 Claude 可能是虚假 Claude ,论文数据告诉你,Shadow API 中的欺骗性模型声明
前端·人工智能·ai编程
_Eleven4 小时前
Pinia vs Vuex 深度解析与完整实战指南
前端·javascript·vue.js