jQuery调用addClass报控制台错误但所有功能运行正常是什么原因？

错误原因 #

• 变量current初始化时未赋值，默认值为undefined，以下两类场景会触发报错：
  1. 页面中没有匹配aside a选择器的元素，each遍历逻辑完全不执行，current始终为undefined
  2. 滚动位置足够靠上时，所有导航链接对应的锚点元素位置都不满足refElement.position().top+380 <= scrollPosition的判断条件，current全程未被赋值
• 额外隐藏问题：如果导航链接的href属性指向不存在的锚点，$(currentLink.attr("href"))会得到空jQuery对象，调用position()会返回undefined，读取top属性时也会抛出类型错误

修复方案 #

调整逻辑，补充空值判断：

document.addEventListener("scroll", onScroll);

function onScroll(event) {
  let scrollPosition = $(document).scrollTop();
  let current;
  $("aside a").removeClass("clicked");
  $("aside a").each(function () {    
    let currentLink = $(this);
    let href = currentLink.attr("href");
    // 跳过非锚点链接
    if (!href?.startsWith("#")) return;
    let refElement = $(href);
    // 跳过不存在的锚点元素
    if (refElement.length === 0) return;
    if (refElement.position().top + 380 <= scrollPosition) { 
      current = currentLink;
    }
  });
  // 仅当current存在时执行添加类操作
  current?.addClass("clicked");
}

若需要兼容低版本浏览器，可将最后一行的可选链写法替换为current && current.addClass("clicked")

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