javascript两种定义function的区别-CSDN博客

本文链接：https://blog.csdn.net/joyteck/article/details/84469810

大家都知道以下两种定义function的方式

 //定义function的第一种方式
        var fun1 = function() {
            alert("fun1");
        }
        //定义function的第二种方式
        function fun2() {
            alert("fun2");
        }

那我们平时使用，用哪种方式了？大多数情况推荐第一种方式，但是看看下面这种情况

<!DOCTYPE html>
<html>
  <head>
    <title>event.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <script>
        window.onload = mychange;
        //此处用第一种方式，不能执行这个function
//        var mychange = function() {
//            alert("hi");
//            var ll = document.getElementsByTagName("li")
//            alert(ll.length);
//            for(var i=0,len=ll.length;i<len;i++) {
//                alert(ll[i].innerHTML);
//                ll[i].onclick = show;
//            }
//        }
        //用下面的方式，正常执行
      function mychange() {
            alert("hi");
            var ll = document.getElementsByTagName("li")
            alert(ll.length);
            for(var i=0,len=ll.length;i<len;i++) {
                alert(ll[i].innerHTML);
                ll[i].onclick = show;
            }
        }

        var show = function(event) {
            event = event||window.event;
            alert(event.type);
            alert("hello"+this.innerHTML);
        }
    </script>
  </head>

  <body>
   <ul>
       <li>apple</li>
    <li>pear</li>
    <li>orange</li>
   </ul>
  </body>
</html>

为什么发生了这种情况？我们添加以下代码：

        window.onload = mychange;
        alert(mychange);

这时窗口显示undefined！所以根本不可能往下执行。所以从这点可以分析出，javascript解释器是按前后顺序边解释边执行的。

那用第二种方式为什么可以？因为用第二种方式定义的function，会最先初始化，就类似于java中static属性。

看到这，新的问题来了，上面例子中的show方法，为什么没有问题？

因为调用mychange方式，是在window完成加载后才执行的，所以show已经初始化了，我们最后来看下顺序：
1、解释mychange方法
2、解释window.onload = mychange，发现调用的是onload方法，所以此处暂停，继续往下解释
3、解释var show 这段script，并加载window中的所有内容
4、加载完成，执行mychange方法