为何我的jQuery滚动/汉堡菜单代码出现Uncaught TypeError错误？

这个错误我之前也踩过好几次坑，核心原因其实是JavaScript分号自动插入（ASI）机制的局限性——你看起来没漏分号，但实际上在代码块衔接的关键位置，ASI没有帮你自动补上，导致JS把两个完全不相关的表达式当成了一个函数调用。

你的代码问题分析 #

看你提供的代码，第二个代码块（页面刷新时添加滚动效果的部分）结尾的});后面没有分号，紧接着下一个是立即执行函数(function( $ ) { ... })( jQuery );。JS会把这两段代码错误解析成：

$(function(){ ... })(function($){ ... })(jQuery);

简单说就是：JS把$(function(){...})的返回值（jQuery对象）当成了函数，试图调用它并传入后面的function($){...}作为参数，最后还想把这个调用结果再当成函数传入jQuery调用一次。但jQuery对象根本不是函数，自然就抛出了那个类型错误。

快速修复方法 #

在第二个代码块的结尾});后面手动加上分号就行：

// add scroll effect on page refresh too 
$(function() { 
  var scroll = $(window).scrollTop(); 
  if (scroll >= 10) { 
    $(".mainMenu").addClass("scroll"); 
  } else { 
    $(".mainMenu").removeClass("scroll"); 
  } 
}); // 这里手动添加分号

// hamburger 
(function( $ ) { 
  $( document ).ready( function() { 
    var hamburger = $('#hamburger-icon'); 
    hamburger.click(function() { 
      hamburger.toggleClass('active'); 
      return false; 
    }); 
  }); 
})( jQuery ); 

通用排查思路 #

下次再碰到这类错误，可以按以下步骤快速定位问题：

• 先看错误栈：打开浏览器控制台，找到错误触发的代码行，通常就是两个表达式衔接的地方。
• 检查分号衔接：重点关注前一个表达式是否以})、]、)结尾，后一个表达式是否以(、[、+、-开头——这种组合下ASI不会自动补分号，必须手动添加。
• 逐步注释验证：把怀疑的代码块逐个注释掉，看错误是否消失，快速锁定问题发生的代码段。比如你可以先注释掉汉堡菜单的代码，如果错误没了，就说明是第二个和第三个代码块的衔接问题。
• 格式化代码：用代码格式化工具（比如VS Code的Prettier插件）整理代码，分号缺失的问题会变得更直观。

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