时间戳

首页 > 解决方案 > 这个keywork在JS中的奇怪行为

javascript - 这个keywork在JS中的奇怪行为

问题描述

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

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

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';
};

标签： javascript

解决方案

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

推荐阅读