一文搞懂this指向

一文搞懂this指向这句话已经成为面试官口中的高频面试题 作为前端开发的我们 你真的搞懂了 this 指向了吗 快来跟我一起来查漏补缺吧 通过几个小案例让大家更能直白的理解 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 上,叫做显式绑定。

<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岁,我现在在北京 

本期图书推荐

写在最后

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

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

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

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













版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/201468.html原文链接:https://javaforall.net

(0)
上一篇 2026年3月20日 上午9:19
下一篇 2026年3月20日 上午9:20


相关推荐

  • 边缘检测sobel算子

    边缘检测sobel算子sobel算子-sophia_hxw-博客园http://www.cnblogs.com/sophia-hxw/p/6088035.html#1,个人理解网上查了很多资料,都说sobel

    2022年7月2日
    25
  • pycharm更改整体背景颜色(黑-白)[通俗易懂]

    pycharm更改整体背景颜色(黑-白)[通俗易懂]pycharm更改整体背景颜色(黑-白)打开pycharm:1、左上角File—-Settings2、Appearance&Behavior—-Appearance—-第一栏:Theme选择想要的背景色(白色IntelliJLight黑色Darcula黑亮Highcontrast)—-右下角OK…

    2022年8月25日
    16
  • 无人驾驶安全报告分析

    摘要随着经济的快速发展,各国汽车保有量急剧增加,促使城市路况更加严峻繁杂,城市交通正面临着前所未有的巨大压力。加之疲劳驾驶、酒后驾驶等人为因素,使世界各国的交通事故率逐年上升,甚至多于世界大战死亡人数。随着汽车技术、信息通信技术与智能控制技术的高效融合,集自动控制、人工智能、体系结构视觉设计等众多技术于一体的无人驾驶汽车应运而生。通过在车辆内安装智能操纵控制系统与感应设备来获取信息用以控制车…

    2022年4月7日
    42
  • 20考研 | 2020考研全程规划,19上岸复旦学长。各科各阶段复习规划。

    20考研 | 2020考研全程规划,19上岸复旦学长。各科各阶段复习规划。下面我在分享一下我之前写过的一篇文章高能干货预警文章目前30142字,这可能是最负责的一篇文章了。文章很长,建议拿好笔记慢慢看。本文会解决你在考研各科在不同时期不同阶段遇到的所有问题,方法具体到草稿纸怎么使用,课本具体怎么使用,相信我,读完你一定会有巨大收获。我总结了我一年以来遇到的所有问题,使用的所有方法。既然最终目的是在考研这场「考试」中获得高分,那么所有的时间和精力,都应该围绕…

    2026年3月2日
    5
  • pytorch损失函数之nn.CrossEntropyLoss()、nn.NLLLoss()「建议收藏」

    pytorch损失函数之nn.CrossEntropyLoss()、nn.NLLLoss()「建议收藏」这个损失函数用于多分类问题虽然说的交叉熵,但是和我们理解的交叉熵不一样

    2022年7月12日
    23

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号