为何JavaScript箭头函数中this未指向全局对象？求技术解答

你的核心问题是误解了箭头函数的this绑定规则，同时不同运行环境的默认执行模式差异放大了这个问题，以下是具体分析：

一、箭头函数的this绑定规则 #

箭头函数没有自己的this，它的this是继承自定义时所在的外层执行上下文的this，而非调用时决定，也不是固定指向全局对象。这是和普通函数最核心的区别：

• 普通函数的this由调用方式决定（比如作为对象方法调用时this指向该对象）
• 箭头函数的this在定义时就确定，永远和外层上下文的this保持一致

二、你的代码执行逻辑拆解 #

看你的测试代码：

variable = 'Global variable';

function normalFunc () {
  console.log(this.variable);
}

const arrowFunc = () => {
  console.log(this.variable);
};

const objNormal = {
  variable: 'Inner variable',
  func: normalFunc
};

const objArrow = {
  variable: 'Inner variable',
  func: arrowFunc
};

objNormal.func();
objArrow.func();
arrowFunc();

1. objNormal.func()：普通函数作为对象方法调用，this指向objNormal，输出Inner variable，这部分符合预期。
2. objArrow.func()：箭头函数的this在定义时继承自顶层上下文的this，和调用时的objArrow无关。如果顶层上下文的this不是全局对象，自然拿不到variable。
3. arrowFunc()：同样，箭头函数的this还是定义时的顶层上下文this，和直接调用无关。

三、不同环境输出差异的原因 #

1. JS Fiddle（符合预期的环境） #

JS Fiddle默认将代码作为浏览器全局脚本执行：

• 顶层上下文的this是window（浏览器全局对象）
• 未声明的variable = 'Global variable'会自动挂载到window上
• 箭头函数继承顶层的window作为this，所以this.variable能拿到全局变量，输出Global variable

2. 终端/Playcode（输出undefined的环境） #

这些平台默认将代码作为ES模块或CommonJS模块执行：

• ES模块：顶层上下文的this是undefined，且未声明的变量不会挂载到全局对象，而是模块级私有变量，所以箭头函数的this是undefined，this.variable自然是undefined。
• CommonJS模块：顶层上下文的this是module.exports（而非全局对象global），未声明的变量会挂载到global，但箭头函数的this是module.exports，同样拿不到variable，输出undefined。

四、验证与修正方案 #

1. 验证全局对象指向：如果要明确访问全局对象，可使用通用的globalThis（兼容浏览器和Node.js），修改代码如下：

globalThis.variable = 'Global variable';

const arrowFunc = () => {
  console.log(globalThis.variable);
};

这样无论在什么环境，都能稳定访问全局变量。

2. 统一执行模式：如果希望在终端中模拟浏览器全局脚本的行为，Node.js可通过node --input-type=script filename.js命令，将代码作为传统脚本执行，此时顶层this是global，未声明的变量会挂载到global，箭头函数的this也会指向global，输出符合预期。

内容的提问来源于stack exchange，提问作者user17620914