Chrome、Node、Deno三类JS引擎下this关键字行为差异原因咨询

前置基础规则 #

普通函数的this默认绑定遵循两个核心规则：

• 非严格模式下，无上下文直接调用普通函数，this默认指向当前环境的全局对象
• 严格模式下，无上下文直接调用普通函数，this默认值为undefined

除此之外不同环境的全局作用域设计、var声明的挂载规则也存在差异，是这段代码输出不同的核心原因。 #

1. Chrome浏览器输出符合预期的原因 #

Chrome浏览器的运行逻辑完全匹配前端JS的常规认知：

• 浏览器全局作用域的默认this指向window对象
• 全局作用域下用var声明的变量会自动挂载为window的属性，代码中的var count = 1等价于window.count = 1
• 浏览器默认运行在非严格模式，直接调用foo()时，普通函数的this默认绑定到window，因此this.count可以正常读取和自增，输出结果符合预期。

2. Node.js环境输出异常的原因 #

Node.js作为服务端运行环境，模块系统设计和浏览器完全不同：

• 每个JS文件是独立的模块作用域，你在文件顶级写的var count = 1属于模块私有变量，不会挂载到Node的全局对象global上
• Node非严格模式下直接调用普通函数，this默认绑定到global对象，但你从未给global.count赋值，第一次读取this.count就是undefined，undefined++运算后会变成NaN，后续所有调用的this.count都是NaN
• Node文件顶级的this指向当前模块的导出对象module.exports，默认是空对象{}，因此最后打印的顶级this.count是undefined，和global.count没有关联。

3. Deno环境直接报错的原因 #

Deno默认全局启用严格模式，是三类环境里对规范执行最严格的：

• 严格模式下无上下文直接调用普通函数，this默认值为undefined
• 在foo函数内访问this.count等价于访问undefined.count，因此直接抛出Cannot read property 'count' of undefined的类型错误。

环境兼容方案 #

如果要让这段代码在三个环境输出一致，可以做任意一种修改：

• 显式绑定this：循环调用时写foo.call(globalThis, i)，用ES2020标准的全局统一对象globalThis抹平环境差异
• 统一全局变量声明：用globalThis.count = 1替代var count = 1，直接给全局对象赋值
• 全局开启严格模式：在文件顶部加'use strict'，三个环境都会因为this为undefined统一抛出类型错误。

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