JavaScript中this的指向和改变this指向的方法 - 2024最新版前端秋招面试短期突击面试题【100道】

JavaScript中this的指向和改变this指向的方法 - 2024最新版前端秋招面试短期突击面试题【100道】 🔍

在JavaScript中,this关键字是一个非常重要的概念,它指向函数执行时的上下文对象。理解this的指向规则和改变this指向的方法,将帮助你更好地编写 JavaScript 代码。以下是关于this的详细讲解。

this的指向规则 📌

  1. 默认绑定:独立函数调用时,this指向全局对象(在非严格模式下)或undefined(在严格模式下)。

    function foo() {console.log(this); // 非严格模式:window 或 global;严格模式:undefined
    }
    foo();
    
  2. 隐式绑定:当函数作为对象的方法被调用时,this指向该对象。

    var obj = {method: function() {console.log(this); // 指向obj对象}
    };
    obj.method();
    
  3. 显式绑定:通过callapplybind方法可以明确地设置函数执行时的this指向。

    function foo() {console.log(this);
    }
    var obj = {};
    foo.call(obj); // this指向obj
    
  4. new绑定:使用new关键字调用构造函数时,this指向新创建的对象。

    function Foo() {this.bar = 'bar';
    }
    var baz = new Foo();
    console.log(baz.bar); // 输出 'bar'
    

改变this指向的方法 🔄

  1. call方法:调用一个函数并指定this的值和参数。

    function foo(a, b) {console.log(this, a, b);
    }
    foo.call({x: 1}, 'arg1', 'arg2'); // this指向{x: 1},参数为'arg1'和'arg2'
    
  2. apply方法:与call类似,但参数以数组的形式传递。

    function foo(a, b) {console.log(this, a, b);
    }
    foo.apply({x: 1}, ['arg1', 'arg2']); // this指向{x: 1},参数为数组['arg1', 'arg2']
    
  3. bind方法:创建一个新的函数,并预设this的值,但不立即调用。

    function foo(a, b) {console.log(this, a, b);
    }
    var bar = foo.bind({x: 1}); // 创建新函数bar,预设this为{x: 1}
    bar('arg1', 'arg2'); // 调用bar时,this指向{x: 1}
    
  4. 箭头函数:箭头函数不绑定自己的this,它捕获其所在上下文的this值。

    var obj = {method: function() {setTimeout(() => {console.log(this); // this指向obj对象}, 1000);}
    };
    obj.method();
    

总结 📝

了解this的工作原理是掌握JavaScript的关键之一,特别是在编写复杂的应用程序时。正确使用this可以避免许多常见的问题和错误。在实际开发中,合理选择不同的绑定方法,可以让你的代码更加灵活和易于维护。

掌握这些this的知识点将帮助你在前端面试中脱颖而出!祝你顺利上岸!

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

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

相关文章

pytest脚本常用的执行命令

pytest脚本常用的执行命令 一、一般执行的脚本,执行.py文件整个脚本二、执行.py文件脚本中的一个模块三、执行脚本,执行.py文件整个脚本,或则一个模块,查看对应的日志信息3.1.py文件执行allure的脚本3.2去dos框下去执行对应的脚本…

【水果数据集】水果品种识别 人工智能 机器学习(含数据集)

一、背景意义 随着智能农业和食品管理系统的发展,准确识别不同水果种类变得尤为重要。水果种类数据集是针对水果识别与分类的深度学习项目而建立的重要资源。通过自动化的水果识别系统,农场主能够实时监控水果的种类和成熟度,从而优化采摘和销…

Android平台RTSP|RTMP播放器高效率如何回调YUV或RGB数据?

技术背景 我们在做Android平台RTSP、RTMP播放器的时候,经常遇到这样的技术诉求,开发者希望拿到播放器解码后的YUV或RGB数据,投递给视觉算法,做AI分析,本文以ffmpeg和大牛直播SDK的SmartPlayer为例,介绍下相…

计算机网络-MSTP概述

一、RSTP/STP的缺陷与不足 前面我们学习了RSTP对于STP的一些优化与快速收敛机制。但在划分VLAN的网络中运行RSTP/STP,局域网内所有的VLAN共享一棵生成树,被阻塞后的链路将不承载任何流量,无法在VLAN间实现数据流量的负载均衡,导致…

ios 快捷指令扩展(Intents Extension)简单使用 swift语言

本文介绍使用Xcode15 建立快捷指令的Extension,并描述如何修改快捷指令的IntentHandler,带参数跳转主应用;以及展示多个选项的快捷指令弹框(配置intentdefinition文件),点击选项带参数跳到主应用的方法 创建快捷指令 快捷指令是…

智能财务 | 数据与融合,激发企业财务数智化转型思考

数据与融合,激发企业财务数智化转型思考 用友持续深耕企业财务领域,见证中国企业走过了财务电算化、信息化时代,当下共同经历数智化时代。2023 年度,通过走访标杆企业,与高校教授、权威机构学者共同探讨等形式&#xf…

openpnp - 解决“底部相机高级校正成功后, 开机归零时,吸嘴自动校验失败的问题“

文章目录 openpnp - 解决"底部相机高级校正成功后, 开机归零时,吸嘴自动校验失败的问题"概述笔记问题现象1问题现象2原因分析现在底部相机和吸嘴的位置偏差记录修正底部相机位置现在再看看NT1在底部相机中的位置开机归零,看看是否能通过所有校…

DreamClear:中科院与字节联合推出!隐私安全优先的高性能图像修复技术

❤️ 如果你也关注大模型与 AI 的发展现状,且对大模型应用开发非常感兴趣,我会快速跟你分享最新的感兴趣的 AI 应用和热点信息,也会不定期分享自己的想法和开源实例,欢迎关注我哦! 🥦 微信公众号&#xff…

SpringBoot驱动的毕业生招聘信息平台

1 系统概述 1.1 概述  随着社会的快速发展,计算机的影响是全面且深入的。人们的生活水平不断提高,日常生活中毕业生对招聘平台方面的要求也在不断提高,需要招聘平台的人数更是不断增加,使得毕业生信息招聘平台的开发成为必需而且…

Mac程序坞窗口预览的方法来了

当你同一程序内打开的窗口过多的时候,在Mac上想要切换就只能打开程序然后在内部进行切换,没办法直达你想要打开的窗口,多了一步的操作,那么如何才能一步到位呢 如果程序坞有应用程序的缩略图,是不是就可以一步到位了&…

【C/C++】结构体的定义

零.导言 在上一篇博客中,我讲解了qsort函数,并在其中提到了结构体数组的排序,那么结构体是什么呢? 接下来我将详细讲解结构体的定义。 一,结构体是什么? 结构体是自定义的数据类型,可以存放自定义的数据。…

JavaScript 中如何识别异步函数?

我们如何判断一个函数是否是异步函数(async function)呢? 遇到问题的思考过程是什么呢,首先需要找到二者的区别,那就打印看一下,然后在思考如何做。 由此可以看出二者的差异。 1、使用 typeof 检查函数类…

springboot学生请假管理系统-计算机毕业设计源码12712

摘 要 从20年代开始,计算机在人们的生活和工作中广泛应用,成为了人们生活、工作的得力助手。计算机深入到每个家庭和每个工作场所,网络办公和网络教学取代了传统的手工记录和管理方式。使用计算机办公可以不受时间和地点限制,通过…

频率限制:WAF保护网站免受恶意攻击的关键功能

频率限制(Rate Limiting)是一项有效的安全措施,用于控制每个 IP 地址的访问速率,以防止恶意用户利用大量请求对网站进行攻击,例如防止 CC 攻击等。频率限制不仅能保护网站资源,还能提升服务的稳定性。 下面…

ClickHouse 神助攻:纽约城市公共交通管理(MTA)数据应用挑战赛

本文字数:13198;估计阅读时间:33 分钟 作者:The PME Team 本文在公众号【ClickHouseInc】首发 我们一向对开放数据挑战充满热情,所以当发现 MTA(城市交通管理局)在其官网发起了这样的挑战时&…

什么是数据中心?

数据中心是一个专门用于容纳大量联网计算机设备的设施,这些设备共同协作,以处理、存储和传输数据。现代社会中,大部分高科技公司都依赖数据中心来提供在线服务,例如网站、应用程序和云服务等。可以说,数据中心是互联网…

【论文精读】ID-like Prompt Learning for Few-Shot Out-of-Distribution Detection

🌈 个人主页:十二月的猫-CSDN博客 🔥 系列专栏: 🏀论文精读_十二月的猫的博客-CSDN博客 💪🏻 十二月的寒冬阻挡不了春天的脚步,十二点的黑夜遮蔽不住黎明的曙光 注:下文…

【文心智能体 | AI大师工坊】如何使用智能体插件,完成一款旅游类智能体的开发,来体验一下我的智能体『​​​​​​​背包客』

🚀『背包客』点击前往体验:https://mbd.baidu.com/ma/s/d7RHMlWh 最近参加了百度文心智能体平台AI大师工坊🎉活动,在这个活动中,我利用文心平台提供的各种插件、大模型等工具,打造了一个工具类的智能体应用…

理解ADC:为什么量化噪声也会产生谐波?附带介绍 Dither(抖动)

前言 今天继续从经典的 ADI 《MT-001》说起,通常情况下量化噪声是白噪声,但如果量化噪声与输入信号之间存在相关性,就不能被当做白噪声对待。 文中举了一个有意思的例子:理想 ADC 的采样频率为 80 MSPS ,一种情况输入…

从0到1构建 UniApp + Vue3 + TypeScript 移动端跨平台开源脚手架

🚀 作者主页: 有来技术 🔥 开源项目: youlai-mall 🍃 vue3-element-admin 🍃 youlai-boot 🍃 vue-uniapp-template 🌺 仓库主页: GitCode💫 Gitee &#x1f…