JavaScript中作用域与jQuery链式调用的理解及问题排查

这是个非常典型的块级作用域陷阱，咱们把问题拆解清楚，再给你靠谱的解决方案：

问题根源 #

你原来的代码里，$submenu没有用let声明，这意味着它会被当作隐式全局变量（或者说被提升到两个回调函数的外部作用域），所以mouseleave的回调函数能“看到”它。

但当你给$submenu加上let之后，它就被限制在hover回调函数的块级作用域里了——mouseleave是另一个独立的函数回调，根本访问不到这个作用域里的变量，自然就找不到$submenu，导致hide()执行失败。

解决方案一：共享作用域变量（适合需要复用变量的场景） #

把$submenu声明在两个回调函数的外部，让它们都能访问到：

// 把变量提升到共享作用域
let $submenu;
$("div.sked, div.report, div.database")
  .hover(function (){ 
    let $this = $(this); 
    let $pos = $this.position(); 
    $submenu = $this.find(":first-child"); 
    $submenu.css('left', $pos.left + 30); 
    $submenu.css('top', $top); // 这里注意$top要确保在当前作用域有定义哦
    $submenu.show(); 
  }) 
  .mouseleave(function (){ 
    // 加个判断避免空值调用
    if ($submenu) {
      $submenu.hide(); 
    }
  });

这种方法保留了变量复用的逻辑，但用let避免了全局污染，比原来的隐式全局变量更安全。

解决方案二：独立获取元素（更健壮，推荐） #

其实没必要共享变量，在mouseleave回调里直接找到当前元素的子菜单就好，这样多个元素之间不会互相干扰：

$("div.sked, div.report, div.database")
  .hover(function (){ 
    let $this = $(this); 
    let $pos = $this.position(); 
    let $submenu = $this.find(":first-child"); 
    $submenu.css('left', $pos.left + 30); 
    $submenu.css('top', $top); 
    $submenu.show(); 
  }) 
  .mouseleave(function (){ 
    // 直接找到当前元素的子菜单并隐藏
    $(this).find(":first-child").hide(); 
  });

这个方案更健壮：比如快速 hover 多个元素时，不会出现共享变量被覆盖的问题，每个元素的事件回调只操作自己的子菜单。

额外小提示 #

• let和const都是块级作用域，声明的变量只在当前{}块（函数、if语句等）内有效；
• 避免隐式全局变量（不加let/var/const直接赋值），很容易导致意外的变量污染和bug。

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