javascriptの実行順序を深く理解する

3706 ワード
javascript 実行順序
javaScript言語の運行メカニズムが理解できないなら、あるいは簡単に言えば、javascriptの実行順序を把握できないならば、あなたはバー楽のように千里の馬を制御できないで、千里の馬を手綱から脱出させて、あちこち逃げ回ることができます。
じゃJavaScriptはどうやって解析しますか？その実行順序はどうなりますか？これらを理解する前に、いくつかの重要な用語を認識する。
1、コードブロックJavaScriptのコードブロックは、「script」タブで分割されたコードセグメントを意味します。

<script type="text/javascript">
      alert("      ");
</script>
<script type="text/javascript">
      alert("      ");
</script>
JSはコードブロックによってコンパイルと実行され、コードブロック間は独立していますが、変数と方法は共有されます。どういう意味ですかたとえば、上記のコードブロック

<script type="text/javascript">
      alert(str);//      str，        ，       
      alert("      ");//       
      var test = "        ";
</script>
<script type="text/javascript">
      alert("      "); //      
      alert(test); //  "        "
</script>
で実行エラーが発生しましたが、コードブロック2の実行に影響はありません。これはコードブロック間の独立性です。コードブロック2でコード1の変数を呼び出すことができます。ブロック間共有性です。
2、宣言式関数と賦値式関数
JSの関数の定義は、宣言式関数と賦値式関数の2種類に分けられます。

<script type="text/javascript">
     function Fn(){ //     

     }

     var Fn = function{  //     

     }
</script>

声明式函数与赋值式函数的区别在于：在JS的预编译期，声明式函数将会先被提取出来，然后才按顺序执行js代码。

3、预编译期与执行期


事实上，JS的解析过程分为两个阶段：预编译期(预处理)与执行期。

预编译期JS会对本代码块中的所有声明的变量和函数进行处理（类似与C语言的编译），但需要注意的是此时处理函数的只是声明式函数，而且变量也只是进行了声明但未进行初始化以及赋值。


<script type="text/javascript">
     Fn();  //    ："     2",           
     function Fn(){ //  1
        alert("     1");
     }

     function Fn(){  //  2
        alert("     2");
     }
</script>  
<script type="text/javascript">
      Fn();  //    ："        ",              ，    Fn()               。
      function Fn(){ //     
         alert("        ");
      }

      var Fn = function(){  //     
         alert("        ");
      }
</script>

//    
<script type="text/javascript">
      alert(str);//     ,         
</script>
//    
<script type="text/javascript">
      alert(str); //  "undefined"
      var str = "aaa";
</script>
//js               ,             ，             unfiened ，               ，       。
上記のいくつかの用語を理解して、JSの運行メカニズムについて大体のイメージができたと思います。
なぜ上のコードブラウザを実行するとエラーが発生しますか？宣言関数は前処理期間に処理されるのではないですか？どうしてFn関数が見つからないのですか？実はこれは理解の遅れです。JSエンジンはコードブロックによって順次実行されると言っていますが、完全にコードブロックによって前処理と実行されるべきです。つまり、前処理は実行されたコードブロックの宣言関数と変数だけです。まだロードされていないコードブロックについては、前処理はできません。これもコンパイルしながら処理する核心的なところです。
ここで、まとめて整理します。

<script type="text/javascript">
      Fn();  //     :"undefined"
</script>
<script type="text/javascript">
      function Fn(){ //  1
          alert("     1");
      }
</script>
でHTMLファイルの流れの実行順に基づいて、ページ要素のレンダリング前に実行する必要があるjsコードはの前のコードブロックに置くべきです。ページ要素のロードが完了した後のjsは要素の後ろに置くべきです。

　　step 1.  读入第一个代码块。
　　step 2.  做语法分析，有错则报语法错误（比如括号不匹配等），并跳转到step5。
　　step 3.  对var变量和function定义做“预编译处理”（永远不会报错的，因为只解析正确的声明）。
　　step 4.  执行代码段，有错则报错（比如变量未定义）。
　　step 5.  如果还有下一个代码段，则读入下一个代码段，重复step2。
　　step6. 结束。
jQueryはajaxSubmit（）を使ってフォームの例を提出します。
php curlを使ってブラウザのフォームをシミュレーションしてファイルまたは画像をアップロードする方法