**已关闭。**此问题为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们是如何给出上述链接作为解决方案的。
1条答案
按热度按时间0g0grzrc1#
您不希望使用
function(){}
来处理事件,因为常规函数在运行时从上下文派生this
,而该上下文不是您的对象,而是全局上下文。使用古老的bind()
函数(如果操作正确的话)可以解决这个问题,但现代的箭头函数语法也可以解决这个问题,所以请改用它。好了,好了
然而,这是一段愚蠢的代码,我们根本不必这样做:使用
defer
属性将脚本加载到<head>
元素中,作为<script src="..." async defer></script>
,这样,在DOM准备好进行查询之前,脚本不会运行。只需运行需要运行的代码。