一文搞懂this指向

前言

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

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

this 指向

默认window

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

在这里插入图片描述
在这里插入图片描述

new 绑定

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

在这里插入图片描述
在这里插入图片描述

箭头函数

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

在这里插入图片描述
在这里插入图片描述

隐形绑定

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

在这里插入图片描述
在这里插入图片描述
大家可以看出我们通过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

在这里插入图片描述

在这里插入图片描述

我用了三种方式去改变 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比赛等,网络安全越来越火,人才缺口也越来越大。“会渗透,是懂安全的基础;会漏扫,是懂渗透的基础;去实战,是检验能力的标准”此书可以给网络安全领域的专业人士或想入门的人士答疑解惑,是您必不可少的一本专业图书!
在这里插入图片描述

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

写在最后

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

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

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/248455.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

难怪大家丢掉了postman而选择 Apifox

前言 当下采用前后端分离模式开发Web应用已经成为气候&#xff0c;在开发阶段有一个不成文的规定则是 项目开发后端先行 但是作为前端开发工程师的我们&#xff0c;难道在搭建完页面后只能等待后端的接口么&#xff1f;这样的话我们则完全被后端开发限制住了。在前面跟大家介绍…

mvc 模式和mtc 模式的区别

首先说说Web服务器开发领域里著名的MVC模式&#xff0c;所谓MVC就是把Web应用分为模型(M)&#xff0c;控制器(C)和视图(V)三层&#xff0c;他们之间以一种插件式的、松耦合的方式连接在一起&#xff0c;模型负责业务对象与数据库的映射(ORM)&#xff0c;视图负责与用户的交互(页…

HP LaserJet MFP M227_M231双面打印

双面打印设置 转载于:https://www.cnblogs.com/xiexiaokui/p/9261577.html

万木成林,我种了“Vue技能树”

初衷 作为Vue技能树的构建者&#xff0c;一直拖延到现在才来写这篇文章&#xff0c;主要还是心里没有底&#xff0c;前面殊不知这颗“树”是否促进了大家学习的热情&#xff0c;也不知它给大家带来了多少收获。说到我们的Vue技能树&#xff0c;我作为尤大大的忠实粉丝自就业后…

poj 3525

多边形内最大半径圆。 哇没有枉费了我自闭了这么些天&#xff0c;大概五天前我看到这种题可能毫无思路抓耳挠腮举手投降什么的&#xff0c;现在已经能1A了哇。 还是先玩一会计算几何&#xff0c;刷个几百道 嗯这个半平面交二分就阔以解决。虽然队友说他施展三分套三分***** 想象…

尤雨溪对 2022 Web前端生态趋势是这样看的

文章目录前言开发范式&底层框架方面趋势基于依赖追踪范式基于依赖追踪范式—共同点基于编译的响应式系统统一模型的优势和代价基于编译的运行是优化Vue Vapor Mode&#xff08;input&#xff09;工具链原生语言在前端工具链中的使用工具链的抽象层次基于 Vite 的上层框架上…

bzoj4919 [Lydsy1706月赛]大根堆

Description 给定一棵n个节点的有根树&#xff0c;编号依次为1到n&#xff0c;其中1号点为根节点。每个点有一个权值v_i。你需要将这棵树转化成一个大根堆。确切地说&#xff0c;你需要选择尽可能多的节点&#xff0c;满足大根堆的性质&#xff1a;对于任意两个点i,j&#xff0…

众多mock工具,这一次我选对了

文章目录写在前面Mock介绍Mock能解决什么问题?传统Mock解决方案Postman接口测试工具Mock js第三方库Eolink解决方案全局Mock高级Mock返回结果Mock智能内置Mock智能自定义Mock约束条件MockEolink的Mock解决方案的优势:写在最后写在前面 交战之前&#xff0c;战士必先利其兵器&…

高并发的理解和使用场景-----特意区别和多线程的关系

一&#xff0c;高并发的理解 1.概念&#xff1a;就是短时间内遇到大量操作请求&#xff0c;导致站点服务器/db服务器资源被占满甚至严重时直接导致宕 2.影响&#xff1a;没有做高并发预处理的系统会给用户很差的体验感&#xff1b; 3.系统好坏的衡量&#xff1a;衡量一个系统的…

async 和 await 原来这么简单

前言 前端同学们可能都知道 async 和 await 的使用&#xff0c;当被面试官问到 async 和 await 的是什么&#xff1f;或者说一说你对 async、await 的理解&#xff1f;如果我们还是仅仅去阐述我是如何使用的就显得格外的苍白无力。今天博主就来带大家进一步认识我们的 async 和…

我为何在 CSDN 乐在其中

文章目录写在前面成为博主究竟能得到什么&#xff1f;内在提升耀眼名片丰富眼界提升知名度博客》变现写在最后写在前面 各位伙伴大家好&#xff0c;我是几何心凉&#xff0c;一位不是很大的也不是很小的博主&#xff0c;今天想要跟大家去聊一些比较实在的内容&#xff1b;大家能…

10分钟设置免费远程桌面

文章目录前言远程桌面设置教程启动Amazon Lightsail实例配置远程桌面启动远程桌面使用远程桌面前言 “你见过洛杉矶凌晨4点的样子吗&#xff1f;” 没有也没关系&#xff0c;你可以轻松配置一台位于洛杉矶的免费远程桌面。 利用Amazon全球可用区&#xff0c;甚至可以在世界各…

BZOJ2690: 字符串游戏(平衡树动态维护Dfs序)

Description 给定N个仅有a~z组成的字符串ai,每个字符串都有一个权值vi,有M次操作&#xff0c;操作分三种&#xff1a;Cv x v:把第x个字符串的权值修改为vCs x a:把第x个字符串修改成aQ:求出当前的最大权字符串集合&#xff0c;使得这个集合中的字符串经过重新排列后满足除最后一…

【第一趴】初探uni-app(uni-app发行者、uni-app推出背景、为什么选择uni-app)

文章目录写在前面DCloud当下跨平台开发存在的问题为什么选择uni-app写在最后写在前面 聚沙成塔——每天进步一点点&#xff0c;大家好我是几何心凉&#xff0c;不难发现越来越多的前端招聘JD中都加入了uni-app 这一项&#xff0c;它也已经成为前端开发者不可或缺的一项技能了&…

Rocket - tilelink - Atomics

https://mp.weixin.qq.com/s/TSwKL_qm-b-0e8x7r--hhg 简单介绍Atomics中数学运算、逻辑运算的实现。​​1. ioAtomics是一个硬件模块&#xff0c;他继承自Modules&#xff1a;​​IO端口定义如下&#xff1a;​​其中&#xff1a;a. write: 是否写操作&#xff1b;b. a&#xf…

“勤学会”火爆来袭

文章目录勤学会是什么&#xff1f;勤学会存在的意义是什么强大的助学团勤学会如何帮助大家学习参与勤学会能得什么奖品专属C计划加入勤学会勤学会是什么&#xff1f; 他来了他来了&#xff0c;其实两个月前勤学会的概念产品就已经出现了&#xff0c;只不过因为了 1024 大型活动…

LeetCode -- 204. Count Primes

题目标签 HashTab&#xff08;哈希表&#xff09; 题意及思路 题意&#xff1a;略 思路&#xff1a;有关素数的题目我所知道有两种做法。一种是最基本的isPrime算法&#xff0c;关键点在循环判断时&#xff0c;上限为Math.sqrt(n) &#xff08;求n是否为素数&#xff09;。另外…

如何寻找无序数组中的第K大元素?

如何寻找无序数组中的第K大元素&#xff1f; 有这样一个算法题&#xff1a;有一个无序数组&#xff0c;要求找出数组中的第K大元素。比如给定的无序数组如下所示&#xff1a; 如果k6&#xff0c;也就是要寻找第6大的元素&#xff0c;很显然&#xff0c;数组中第一大元素是24&am…

测试MongoDB的自动分片

MongoDB的自动分片&#xff1a; test库分片配置&#xff1a; db.shards.find(){ "_id" : "shard0000", "host" : "127.0.0.1:29017", "state" : 1 }{ "_id" : "shard0001", "host" : "1…

线上CPU飚高(死循环,死锁……)?帮你迅速定位代码位置

top基本使用&#xff1a; top命令参考本篇文章 查看内存和CPU的top命令&#xff0c;别看输出一大堆&#xff0c;理解了其实很简单 top 命令运行图&#xff1a; 第一行&#xff1a;基本信息 第二行&#xff1a;任务信息 第三行&#xff1a;CPU使用情况 第四行&#xff1a;物理内…