JS this指向详解

前述

在了解js中this指向之前先简单的阐述一下脚本执行过程和执行上下文的概念

js脚本执行过程

当js引擎执行脚本代码之前会先进行一个预编译阶段,然后创建全局执行上下文入栈(上下文调用栈),然后执行全局代码,执行到函数调用的时候会为该函数创建一个函数执行上下文然后入栈,然后执行函数代码,以此类推。当函数代码执行完毕会将这个函数执行上下文出栈,最后全局代码执行完毕,全局执行上下文出栈,这是一个完整的脚本执行执行过程。

什么是执行上下文

执行上下文是一个抽象的概念,它定义了代码被执行时的环境,其中包含this指向,执行上下文可以分为三种类型:全局执行上下文、函数执行上下文和eval 执行上下文(不做了解)。

  • 全局执行上下文中的this指向window,严格模式下this是undefined
  • 函数执行上下文中的this指向是在函数被调用的时候确定的

this指向的几种情况

1、函数调用

      console.log(this) // 指向windowfunction fn() {console.log(this)  // 函数调用的时候this指向window}const obj = { name: 'obj', fn(){console.log(this)}}function fn1(callback) {callback()  // 函数调用的时候this指向window}fn1(fn)fn1(obj.fn)

函数调用指向window

2、对象调用

      function fn() {console.log(this)}const obj = {_fn() {console.log(this)  fn()   // 函数中的this指向window},_fn1() {function _fn2() {console.log(this)}_fn2()  // 函数中的this指向window},_fn3: fn}fn() // 函数中的this指向windowobj._fn()  // obj调用_fn方法,函数中的this指向objobj._fn1()obj._fn3() // obj调用_f3方法,函数中的this指向objconst fn3 = obj._fnfn3()    //  非对象调用,函数中的this指向windowfunction Animal(name) {this.name = name}Animal.prototype.getName = function() {console.log(this)}const cat = new Animal('cat')cat.getName()  // 构造函数中原型对象中的this指向cat对象

函数被对象调用,this指向调用它的对象, 构造函数中的this指向实例对象

(Js es6以前类的创建以及原型链-CSDN博客中有new 构造函数的执行过程)


3、箭头函数中的this

      const obj = {fn() {const fn1 = () => {console.log(this)  // 指向window}fn1()  // 函数中的this指向obj},fn2: () => {console.log(this)}}obj.fn()obj.fn2() // 函数中的this指向window

会发现,在obj的fn方法里声明fn1箭头函数并执行,this指向obj,将fn2方法改为箭头函数,this指向window,这是因为箭头函数并没有自己的this,它会捕获外部上下文中的this值。

代码解释

  • obj.fn调用:上下文被创建,其this指向调用它的对象也就是obj,fn1执行,由于fn1是在fn方法函数里定义的,所以它的this会捕获外部上下文中的this,也就是fn函数上下文中的this(obj)
  • obj.fn2调用:由于fn2是一个箭头函数,当fn2被执行的时候,它里面的this捕获外层上文中的this,由于最外层是全局代码环境,所以它里面的this是全局执行上下中的this(window)

4、call、apply、bind改变this指向

      const obj = {_fn(){console.log(this)},_fn1(){console.log(this)}}const obj1= {name: 'obj1'}const fn3 = obj._fnfn3.call(obj1)  // 改变函数中的this将其指向obj1,并执行函数fn3.apply(obj1) // 改变函数中的this将其指向obj1,并执行函数obj._fn1.call(obj1) // 改变函数方法中的this将其指向obj1,并执行方法const fn4 = fn3.bind(obj1) fn4() // 将函数中的this指向obj1, 并返回一个新的函数

call、apply、bind能够指定函数中的this指向,call和apply的区别就是传参的方式不同

      function fn(param1, param2, param3, param4) {}fn.call(obj, param1_value, param2_value, param3_value, param4_value)fn.bind(obj, [param1_value, param2_value, param3_value, param4_value])

箭头函数无法更改this指向

  5、回调函数中的this

      const obj = {fn() {setTimeout(function(){console.log(this)  // window})setTimeout(() => {console.log(this) // obj})}}

回调(非箭头)函数中的this指向取决于执行这个回调函数的函数想让它指向谁,比如定时器就让他指向window,但是可以通过call、apply、bind改变回调函数中的this指向。

      function callback_fn() {console.log(this)}const obj = {callback_fn() {console.log(this)}}function fn(callback) {const inner_obj = {name: 'inner_obj'}callback.call(inner_obj)  // 回调函数中的this指向obj}fn(callback_fn)fn(obj.callback_fn)

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

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

相关文章

uni-app 微信小程序之自定义navigationBar顶部导航栏

文章目录 1. 实现效果2. App.vue3. pages.json 配置自定义4. 顶部导航栏 使用 微信小程序自定义 navigationBar 顶部导航栏,兼容适配所有机型 1. 实现效果 2. App.vue 在App.vue 中,设置获取的 StatusBar,CustomBar 高度(实现适配…

苍穹外卖--营业额统计

营业额统计是基于折现图来展现,并且按照天来展示的。实际上,就是某一个时间范围之内的每一天的营业额。同时,不管光标放在哪个点上,那么它就会把具体的数值展示出来。并且还需要注意日期并不是固定写死的,是由上边时间…

redis的缓存击穿,缓存穿透,缓存雪崩

Redis是一个开源的、内存中的数据结构存储系统,它可以用作数据库、缓存和消息代理。Redis支持多种数据结构,如字符串、哈希表、列表、集合和有序集合。此外,Redis还支持各种操作,如读取和写入数据、删除和更新数据等。 Redis的特点…

【Openstack Train】十五、glance命令合集

本文介绍了glance组件的常用命令。关于openstack的安装,可以参考以下内容: 【Openstack Train安装】一、虚拟机创建 【Openstack Train安装】二、NTP安装 【Openstack Train安装】三、openstack安装 【Openstack Train安装】四、MariaDB/RabbitMQ 安…

RPC 集群,gRPC 广播和组播

一、集群抽象:cluster 它是指我们在调用远程的时候,尝试解决: 1、failover:即引入重试功能,但是重试的时候会换一个新节点 2、failfast: 立刻失败,不需要重试 3、广播:将请求发送到所有的节点上 4、组…

一文搞懂系列——动态库的加载方式及应用场景

引文 我们在工作中经常会遇到动态库链接的问题,因为正常的方式并不能满足我们的场景。常见的问题可以总结如下: 系统路径默认路径、usr/lib、/lib 目录,不会集成第三方动态库。 同名动态库可能在多个路径中存在。 针对不同的场景&#xff0…

探索元宇宙链游戏:一场数字世界的奇妙融合

随着互联网的飞速发展,以及人们不断对互动娱乐体验的要求提高,元宇宙渐渐成为人们追求的目标。 而区块链技术的出现给元宇宙链游开发带来了新的机遇和挑战。 一、元宇宙链游定义 元宇宙链游全称为基于区块链技术的元宇宙游戏,是一种新型的网…

ArkTS-列表选择弹窗

调用 每一个sheet中的action对应其点击事件 Button(列表选择弹窗).onClick(() > {ActionSheet.show({title: 列表选择弹窗标题,message: 内容,autoCancel: true,confirm: {value: 确认,action: () > {console.log(Get Alert Dialog handled)}},cancel: () > {console.…

[Python] 将文字转化到图片上显示

一、概要: 本文基于Python 3,完成将文字转化为图片的操作。其中包含对文字的自动换行、转化文字到图片、将图片存储在本地。 二、代码示例: 这里使用的是PIL库,它可以高效地生成图片并自定义图片中的文字内容。在使用前&#x…

NB-IoT BC260Y Open CPU SDK⑦外部中断的应用

NB-IoT BC260Y Open CPU SDK⑦外部中断的应用 1、BC260Y_CN_AA模块 外部中断的介绍2、EINT相关API的介绍3、软件设计4、实例分析5、以下是调试的结果:1、BC260Y_CN_AA模块 外部中断的介绍 BC260Y-CN QuecOpen 模块提供 13 个可配置为外部中断功能的 I/O 引脚,除去 GPIO1、RX…

预约按摩小程序有哪些功能特点?

随着科技的飞速发展,我们的生活方式发生了翻天覆地的变化。现在,只需动动手指,就能解决许多生活中的问题。同城预约上门按摩小程序,就是这样一个方便、快捷的解决方案。 在忙碌的生活中,身心疲惫的人们急需一种快速有效…

揭秘强化学习:Python 实践指南

一、说明 强化学习 (RL) 是机器学习和人工智能 (AI) 的一个子领域,专注于开发能够通过与环境交互进行学习的智能代理。与传统的监督和无监督学习不同,强化学习主要关注动态、顺序环境中的决策。它在人工智能中具有重要意义,特别是在自主代理必…

YOLOv8独家原创改进:创新自研CPMS注意力,多尺度通道注意力具+多尺度深度可分离卷积空间注意力,全面升级CBAM

💡💡💡本文自研创新改进:自研CPMS, 多尺度通道注意力具+多尺度深度可分离卷积空间注意力,全面升级CBAM 1)作为注意力CPMS使用; 推荐指数:五星 CPMS | 亲测在多个数据集能够实现涨点,对标CBAM。 收录 YOLOv8原创自研 https://blog.csdn.net/m0_63774211/ca…

单个 Zip 文件体积超过 40GB

单个 Zip 文件体积超过 40GB WinRAR 平时用的多,不过有时候为了更好的通用性,也常常用到 zip 格式.查了一下资料,说是 zip 单个文件的体积不能超过 4GB. 自己动手试了下,用 WinRAR 创建出来的 zip 文件,大小可以超过 40GB, 如下图 为了压缩速度快,压缩方式用的是 “存储” Wi…

使用mongodb实现简单的读写操作

本文适合初学者,特别是刚刚安装了mongodb数据库的朋友,或在atlas刚拿到免费集群的朋友。 拿到数据库,心情很激动,手痒难耐。特别想向数据库插入几条数据库试试。即使是深夜完成了安装,也忍不住想去完成这些操作。看到…

动能资讯 | 智能音箱—万物物联新纽带

音箱市场在过去几年经历了显着的增长,这主要得益于数字音乐的普及和技术创新的推动。随着语音助手技术的发展,智能音箱如Amazon Echo、Google Home、Apple HomePod等逐渐成为市场中的热点。这些音箱不仅提供音频播放功能,还整合了语音识别和智…

ACM32F070 RTC 引脚做普通 GPIO 用法配置

有场景需要把带RTC引脚功能的IO当做普通的GPIO使用,但是按照正常的GPIO初始化却无法使用,该芯片手册中有给出介绍 现给出配置方法,参考官方SDK里面PC13的配置: // PC13 GPIOC_Handle.Pin GPIO_PIN_13; GPIOC_Handle.Mod…

pngPackerGUI_V2.0是什么软件?png图片打包plist工具

png图片打包plist工具,手把手教你使用pngPackerGUI_V2.0 此软件是在pngpacker_V1.1软件基础之后,开发的界面化操作软件,方便不太懂命令行的小白快捷上手使用。1.下载并解压缩软件,得到如下目录,双击打开 pngPackerGUI.…

Python基础学习

基础语法 字面量 什么是字面量: 在代码中,被写下来的固定的值,称为字面量 | 类型 | 描述 | 说明 | | — | — | — | | 数组(Number) | 整数 int | 整数 | | | 浮点型 float | 浮点数 | | | 复数 complex | 复数 如 …

拼多多赚钱更难,利润率持续下滑

国内的电商圈又一次见证历史。 11月29日,拼多多盘中涨超4%,市值到达1924亿美元,首次超过阿里巴巴,成为美股市值最大中概股。 前一日,拼多多(NASDAQ:PDD)公布了2023年三季报,尽管营收和净利润双增&#xf…