当前位置: 首页 > news >正文

箭头函数的this指向问题

普通函数中的this:

1. this总是代表它的直接调用者(js的this是执行上下文), 例如 obj.func ,那么func中的this就是obj

2.在默认情况(非严格模式下,未使用 'use strict'),没找到直接调用者,则this指的是 window (约定俗成)

3.在严格模式下,没有直接调用者的函数中的this是 undefined

4.使用call,apply,bind(ES5新增)绑定的,this指的是 绑定的对象

箭头函数中的this

1.箭头函数没有自己的this, 它的this是继承而来; 默认指向在定义它时所处的对象(宿主对象),此处指父级作用域,而不是执行时的对象, 定义它的时候,可能环境是window; 箭头函数可以方便地让我们在 setTimeout ,setInterval中方便的使用this

2.箭头函数中,this指向的固定化,并不是因为箭头函数内部有绑定this的机制,实际原因是箭头函数根本没有自己的this,导致内部的this就是外层代码块的this。

例如这段函数中,this指向的是Person对象,可以看到控制台打印结果,此时的箭头函数所处的宿主对象是Person,所以this指向的是person

看下面这段js代码,

此时的箭头函数所处的宿主对象是window对象,所以此处的this指向的是window。

再看下面这段代码,这是写在react中的一段箭头函数,这个箭头函数所处的对象是MainForm这个类,所以在调用之后输出的就是MainForm这个对象

综上:箭头函数没有自己的this,它的this是继承而来,默认指向在定义它时所处的对象(宿主对象)。

下面看这样一段代码,非箭头函数,

可以看到这里的this指向的是window对象,这是由于setInterval跟setTimeout调用的代码运行在与所在函数完全分离的执行环境上。这会导致这些代码中包含的 this 关键字会指向 window (或全局)对象。详细可参考MDN setTimeout MDN setInterval

下面我们做一个修改,将this存为一个变量,此时的this指向Person1,也可以使用bind函数来绑定this实现以下效果

对于评论区的使用方式做一解释,

var s = 21;
http://www.dtcms.com/a/461840.html

相关文章:

  • 【Vue】——生命周期、ref属性、hooks
  • 网站服务器如何维护小米商城wordpress主题
  • 寻梦数据空间 | 架构篇:从概念到落地的技术实践与突破性创新
  • PySide6 文本编辑器(QPlainTextEdit)实现查找对话功能(匹配完整单词,区分大小写)——重构版本
  • golang面经——GMP相关
  • 谷歌英文网站简单的网站php开发教程
  • 免费一键自助建站官网域名及对应网站
  • AI编程Cursor最强竞争对手来了,CodeX三种操作系统喂饭级安装教程!
  • Spring Cloud Alibaba 最新五大核心组件
  • 融乐Mini1.9.3 | 支持在线播放,本地播放,内置两条线路,免费畅听全网音乐
  • 车行网站源码微信公众平台营销
  • 客户端加密 和 服务端加密:端到端安全的真正含义
  • 88-python电网可视化项目-8-1
  • 做网站要自己租服务器吗wordpress打开速度优化
  • 要看网站是多少建设一个网站需要哪些费用
  • 物联网时代下无锡漫途科技无线多参数遥测终端助力饮水安全监测
  • 公司网站建设款计什么科目wordpress jquery版本
  • 麒麟系统如何设置.sh文件的图标
  • 3D GPR切片图
  • 深圳建设网站制作公司怎样制作一个网页
  • 腾讯云手机适用于哪些人群
  • 云南技术网站建设销售编程代码入门教学
  • 【PalladiumZ2 使用专栏 5 -- 模拟电路是否可以仿真?】
  • 公司网站文化活动备案上海企业建站方案
  • AI智能体开发实战(开源版)
  • 手动添加 SSH 私钥到 ssh-agent 以解决Permission denied (publickey) 错误
  • 用网站建设费用wordpress网站后台
  • 大模型前世今生(八):大模型的预训练
  • Tiff编码解码器封装
  • Android 性能优化 — Profiler 使用指南