写在 $(function(){}) 中的函数无法被外界调用原因及解决方式

最近，遇到一个点击button按钮没反应的bug，发现原因后，让我对$(function(){})中的函数无法被外界调用的这一知识点仔细梳理了一下，在此记录分享，希望能帮助到遇到同样问题的小伙伴！

概念

$(function(){ })实际上是匿名函数。这是JQuery的语法，$表示JQuery对象，可以有好几种用法。比如传递选择器字符串、页面对象等，如果直接传函数体进去，表示当页面加载完毕时执行这个函数。

实践

<button onclick="print_1()" >点击打印1</button>
  <script>
    $(function(){
      function print_1(){
        console.log("1")
      }     
    })
  </script>复制

<button id="btn">点击打印1</button>
  <script>
    $(function(){
      function print_1(){
        console.log("1")
      }     
    })
    $("#btn").on('click',function(){
      print_1();
    })
  </script>复制

解释

• $(function(){})是一个匿名函数，print_1()是在这个匿名函数里声明的，所以只有在这个匿名函数里面可以访问到。而在button标签中 onclick = "print_1()"这样写的话，表明是要调用window 上的 print_1()，但是window上没有声明print_1()函数，所以提示 “print_1 is not defined”(找不到)。
• 同理，通过$("#btn").on('click',function(){})事件调用的也是在window上调用print_1()函数，但是window上没有声明print_1()函数，所以提示 “print_1 is not defined”(找不到)。这其实是涉及到了js函数作用域的问题。

解决方式

1. 将函数写在$(function(){})外面

<button onclick="print_1()">点击打印1</button>
  <script>
   function print_1(){
      console.log("1")
   }   
  </script>复制

2. 在$(function(){})中通过事件调用方法

<button id="btn">点击打印1</button>
  <script>
    $(function(){
      function print_1(){
        console.log("1")
      }
      $("#btn").on('click',function(){
        print_1();
      })     
    })
  </script>复制