ホームページ > 記事 > ウェブフロントエンド > JavaScriptの実行順序を深く理解する_基礎知識
JavaScriptの実行順序を深く理解する_基礎知識
- WBOYオリジナル
- 2016-05-16 16:53:24986ブラウズ
JavaScript 言語の動作メカニズムを理解できない、つまり JavaScript の実行シーケンスをマスターできない場合、あなたは千マイルの馬を制御できず、千マイルの馬を自由にさせることができないボレのようなものです。そして走り回ります。
では、JavaScript はどのように解析するのでしょうか?その実行順序は何ですか?これらを理解する前に、まずいくつかの重要な用語を理解しましょう:
1. コード ブロック
JavaScript のコード ブロックは、<script> タグで区切られたコード セグメントを指します。例: <br></p>
<div class="codetitle">
<span><a style="CURSOR: pointer" data="50623" class="copybut" id="copybut50623" onclick="doCopy('code50623')"><u>コードをコピー</u></a></span> コードは次のとおりです:</div>
<div class="codebody" id="code50623">
<br><script type=" text/javascript" ><br>alert("これはコード ブロック 1 です");<br></script>
JS はコード ブロックに従ってコンパイルおよび実行されます。コード ブロックは互いに独立していますが、変数とメソッドは共有されます。たとえば、どういう意味ですか?
コードでは、コード ブロック 1 で実行するとエラーが報告されますが、コード ブロック 2 の実行には影響しません。これは、コード ブロックと変数の間の独立性です。コード 1 では、ブロック間で共有しているコード ブロック 2 で呼び出すことができます。
2. 宣言関数と代入関数
JS の関数定義は、宣言関数と代入関数の 2 種類に分かれます。
//js は前処理期間中に変数を宣言しますが、値の初期化と割り当ては行わないため、コード ブロック 2 の変数は未定義ですが、コード 1 の変数は未定義です。はまったく存在しないため、ブラウザはエラーを報告します。
上記の用語を理解したら、JS の動作メカニズムについて大まかなイメージがつかめたと思います。次に例を見てみましょう:
上記のコードを実行するとブラウザーがエラーを報告するのはなぜですか?宣言された関数は前処理期間中に処理されないのでしょうか。なぜ Fn() 関数が見つからないのでしょうか?実際、これは誤解です。JS エンジンはコード ブロックに従って順次実行されると述べました。実際には、コード ブロックに従って前処理されて実行される必要があります。これは、実行されるコードのみが関数を前処理することを意味します。および変数、およびまだロードされていないコード ブロックは前処理できません。これはコンパイル時の処理の核心でもあります。
それでは、要約して整理してみましょう:
コードをコピーします
コードは次のとおりです:
HTML ドキュメント フローの実行順序に従って、ページ要素がレンダリングされる前に実行する必要がある js コードは、