如何在JavaScript ES6类中使用window或document全局对象及解决相关报错

你遇到的所有报错均和window/document对象本身的使用无关，全部是语法编写错误、bind方法调用位置错误，以及gulp编译配置问题导致的，以下是逐个场景的修复方案：

场景1报错修复 #

错误原因：你把bind(this)写在了addEventListener()的调用结束位置，而addEventListener方法的返回值是undefined，对undefined调用bind自然会报错。你原本的需求是绑定回调函数的this指向，所以bind应该作用在回调函数本身。

修复代码：

class App {
    constructor() {
        console.info('App Initialized');
        // bind直接绑定回调函数，不是绑定addEventListener的返回结果
        document.addEventListener('DOMContentLoaded', function() {
           console.info('document Initialized');
           this.initializeView();
        }.bind(this));
    }

    initializeView() {
        console.info('View Initialized');
    }
}

const app = new App();

更简便的替代方案是使用箭头函数，箭头函数会自动继承外层作用域的this，不需要手动绑定：

document.addEventListener('DOMContentLoaded', () => {
    console.info('document Initialized');
    this.initializeView();
});

场景2报错修复 #

错误原因和场景1完全一致，都是bind调用位置错误，你对addEventListener()返回的undefined调用bind，才会报document.addEventListener(...) is undefined的错误，修复方式同上，把bind移到回调函数末尾即可：

修复代码：

class App {
    constructor() {
        console.info('App Initialized');
        document.addEventListener('DOMContentLoaded', function() {
           console.info('document Initialized');
        }.bind(this));
    }
}

const app = new App();

同样可以用箭头函数省略bind操作。

场景3报错修复 #

错误原因：你代码里的stepper = 1是类公共实例字段语法，属于ES2022新增特性，如果你的gulp编译工具链（通常是babel）没有开启对应的语法支持配置，就会出现编译异常，你遇到的options is not defined就是编译阶段抛出的错误，和document的使用没有关联。

修复方案二选一：

1. 调整gulp的babel配置，开启类字段语法支持插件
2. 把类字段写到constructor内部，兼容低版本编译规则：

class Booking {
    constructor() {
        // 类字段移到constructor内部定义
        this.stepper = 1;
        console.info('Booking Initialized');
        document.addEventListener('DOMContentLoaded', function() {
            console.log('document Initialized')
        });
    }
}

注意事项 #

• 只要代码运行在浏览器环境下，ES6类中可以直接使用window/document对象，没有额外限制
• 回调函数需要访问类实例this时，优先使用箭头函数，避免手动写bind出现位置错误
• 使用新JS语法时提前确认编译工具链的支持配置，避免非运行时的编译错误

内容的提问来源于stack exchange，提问作者B.Balamanigandan