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

推荐订阅源

V
Visual Studio Blog
N
Netflix TechBlog - Medium
GbyAI
GbyAI
大猫的无限游戏
大猫的无限游戏
博客园 - 三生石上(FineUI控件)
T
Tailwind CSS Blog
IT之家
IT之家
博客园 - Franky
雷峰网
雷峰网
博客园 - 聂微东
腾讯CDC
M
MIT News - Artificial intelligence
B
Blog RSS Feed
博客园_首页
罗磊的独立博客
S
SegmentFault 最新的问题
I
InfoQ
博客园 - 叶小钗
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
阮一峰的网络日志
阮一峰的网络日志
D
Docker
宝玉的分享
宝玉的分享
B
Blog
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报

竹林里有冰的博客

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 认证 | 竹林里有冰的博客
在 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指向详解