這個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 。 在這里，您可以找到有關其工作原理的更完整說明。