Gulp 如何在javascript es6 Class中使用全局对象窗口或文档[已关闭]

uujelgoq  于 2022-12-08  发布在  Gulp
关注(0)|答案(1)|浏览(168)

**已关闭。**此问题为not reproducible or was caused by typos。目前不接受答案。

这个问题是由一个打字错误或一个无法再重现的问题引起的。虽然类似的问题在这里可能是on-topic,但这个问题的解决方式不太可能帮助未来的读者。
去年关闭了。
Improve this question
如何在JavaScript ES6类中使用窗口或文档
我尝试了以下代码

方案1:

class App {

    constructor() {
        console.info('App Initialized');

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

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

const app = new App();

注意:我使用 gulp js 编译了上面的代码
如果我试图调用document.addEventListener内部的类方法,它会抛出以下错误。

Uncaught TypeError: this.initializeView is not a function

因此,我将this对象绑定到文档.bind(this)

方案2:

class App {

    constructor() {
        console.info('App Initialized');

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

const app = new App();

如果我在没有document.addEventListener的情况下尝试,它会在浏览器中按预期工作,但如果我尝试使用document.addEventListener,它会抛出错误

Uncaught TypeError: document.addEventListener(...) is undefined

请协助我如何使用es6类内的窗口或文档。

方案3:

class Booking {

    stepper = 1;

    constructor() {
        console.info('Booking Initialized');

        document.addEventListener('DOMContentLoaded', function() {
            console.log('document Initialized')
        });
    }
}

我收到下列例外状况

Uncaught ReferenceError: options is not defined

参考的解决方案与问题的主题没有任何相关性How to access the correct this inside a callback
我不知道Maven们是如何给出上述链接作为解决方案的。

0g0grzrc

0g0grzrc1#

您不希望使用function(){}来处理事件,因为常规函数在运行时从上下文派生this,而该上下文不是您的对象,而是全局上下文。使用古老的bind()函数(如果操作正确的话)可以解决这个问题,但现代的箭头函数语法也可以解决这个问题,所以请改用它。

constructor() {
        console.info('App Initialized');

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

好了,好了
然而,这是一段愚蠢的代码,我们根本不必这样做:使用defer属性将脚本加载到<head>元素中,作为<script src="..." async defer></script>,这样,在DOM准备好进行查询之前,脚本不会运行。只需运行需要运行的代码。

constructor() {
        console.info('App Initialized');
        this.initializeView();
    }

相关问题