为何JavaScript中导入的函数可访问document却无法访问变量p？

第一段代码（报错场景） #

//a.js
let func1 = function(){
    console.log(p);
}
export default func1; // 注：原代码存在语法错误，多写了一个export，此处修正为正确写法

//index.js
import func1 from "./a.js";
let p = 1000;
func1(); 

调用func1时会报错“p is undefined”。

第二段代码（正常运行场景） #

//a.js
let func1 = function(){
    document.querySelector(".img1").addEventListener("click",()=>{console.log(12)})
}
export default func1; // 修正原代码的语法错误

导入func1并调用后，函数可正常访问document变量，点击对应元素时会打印12。

差异核心原因 #

本质是变量的作用域查找规则不同：

• 第一个场景中，func1是在a.js的模块作用域内定义的函数，它内部引用的p会沿着作用域链向上查找：先找自身局部作用域，再找a.js的模块作用域，完全不会涉及index.js的模块作用域。index.js里的p是该模块独有的变量，和a.js的func1没有作用域关联，所以调用时找不到p直接报错。
• 第二个场景里的document是浏览器环境提供的全局变量，属于最顶层的全局作用域。浏览器中所有模块的函数，作用域链的顶端都是全局作用域，因此func1能轻松找到document，自然可以正常执行。

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