在线编译器与浏览器中JavaScript代码输出差异原因咨询

问题重现 #

在浏览器和在线编译器（如playcode.io、programiz、leetcode）中运行以下代码，得到不同输出：

'use strict';

var fName = 'Matilda';
const jonas = {
    fName: 'jonas',
    year: 1991,
    greet: ()=> console.log(`Hey, ${this.fName}`),
};

jonas.greet(); 

• 浏览器输出：Hey, Matilda
• 在线编译器输出：Hey, undefined

核心原因解析 #

1. 箭头函数的this绑定规则 #

箭头函数没有自身的this绑定，它的this是词法继承自定义时所在的外层上下文，而非调用时的上下文。这里的greet是箭头函数，所以它的this不会指向调用它的jonas对象，而是继承定义它时的全局上下文的this。

2. 浏览器全局上下文的特性 #

在浏览器环境中，全局作用域的this指向window对象。同时，用var声明的变量会被自动挂载到window对象上（即使在严格模式下，全局作用域的this依然是window，严格模式仅影响函数内部的this行为）。因此，var fName = 'Matilda'等价于window.fName = 'Matilda'，箭头函数继承的this是window，自然能取到window.fName的值。

3. 在线编译器的环境差异 #

多数在线编译器基于Node.js沙箱或类似环境运行代码：

• 在Node.js的模块作用域中，全局上下文的this指向module.exports（一个空对象），而非全局对象global。
• 用var声明的变量仅存在于当前模块的局部作用域，不会挂载到module.exports或global上。
  因此，箭头函数继承的this是module.exports，该对象中没有fName属性，最终输出undefined。部分更严格的沙箱环境甚至会让全局上下文的this直接为undefined，结果一致。

验证方案 #

如果将箭头函数改为普通函数：

greet: function() { console.log(`Hey, ${this.fName}`) }

此时调用jonas.greet()时，this会指向调用者jonas对象，无论在哪个环境都会输出Hey, jonas，这也验证了箭头函数的this绑定特性。

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