函数参数传递异常排查：hideProductCard函数中artistBox参数返回undefined问题

嘿，我来帮你拆解这个奇怪的问题！你遇到的现象——同一个参数传给addArtistSelection正常，传给hideProductCard却变成undefined——大概率是函数声明顺序与变量提升在搞怪，咱们一步步理清楚：

核心原因分析 #

先看你代码的执行顺序：

1. 你先给所有艺术家复选框绑定了click事件回调，回调里直接调用了addArtistSelection和hideProductCard
2. 但这两个函数是在事件绑定完成后，才用let定义的函数表达式

虽然let声明的变量会被提升，但会处于「暂时性死区」，只有代码执行到赋值语句时才会完成初始化。理论上用户点击时两个函数都已经初始化了，不过这里有个隐藏风险：如果你的代码其他地方（没贴出来的部分）不小心重新定义了hideProductCard，就会覆盖原来的函数，导致参数传递异常。

另外，你可以检查下hideProductCard函数体内有没有不小心覆盖artistBox参数（比如在forEach里声明了同名变量），不过从你贴的代码看没有这个问题。

快速修复方案 #

最稳妥的办法是把函数定义移到事件绑定之前，彻底避开变量提升的坑：

// 先定义两个功能函数
let addArtistSelection = (artistBox) => {
  let artistSelectionContainer = document.querySelector('.artist-selection-container');
  let artistSelection = document.createElement('p');
  artistSelection.classList = 'filter-selection artist-selection';
  artistSelection.id = `${artistBox.value}-selection`;
  artistSelection.innerHTML = ` ${artistBox.value} `;
  artistSelectionContainer.appendChild(artistSelection);
};

let hideProductCard = (artistBox) => {
  artistProductCards.forEach((productCard) => {
    console.log(productCard.querySelector('.card-title').innerText);
    console.log(artistBox.value);
  });
};

// 再绑定事件监听
let artistCheckBoxes = document.querySelectorAll('.artist-filter-input');
let artistProductCards = document.querySelectorAll('.store-card');
artistCheckBoxes.forEach((artistBox) => {
  artistBox.addEventListener('click', () => {
    if (artistBox.checked === true) {
      addArtistSelection(artistBox);
      hideProductCard(artistBox);
    } else if (artistBox.checked === false) {
      document.getElementById(`${artistBox.value}-selection`).remove();
    }
  });
});

你也可以把函数改成函数声明形式（function addArtistSelection() {}），因为函数声明会直接提升到作用域顶部，不管写在哪里都能被正常调用。

调试建议 #

如果修复后还是有问题，你可以加个调试步骤确认参数状态：

if (artistBox.checked === true) {
  console.log('回调内的artistBox:', artistBox); // 先确认这里的参数是否正常
  addArtistSelection(artistBox);
  hideProductCard(artistBox);
}

如果这里的输出是正常的，但hideProductCard里还是undefined，那就要检查有没有其他代码偷偷修改或覆盖了hideProductCard函数。

内容的提问来源于stack exchange，提问作者Michael