为什么我的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();
相关推荐
ps_xiaowang几秒前
React Query入门指南:简化React应用中的数据获取
前端·其他·react native·react.js
知识分享小能手13 分钟前
微信小程序入门学习教程,从入门到精通,微信小程序开发进阶(7)
前端·javascript·学习·程序人生·微信小程序·小程序·vue3
sophie旭2 小时前
一道面试题,开始性能优化之旅(8)-- 构建工具和性能
前端·面试·性能优化
市民中心的蟋蟀2 小时前
第三章 钩入React 【上】
前端·react.js·架构
Holin_浩霖2 小时前
为什么typeof null 返回 "object" ?
前端
PanZonghui2 小时前
Zustand 实战指南:从基础到高级,构建类型安全的状态管理
前端·react.js
PanZonghui2 小时前
Vite 构建优化实战:从配置到落地的全方位性能提升指南
前端·react.js·vite
_extraordinary_3 小时前
Java Linux --- 基本命令,部署Java web程序到线上访问
java·linux·前端
用户1456775610373 小时前
推荐一个我私藏的电脑神器:小巧、无广、功能强到离谱
前端
用户1456775610373 小时前
终于找到了!一个文件搞定PDF阅读
前端