这个keywork在JS中的奇怪行为

Question

我有一些代码，很简单，但是如果我使用这个关键字，它就不起作用了。 我已经搜索过互联网，但这个关键字仍然是一个谜。

任何人都可以向我解释为什么？

let backdrop = document.querySelector('.backdrop');
let modal = document.querySelector('.modal')
let selectPlanButtons = document.querySelectorAll('.plan button');
let modalBoBtn = document.querySelector('.modal__action--negative');
let toggleBtn = document.querySelector('.toggle-button');
let mobileNav = document.querySelector('.mobile-nav');

for(let i=0; i<selectPlanButtons.length; i++){
    selectPlanButtons[i].addEventListener('click', showModal);    
}

backdrop.addEventListener('click', closeBackdrop);
modalBoBtn.addEventListener('click', closeModal);
toggleBtn.addEventListener('click', closeShowToggleBtn);

function closeBackdrop(){
    mobileNav.style.display = 'none';
    closeModal(); // if change to this.closeModal(); => won't work
}

function closeShowToggleBtn(){
    mobileNav.style.display = 'block';
    backdrop.style.display = 'block';
}

function showModal(){
    modal.style.display = 'block';
    backdrop.style.display = 'block';
};

function closeModal(){
    modal.style.display = 'none';
    backdrop.style.display = 'none';
};

Answer 1

这里要注意的是，在 JavaScript 中，对于常规的function ， this是指其执行上下文。 当你注册backdrop.addEventListener('click', closeBackdrop); closeBackdrop()将在 HTML 元素的上下文中调用，在这种情况下我猜是HTMLButtonElement 。 因此，在closeBackdrop()内部， this指的是处理click事件的 HTML 元素。 showModal()在全局上下文中定义，因此在closeBackdrop()的 HTML 元素上undefined 。 在这里，您可以找到有关其工作原理的更完整说明。