EventListener 捕获的范围包括所有 let 变量但不包括 var 变量？

Question

我有以下代码用于将事件侦听器附加到 html 元素。我知道这个事件监听器的回调与其词法环境形成了一个闭包。

var submit = document.getElementById("submit");
var x = 0;

function attachEventListener(element, x){
    let count = 0;
    let el = document.getElementById("counter");
    element.addEventListener('click', (e) => {
        e.preventDefault();
        count++;
        el.innerHTML = count + ` ${x}`;
    });
}

我的问题是通过脚本作用域捕获 var 和 let 变量之间的区别。 如下面的两幅图所示，如果我将

submit

和

x

定义为

var

，那么它们不会通过脚本作用域捕获。但是，当定义为

let

变量时，它们确实会通过脚本作用域捕获。 我的主要问题是为什么

Script

范围是用这样的事件监听器创建的？

我尝试以两种方式声明变量，并认为两种方式的行为在事件侦听器捕获的范围方面是相同的。我知道 let 变量是块作用域，而 var 是全局或局部作用域。但没想到脚本范围的差异。

Answer 1

var

变量位于顶层，被定义为全局对象的属性，在浏览器中是

window

。所以他们没有脚本范围。 另一方面

const/let

顶级变量是在脚本/模块范围中定义的。

var test = 'var';

console.log(window.test);

const test2 = 'const';

console.log(window.test2);