一文搞懂this指向

前言

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

很多前端伙伴问题有没有体系的面试题?
今天为大家推荐一款刷题神奇哦 点击链接访问牛客网
各大互联网大厂面试真题。从基础到入阶乃至原理刨析类面试题 应有尽有,赶快来装备自己吧!助你面试稳操胜券,solo全场面试官

this 指向

默认window

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

图片[1] - 一文搞懂this指向 - MaxSSL
图片[2] - 一文搞懂this指向 - MaxSSL

new 绑定

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

图片[3] - 一文搞懂this指向 - MaxSSL
图片[4] - 一文搞懂this指向 - MaxSSL

箭头函数

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

图片[5] - 一文搞懂this指向 - MaxSSL
图片[6] - 一文搞懂this指向 - MaxSSL

隐形绑定

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

图片[7] - 一文搞懂this指向 - MaxSSL
图片[8] - 一文搞懂this指向 - MaxSSL
大家可以看出我们通过obj.behavior()调用了 fun1 函数 打印的 this 其实是我们函数的调用者 obj

显式绑定

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

<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

图片[9] - 一文搞懂this指向 - MaxSSL

图片[10] - 一文搞懂this指向 - MaxSSL

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

obj.behavior.call(obj1,22,'北京')//我的名字是:心凉,我今年22岁,我现在在北京obj.behavior.apply(obj1,[22,'北京'])//我的名字是:心凉,我今年22岁,我现在在北京obj.behavior.bind(obj1,22,'北京')()//我的名字是:心凉,我今年22岁,我现在在北京

很多前端伙伴问题有没有体系的面试题?
今天为大家推荐一款刷题神奇哦 点击链接访问牛客网
各大互联网大厂面试真题。从基础到入阶乃至原理刨析类面试题 应有尽有,赶快来装备自己吧!助你面试稳操胜券,solo全场面试官

本期图书推荐

过去网络安全距离我们很远,只要没有被攻击便可以忽略,而现在如果存在安全漏洞且一不小心被成功攻击,就可能导致很多公司财务等重要数据被勒索病毒感染,造成巨大经济损失!近几年来,国家展开了护网行动,加上各种机构经常组织CTF比赛等,网络安全越来越火,人才缺口也越来越大。“会渗透,是懂安全的基础;会漏扫,是懂渗透的基础;去实战,是检验能力的标准”此书可以给网络安全领域的专业人士或想入门的人士答疑解惑,是您必不可少的一本专业图书!
图片[11] - 一文搞懂this指向 - MaxSSL

本书从网络攻防实战的角度,对Web漏洞扫描利用及防御进行全面系统的研究,由浅入深地介绍了在渗透过程中如何对Web漏洞进行扫描、利用分析及防御,以及在漏洞扫描及利用过程中需要了解和掌握的基础技术。
全书共分10章,包括漏洞扫描必备基础知识、域名信息收集、端口扫描、指纹信息收集与目录扫描、Web漏洞扫
描、Web常见漏洞分析与利用、密码扫描及暴力破解、手工代码审计利用与漏洞挖掘、自动化的漏洞挖掘和利用、Web漏洞扫描安全防御,基本涵盖了Web漏洞攻防技术体系的全部内容。书中还以一些典型漏洞进行扫描利
用及实战,通过漏洞扫描利用来还原攻击过程,从而可以针对性地进行防御。

写在最后

改 变 能 改 变 的 , 接 受 不 能 改 变 的 !\textcolor{pink}{ 改变能改变的,接受不能改变的!}

点 赞 , 你 的 认 可 是 我 创 作 的 动 力 !\textcolor{green}{点赞,你的认可是我创作的动力!}

⭐️ 收 藏 , 你 的 青 睐 是 我 努 力 的 方 向 !\textcolor{green}{收藏,你的青睐是我努力的方向!}

✏️ 评 论 , 你 的 意 见 是 我 进 步 的 财 富 !\textcolor{green}{评论,你的意见是我进步的财富!}

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享