惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
Application and Cybersecurity Blog
Application and Cybersecurity Blog
T
Threat Research - Cisco Blogs
Latest news
Latest news
Project Zero
Project Zero
TaoSecurity Blog
TaoSecurity Blog
Cyberwarzone
Cyberwarzone
Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint
Google DeepMind News
Google DeepMind News
P
Privacy & Cybersecurity Law Blog
T
Troy Hunt's Blog
cs.AI updates on arXiv.org
cs.AI updates on arXiv.org
AWS News Blog
AWS News Blog
Hacker News: Ask HN
Hacker News: Ask HN
S
Security @ Cisco Blogs
C
Cisco Blogs
Help Net Security
Help Net Security
I
Intezer
W
WeLiveSecurity
Exploit-DB.com RSS Feed
Exploit-DB.com RSS Feed
腾讯CDC
S
Secure Thoughts
MyScale Blog
MyScale Blog
Recorded Future
Recorded Future
G
GRAHAM CLULEY
L
LINUX DO - 热门话题
A
About on SuperTechFans
C
CXSECURITY Database RSS Feed - CXSecurity.com
IT之家
IT之家
J
Java Code Geeks
The Hacker News
The Hacker News
阮一峰的网络日志
阮一峰的网络日志
Scott Helme
Scott Helme
Recent Announcements
Recent Announcements
AI
AI
Cisco Talos Blog
Cisco Talos Blog
B
Blog RSS Feed
V
Vulnerabilities – Threatpost
C
Check Point Blog
Security Latest
Security Latest
S
SegmentFault 最新的问题
T
The Exploit Database - CXSecurity.com
cs.CL updates on arXiv.org
cs.CL updates on arXiv.org
M
MIT News - Artificial intelligence
T
The Blog of Author Tim Ferriss
Attack and Defense Labs
Attack and Defense Labs
PCI Perspectives
PCI Perspectives
Recent Commits to openclaw:main
Recent Commits to openclaw:main
T
Tailwind CSS Blog
Apple Machine Learning Research
Apple Machine Learning Research

竹林里有冰的博客

Nuxt SSG 博客的尾斜杠到底怎么加? | 竹林里有冰的博客 小米 Xiaomi Book Pro 14 (Ultra X7) Linux 兼容性实测 | 竹林里有冰的博客 国内(大陆)版小米 FCM 熄屏断连:Rootless 环境下的尝试与可能的解决方案 | 竹林里有冰的博客 我没法访问 dl.google.com —— 记一次 TUN 下的网络 debug | 竹林里有冰的博客 Vercel 的缓存控制,你注意过吗? | 竹林里有冰的博客 小记 —— Caddy 在 Layer 4 上的流量代理实践 | 竹林里有冰的博客 你的域名后缀拖慢你的网站速度了嘛?——再谈 DNS 冷启动 | 竹林里有冰的博客 DNS 冷启动:小型站点的“西西弗斯之石” | 竹林里有冰的博客 HTTP/2 Server Push 已事实性“死亡”,我很怀念它 | 竹林里有冰的博客 Nuxt Content v3 中数组字段的筛选困境与性能优化 | 竹林里有冰的博客 后 OCSP 时代,浏览器如何应对证书吊销新挑战 | 竹林里有冰的博客 初试 Github Action Self-hosted Runner,想说爱你不容易 | 竹林里有冰的博客 DNS 解析延迟毁了我的图床优化 | 竹林里有冰的博客 Vue Markdown 渲染优化实战(下):告别 DOM 操作,拥抱 AST 与函数式渲染 | 竹林里有冰的博客 Vue Markdown 渲染优化实战(上):从暴力刷新、分块更新到 Morphdom 的华丽变身 | 竹林里有冰的博客 node-sass 迁移至 dart-sass 踩坑实录 | 竹林里有冰的博客 前端中的量子力学——一打开 F12 就消失的 Bug | 竹林里有冰的博客 2025 年,如何为 web 页面上展示的视频选择合适的压缩算法? | 竹林里有冰的博客 el-image 和 el-table 怎么就打架了?Stacking Context 是什么? | 竹林里有冰的博客 2025年,前端如何使用 JS 将文本复制到剪切板? | 竹林里有冰的博客 ssh 拯救世界——通过 ssh 隧道在内网服务器执行 APT 更新 | 竹林里有冰的博客 Cudy TR3000 吃鹅(daed)记 | 竹林里有冰的博客 使用 Cloudflare Workers 监控 Fedora Copr 构建状态 | 竹林里有冰的博客 基于 Cloudflare Workers 实现的在线服务状态检测告警系统 | 竹林里有冰的博客 构建部署在 Cloudflare Workers 上的 TG Bot | 竹林里有冰的博客 2024年,Firefox 是唯一还在坚持执行在线的 SSL 证书吊销状态检查的主流浏览器 | 竹林里有冰的博客 小爱课程表适配不完全指北——以 ZJUT 本科正方教务系统为例 | 竹林里有冰的博客 将博客从 waline v2 更新到 waline v3 | 竹林里有冰的博客 给家里云装上 Fedora 41 KDE 后,我是如何配置的 | 竹林里有冰的博客 为 Hexo 添加 follow 认证 | 竹林里有冰的博客 使用 GPT 对 waline 的评论进行审查 | 竹林里有冰的博客 基于 JavaScript 的 Hexo Fluid 主题 banner 随机背景图实现 | 竹林里有冰的博客 使用向日葵智能插座 C2 用电记录推算宿舍上次烧水时间 | 竹林里有冰的博客 使用 Caddy 反向代理 dockerhub 需要几步? | 竹林里有冰的博客 将 Rustdesk 中继服务从 Arch Linux 迁移至 Debian | 竹林里有冰的博客 自建图床小记五——费用 | 竹林里有冰的博客 自建图床小记四——上传脚本编写与图片迁移 | 竹林里有冰的博客 自建图床小记三—— SSL 证书的自动更新与部署 | 竹林里有冰的博客 自建图床小记二——使用 Workers 为 R2 构建 Restful API | 竹林里有冰的博客 自建图床小记一——图床架构与 DNS 解析 | 竹林里有冰的博客 在 Linux 下使用 mitmproxy 抓取安卓手机上的 HTTPS 流量 | 竹林里有冰的博客 为中柏 N100 小主机开启来电自启 | 竹林里有冰的博客 我的博客被完整地反向代理,并自动翻译成了繁体中文 | 竹林里有冰的博客 尝试体验 Fedora COPR 中的 allow SSH 功能 | 竹林里有冰的博客 在 Arch Linux 下配置使用 HP Laser 103w 打印机无线打印 | 竹林里有冰的博客 使用动态公网 ip + ddns 实现 rustdesk 的 ip 直连 | 竹林里有冰的博客 使用 Windows 虚拟机运行虚拟专用网客户端为 Linux 提供内网环境 | 竹林里有冰的博客 以 Archlinux 中 makepkg 的方式打开 rpmbuild | 竹林里有冰的博客 使用 Github Action 更新用于 rpm 打包的 spec 文件 | 竹林里有冰的博客 使用 Python 生成甘特图(Gantt Chart) | 竹林里有冰的博客 uniapp 中的图片预加载 | 竹林里有冰的博客 小记 - 尝试拼凑出 apt 仓库中的 deb 包下载地址 | 竹林里有冰的博客 在 Linux 下使用 mitmproxy 抓取 HTTPS 流量 | 竹林里有冰的博客 如何使用 docker 部署 onemanager | 竹林里有冰的博客 crontab 中简单的@语法糖 | 竹林里有冰的博客 备份 umami 数据库,并使用 TG Bot 保存 dump 文件 | 竹林里有冰的博客 结合 Vue.js 与 php 完成的 web 期末大作业,讲讲前后端分离站点开发与部署中可能遇到的 CORS 跨域问题 | 竹林里有冰的博客 vuejs、php、caddy 与 docker —— web 期末大作业上云部署 | 竹林里有冰的博客 【翻译】使用 PHP 构建简单的 REST API | 竹林里有冰的博客 在 Hexo Fluid 主题中使用霞鹜文楷 | 竹林里有冰的博客 【翻译】GLWTPL——祝你好运开源许可证 | 竹林里有冰的博客 通过巴法云将向日葵智能插座接入米家,实现小爱同学远程控制 | 竹林里有冰的博客 使用 Root 后的安卓手机获取向日葵智能插座 C2 的开关 api | 竹林里有冰的博客 创建 b23.tv 追踪参数移除 bot | 竹林里有冰的博客 jinja2 中如何优雅地实现换行 | 竹林里有冰的博客 手动指定 python-selenium 的 driver path 以解决在中国大陆网络环境下启动卡住的问题 | 竹林里有冰的博客 从零开始的静态网页部署(到个人云服务器) | 竹林里有冰的博客 在运行OpenWRT的N1盒子上部署 QQBot | 竹林里有冰的博客 在浙工大宿舍使用路由器连接移动网络(校园网) | 竹林里有冰的博客 为红米 Redmi AC2100 路由器刷入 Padavan | 竹林里有冰的博客 Azure 教育订阅申请时遇到的麻烦 | 竹林里有冰的博客 执行 repo sync 后将 git-lfs 中的资源文件 checkout | 竹林里有冰的博客 隐式转发——骚套路建站方案 | 竹林里有冰的博客 在 vps 上配合 caddy 部署 siteproxy | 竹林里有冰的博客 onedrive(by abraunegg) —— 一个 Linux 下的开源 OneDrive 客户端(cli) | 竹林里有冰的博客 【翻译】关于2022年11月的事件的一些话[Z-Library] | 竹林里有冰的博客 【已过期】使用 vercel+supabase 免费部署 umami | 竹林里有冰的博客 我的博客部署方案 | 竹林里有冰的博客 使用 VirtScreen 将 Pad 作为副屏 | 竹林里有冰的博客 在 Archlinux 下使用 l2tp 协议连接校园网 | 竹林里有冰的博客 为 Element 添加自己喜欢的贴纸 | 竹林里有冰的博客 nodejs16:是我配不上 openssl 3 咯? | 竹林里有冰的博客 如何拯救失声的 hollywood | 竹林里有冰的博客 处理 fcitx5 的文字候选框在 tg 客户端上闪烁的问题 | 竹林里有冰的博客 使用caddy反向代理维基百科中文站点 | 竹林里有冰的博客 创建一个本地的 Fedora 镜像源 | 竹林里有冰的博客 好软推荐——FastOCR | 竹林里有冰的博客 抛弃PicGo,直接使用curl将图片上传到LskyPro | 竹林里有冰的博客 使用 Github Action 跑 rpmbuild | 竹林里有冰的博客 如何打出一个「-git」的rpm包 | 竹林里有冰的博客 雪藏在开源镜像站点中的那些常用却不为人知的软件 | 竹林里有冰的博客 在Fedora搭建jekyll环境——dnf module | 竹林里有冰的博客 pacman更新时遇到「GPGME 错误:无数据」 | 竹林里有冰的博客 PicUploader使用系列(二)——为KDE的dolphin添加右键快捷菜单 | 竹林里有冰的博客 PicUploader使用系列(一)——在Archlinux上使用Caddy部署PicUploader | 竹林里有冰的博客 使用AUR(Helper)安装软件时究竟发生了什么?对于常见的构建错误如何解决? | 竹林里有冰的博客 下载一份openharmony的源码 | 竹林里有冰的博客 在Windows与Linux双系统下共享蓝牙鼠标 | 竹林里有冰的博客 我在Archlinux上的常用软件 | 竹林里有冰的博客 安卓解包笔记 | 竹林里有冰的博客
在 JavaScript 中,箭头函数中的 this 指针到底指向哪里? | 竹林里有冰的博客
竹林里有冰 · 2024-01-14 · via 竹林里有冰的博客

这学期期末复习的时候,学校里负责上 JavaScript 的老师给我们提出了一个问题。下面这段代码中,a.u2() 在 ES Module 下执行会抛出 TypeError 的异常,在 CommonJS 下运行则会输出 undefined,而 B 这个类的 u2 函数则能够在对象实例化以后正常运行。

const a = {
    x: 3,
    u1: function () {
        console.log(this.x)
    },
    u2: () => {
        console.log(this.x)
    }
}

class b {
    x = 3

    u1 = function () {
        console.log(this.x)
    }

    u2 = () => {
        console.log(this.x)
    }
}

a.u1()
// 3
a.u2()
// undefined

new b().u1()
// 3
new b().u2()
// 3

这个问题涉及到 JavaScript 中箭头函数的作用域以及 this 指向。

**在 JS 中使用 function 关键字定义的普通函数中,this 指针遵循一个规则:谁调用指向谁。**即 obj.func() 这种调用情况下,func 方法内部的this指向obj;如果没有调用者,则严格模式下 this 为 undefined,非严格模式下 this 指向window(浏览器)或者global(node环境)。

而箭头函数比较特殊,箭头函数的 this 在定义时就被绑定,绑定的是定义时所在作用域中的 this。

在老师给的示例代码中,第一行定义了 a 这个对象字面量,而定义对象字面量不会创建新的作用域,因此 a 中定义的 u2 的 this 指向的是全局对象。因此在 Es Module 默认启用 strict mode 的情况下,全局对象的 this 指向 undefined,进而导致 a 的 u2 内 this 也指向 undefined,this.x 就抛了 TypeError;而在 CommonJS 未启用 strict mode 的情况下,全局对象的 this 指向全局对象,因而 u2 内的 this 也指向全局对象,因此 this 存在,this.x 就不会抛 TypeError,只会报 undefined。

而 B 类在对象初始化阶段拥有一个新的作用域,因此箭头函数的 this 能够正确指向 B 被实例化出来的对象,因此也就能够正确读取到 this.x 的值。

理论上来说,我们可以给全局对象也赋一个不一样的 x 值,这样 a.u2() 就能够读取到全局对象中的 x 值,验证我们的结论。

在浏览器中,可以在代码的头部加一行 var x = 10 或者 window.x = 10,可以看到a.u2() 顺利的输出了 10,验证了我的结论。

浏览器控制台调试浏览器控制台调试

但在 Node.js 中,直接使用 var x = 10 或者 global.x = 10 并不能达到我们想要的效果。因为Node.js 中的每个 CommonJS 模块都有其自己的模块作用域,即模块的顶层作用域不是全局作用域。在模块内部,this 关键字不是指向 global 对象,而是指向模块的导出对象。这是为了确保模块内部的作用域隔离和模块的封装性。

那么我们可以通过为模块的导出对象添加一个 x 属性来验证我们的结论,我们可以使用 exports.x = 10 来为模块的顶层作用域添加一个值为 10 的 x 属性。

nodejs 环境运行nodejs 环境运行

参考文章#

箭头函数表达式 - JavaScript | MDN

ES6箭头函数作用域的问题

ES6箭头函数的this指向详解