JavaScript言語の実行中のメカニズムを理解できない場合、または単に置くと、JavaScriptの実行順序を習得することはできません。そして、あなたは千マイルの馬をコントロールできないボールのようで、千マイルの馬が逃げて走ることができますその周り。
では、JavaScriptはどのように解析されますか？その実行命令は何ですか？これらを理解する前に、まずいくつかの重要な用語を理解しましょう。
1。コードブロック
JavaScriptのコードブロックは、<script>タグで割ったコードセグメントを指します。例えば：
コードコピーは次のとおりです。
<script type = "text/javascript">
alert（ "これはコードブロック1です"）;
</script>
<script type = "text/javascript">
alert（ "これはコードブロック2です"）;
</script>
JSは、コードブロックに従ってコンパイルおよび実行されますが、変数とメソッドは共有されます。たとえば、それはどういう意味ですか？
コードコピーは次のとおりです。
<script type = "text/javascript">
alert（str）; // strが定義されていないため、ブラウザにはエラーが発生し、次のことが実行できません
alert（ "私はコードブロック1です"）; //ここで実行していません
var test = "私はコードブロック変数です";
</script>
<script type = "text/javascript">
アラート（「私はコードブロック2です」）; //ここで実行されます
アラート（テスト）; // popt「私はコードブロック変数」
</script>
上記のコードでは、コードブロック1の操作はエラーを報告しますが、コードブロック2の実行には影響しません。
2。宣言関数と割り当て関数
JSの関数定義は、宣言関数と割り当て関数の2つのタイプに分けられます。
コードコピーは次のとおりです。
<script type = "text/javascript">
関数fn（）{//宣言関数
}
var fn = function {//割り当て関数
}
</script>
宣言関数と割り当て関数の違いは、JSの事前コンパイル期間中に最初に宣言関数が抽出され、次にJSコードが順番に実行されることです。
3。プレリコンパイル期間と実行期間
実際、JSの解析プロセスは、プリコンパイル期間（前処理）と実行期間の2つの段階に分けられます。
事前コンパイル期間中、JSはこのコードブロックのすべての宣言された変数と関数を処理します（Cの編集と同様）が、現時点では関数を処理する唯一のものは宣言的であり、変数は初期化と割り当てのみが宣言されています。
コードコピーは次のとおりです。
<script type = "text/javascript">
fn（）;
関数fn（）{//関数1
alert（ "関数1が実行された"）;
}
関数fn（）{//関数2
alert（ "function 2が実行されました"）;
}
</script>
<script type = "text/javascript">
fn（）; //実行結果：「宣言関数が実行されました」と、宣言関数の前にfn（）コール関数が配置されたとしても、機能が宣言および処理されました。
関数fn（）{//宣言関数
alert（ "宣言された関数実行"）;
}
var fn = function（）{//割り当て関数
alert（ "割り当て関数を実行する"）;
}
</script>
//コードブロック1
<script type = "text/javascript">
alert（str）; //ブラウザエラーが報告されましたが、情報ウィンドウがポップアップしませんでした
</script>
//コードブロック2
<script type = "text/javascript">
アラート（str）; //ポップアップウィンドウ「未定義」
var str = "aaa";
</script>
// JSは、前処理期間中に変数を宣言しますが、初期化と割り当ての値はありません。これにより、コードブロック2の変数が固定されていませんが、コード1の変数はまったく存在しないため、ブラウザはエラーを報告します。
上記の用語を理解した後、私はあなたがJSの実行メカニズムの大まかな印象を持っていると思います。
コードコピーは次のとおりです。
<script type = "text/javascript">
fn（）; //ブラウザエラー：「未定義」
</script>
<script type = "text/javascript">
関数fn（）{//関数1
alert（ "関数1が実行された"）;
}
</script>
上記のコードを実行するときにブラウザがエラーを報告するのはなぜですか？宣言関数は、前処理期間中に処理されませんか？実際、これはJSエンジンが完全に実行されると、コードブロックに従って実行され、実行されることを意味します。コードは機能と変数を宣言しますが、アンロードされたコードブロックの場合、コンパイル中の処理のコアでもあります。
さて、要約して整理しましょう。
コードコピーは次のとおりです。
ステップ1。最初のコードブロックを読み取ります。
ステップ2。構文分析を行うと、構文エラー（ブラケットの不一致など）を報告し、ステップ5にジャンプします。
ステップ3。VAR変数と関数定義の「プリコンパイル処理」を実行します（正しい宣言のみが解析されているため、エラーが報告することはありません）。
ステップ4。コードセグメントを実行し、エラーがある場合、エラーが報告されます（変数は定義されていません）。
ステップ5。別のコードセグメントがある場合は、次のコードセグメントを読み、ステップ2を繰り返します。
ステップ6。
HTMLドキュメントストリームの実行順序によると、ページ要素のレンダリング前に実行する必要があるJSコードは、<body>の前に<script>コードブロックに配置する必要があり、ページ要素が読み込まれた後のJSは要素の後に</body>に配置され、ボディタグのオンロードイベントが最後に実行されます。
コードコピーは次のとおりです。
<script type = "text/javascript">
アラート（ "First"）;
関数fn（）{
アラート（ "3番目の"）;
}
</script>
<body onload = "fn（）">
</body>
<script type = "text/javascript">
Alert（ "Second"）;
</script>