为什么我的this.name输出了空字符串?严格模式与作用域链的微妙关系

问题重现:一段让人困惑的代码

起因是我最近在回顾JavaScript基础,恰巧早一段时间看到了函数这一章节,今天打算整理一下笔记,因为B站up主讲的太过于浅显,我就翻看了一下《犀牛书-JavaScript权威指南》,看到函数声明那一节的时候,我看到了箭头函数有一个特性:箭头函数,他们从定义自己的环境继承上下文,而不是像以其他方式定义的函数那样定义自己的调用上下文。 又加上昨天天和兄弟们在群里讨论了this指向的问题,就突发奇想写下了下面的代码:

js 复制代码
'use strict'
const name = 'bkk';
const f = () => { console.log(this.name) };
function f1() { console.log(this.name); };
f();
f1();

我预想的是第一个输出:'bkk',第二个直接报错,但实际结果是第一个输出:'',第二个直接报错了

为什么我不是想着两个都输出'bkk'

因为,在严格模式 下,全局作用域的 thisundefined,但浏览器环境会特殊处理:
箭头函数内部的 this 被替换为全局对象 window(这是历史遗留行为)

  • 当箭头函数在 全局作用域 定义时,它的外层 this 本该是严格模式下的 undefined,但浏览器却强制让它指向了 window
  • ECMAScript 规范 没有明确禁止这种行为:规范规定箭头函数继承外层 this,但未严格定义全局作用域 this 的继承逻辑 [ECMA-262 §14.2.16]

为什么不如我所料呢?

  • let/const 与 var 的本质区别
    const name = 'bkk' 存在于模块作用域(或脚本作用域),但:

    • 不会成为 window 的属性
    • 不会覆盖 window.name
  • window.name 的默认值

    浏览器中 window.name 是一个内置属性,默认值为空字符串 `''

总结:

现象 原因
f() 输出空字符串 箭头函数 thiswindow + window.name 默认存在且为 ''
f1() 报错 严格模式下普通函数 thisundefined,访问属性报错
const name 不生效 let/const 声明的全局变量不与 window 绑定

**注意:**在node环境下,全局对象为global,global.name = undefined

如何正确输出?

js 复制代码
'use strict' 
const name = 'bkk'; 
const f = () => { console.log(name) }; 
function f1() { console.log(name); }; 
f(); 
f1();
相关推荐
xiaotao13127 分钟前
第九章:Vite API 参考手册
前端·vite·前端打包
午安~婉33 分钟前
Electron桌面应用聊天(续)
前端·javascript·electron
哈里谢顿1 小时前
如何实现分布式锁
面试
彧翎Pro1 小时前
基于 RO1 noetic 配置 robosense Helios 32(速腾) & xsense mti 300
前端·jvm
小码哥_常1 小时前
解锁系统设置新姿势:Activity嵌入全解析
前端
之歆2 小时前
前端存储方案对比:Cookie-Session-LocalStorage-IndexedDB
前端
哟哟耶耶2 小时前
vue3-单文件组件css功能(:deep,:slotted,:global,useCssModule,v-bind)
前端·javascript·css
是罐装可乐2 小时前
深入理解“句柄(Handle)“:从浏览器安全到文件系统访问
前端·javascript·安全
华科易迅2 小时前
Vue如何集成封装Axios
前端·javascript·vue.js
康一夏2 小时前
Next.js 13变化有多大?
前端·react·nextjs