JavaScript中无需this关键字即可访问类属性的原因探究

在使用JavaScript类时遇到一个困惑：构造函数中赋值给类属性的DOM元素（如inputField、itemList、msg），在类方法中无需通过this即可直接访问，这和“类属性必须用this访问”的认知不符。相关代码示例如下：

class Reminder {
    constructor() {
        this.inputField = document.querySelector('#inputField');
        this.itemList = document.querySelector('#itemList');
        this.msg = document.querySelector('#msg');
        // Other properties...
    }

    loadReminders() {
        // Some code...
        itemList.appendChild(li);
        // Some more code...
    }

    addReminder() {
        if (inputField.value === '') {
            msg.classList.add('error');
            msg.textContent = "No input received";
            msg.style.display = 'block';
            setTimeout(() => msg.style.display = 'none', 1000);
            return false;
        }

        // Other code...
        itemList.appendChild(li);
        inputField.value = '';
        // Rest of the code...
    }

    // Other methods...
}

这并非类属性的隐式绑定，而是浏览器的特殊行为：所有带有id属性的DOM元素，会自动被挂载为全局对象（浏览器环境下为window）的属性，属性名与DOM元素的id值完全一致。

比如代码中的#inputField元素，浏览器会自动创建window.inputField变量指向它，#itemList、#msg同理。你在类方法中直接写inputField时，JavaScript会先在当前方法作用域查找该变量，找不到则向上追溯至全局作用域，最终匹配到window上的对应属性。

虽然此时this.inputField和全局的inputField指向同一个DOM元素（可通过console.log(this.inputField === inputField)验证结果为true），但本质上你访问的是全局变量，而非类实例的属性。如果后续修改类实例的this.inputField（比如赋值为其他值），直接访问inputField仍会指向原来的DOM元素，两者将产生差异。

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