空对象与空字符串如何知道使用哪个

Question

这两个全局变量都在代码中工作。

如果两者都在代码中工作，你怎么知道哪一个是正确的？

有人告诉我，这些是正确的，但你怎么知道该用哪一个？

如果两者都在代码中工作？

我还被告知这些人绝对不会在幕后做同样的事情。虽然代码可能会运行，而且似乎在两个JSFiddle版本中都运行，但实际上并没有。

有人能帮助我理解，哪一个是正确的，为什么？

let currentPlayButton = {}; 

https://jsfiddle.net/n5cpvtok/

let currentPlayButton = “”;

https://jsfiddle.net/n5cpvtok/1/

let currentPlayButton;

https://jsfiddle.net/bo5jm2r6/

我看不出有什么不同。

当svg被点击时，它们会淡出。

这是预期的行为。

const manageCover = (function makeManageCover() {
const config = {};
const body = document.body;
let currentPlayButton = {};
function show(el) {
el.classList.remove("hide");
}
function hide(el) {
el.classList.add("hide");
}
function hideAll(elements) {
elements.forEach(hide);
}
function resetBackground(backgroundSelector) {
const allBackgrounds = document.querySelectorAll(backgroundSelector);
function hideBackground(background) {
background.classList.add("bg1");
}
allBackgrounds.forEach(hideBackground);
}
function resetButtons(buttonSelector) {
const allButtons = document.querySelectorAll(buttonSelector);
function hideButton(button) {
button.classList.add("isOpen");
}
allButtons.forEach(hideButton);
}
function resetPage() {
resetBackground("body");
resetButtons(".outer");
}
function markAsPlayed(played) {
played.classList.add("played");
}
function showCover(playButton) {
hideAll(config.containers);
resetPage();
markAsPlayed(playButton);
const cover = playButton.parentElement;
cover.classList.add("active");
show(cover);
}
function animationEndHandler(evt) {
const animationName = evt.animationName;
if (animationName === "initial-fade") {
body.classList.remove("initial-fade");
showCover(currentPlayButton);
}
}
function coverClickHandler(evt) {
currentPlayButton = evt.currentTarget;
body.classList.add("initial-fade");
}
function addClickToButtons(playButtons) {
playButtons.forEach(function playButtonHandler(playButton) {
playButton.addEventListener("click", coverClickHandler);
});
}
function addCoverHandler(coverSelector, handler) {
const cover = document.querySelector(coverSelector);
cover.addEventListener("click", handler);
}
function init(selectors) {
config.containers = document.querySelectorAll(selectors.container);
const playButtons = document.querySelectorAll(selectors.playButton);
addClickToButtons(playButtons);
body.addEventListener("animationend", animationEndHandler);
}
return {
addCoverHandler,
init
};
}());

Answer 1

它们都很好，因为currentPlayButton的初始值无关紧要。您在coverClickHandler函数中以任何一种方式覆盖它，而不对原始值执行任何操作。