javascriptの二つの定義functionの違い

2853 ワード

JavaScript

皆さんは以下の二つのタイプの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属性に似ています.
これを見て、新しい問題が来ました.上記の例のショーの方法はなぜ大丈夫ですか?
mychange方式の呼び出しはwindowのロードが完了してから実行されるので、ショーは初期化されました.最後に次の順番を見に来ました.
1、mychangeの説明方法
2、window.onload=mychangeを説明します.呼び出しはonloadの方法ですので、ここで一時停止し、引き続き説明します.
3、var showのこのscriptを説明して、windowの中のすべての内容をロードします.
4、ロード完了、mychange方法を実行する

javascript属性の検出方法