ホームページ > 記事 > ウェブフロントエンド > JavaScript ステートメントの実行プロセスについて説明する_JavaScript スキル

JavaScript ステートメントの実行プロセスについて説明する_JavaScript スキル

WBOYオリジナル: 2016-05-16 15:17:061445ブラウズ

早速、本題に入りましょう。 JavaScript の動作原理は次のように要約されます:

1. HTML ドキュメントフロー

の順序で JavaScript コードを実行します。

ブラウザは、ドキュメントフローに従ってページの構造と情報を上から下に徐々に解析します。JavaScript コードは埋め込みスクリプトであり、HTML ドキュメントのコンポーネントであるため、ロード時の JavaScript コードの実行順序もそれに基づいています。スクリプトタグ 3f1c4e4b6b16bbbd69b2ee476dc4f83a は、出現する順序によって決まります。

外部 .js ファイルがスクリプトタグ 3f1c4e4b6b16bbbd69b2ee476dc4f83a の src 属性を通じて導入された場合、そのファイルもそのステートメントが出現する順序で実行され、実行プロセスはドキュメントの読み込みの一部となります。外部jsファイルなので実行が遅れることはありません。

2. プリコンパイルと実行順序の関係

まず次のコードを見てください:

<script type="text/javascript">
function hello() {
alert("hello");
}
hello();
function hello() {
alert("hello world");
}
hello();
</script>

上記の JS コードの出力結果は、最初に hello、次に hello world を出力するのではなく、hello world、hello world となります。これは、JavaScript が完全に順番に解釈および実行されるわけではなく、プリコンパイル処理中に、定義された関数が最初に実行され、すべての var 変数がデフォルトで作成されるためです。プログラムの実行効率を向上させます。言い換えれば、上記のコードは実際には JS エンジンによって次のようにプリコンパイルされます:

<script type="text/javascript">
var hello = function() {
alert("hello");
};
hello = function() {
alert("hello world");
};
hello();
hello();
</script>

上記のコードから、関数が実際には変数であり、関数に値を割り当てることができることが明確にわかります。前の状況の発生を防ぐために、次のように 2 つの js ファイルに定義できます:

<script type="text/javascript">
hello();
function hello() {
alert("hello");
}
// hello();
</script>
<script type="text/javascript">
function hello() {
alert("hello world");
}
hello();
</script>

上記の最初のファイルでは、関数の前に hello() を置くと、正しい結果が出力されます。

<script type="text/javascript">
hello();
var hello = function() {
alert("hello");
};
// hello();
</script>

上記のメソッドを使用して関数を定義すると、次の図 1 に示すエラーメッセージが報告されます。

ここでは、「hello is not a function」というエラーが報告されます。これは、プリコンパイル中に、var で宣言された変数が最初に処理されるにもかかわらず、変数値が未定義であるためです。次に hello() を実行すると、前の hello は未定義で型が決まっていないため、ここでの hello は関数ではありません。この関数はプログラム内で定義されていますが、定義の場所は呼び出しの後に配置されるため、呼び出しが行われたときにプログラムはここで実行されないため、役に立ちません。

次のコード部分を見てください:

<script type="text/javascript">
hello();
function hello() {
alert("hello");
}
// hello();
</script>

上記のコードは関数定義の前に呼び出していますが、関数で定義した場合はvarとは異なり、関数の値がすでに設定されています。過去のものなので、ここで実行できます。

概要:

JavaScript エンジンはスクリプトを解析する際、プリコンパイル中に宣言されたすべての変数と関数を処理します。処理は次のとおりです。

(1) 同様の「プリコンパイル」操作が実行前に実行されます。まず、現在の実行環境でアクティブなオブジェクトが作成され、var で宣言された変数がアクティブオブジェクトの属性として設定されます。ただし、この時点では変数の割り当てはすべて未定義であり、 function で定義された関数もアクティブオブジェクトのプロパティとして追加され、それらの値は関数の定義とまったく同じになります。

(2) 解釈および実行フェーズ中に、変数を解析する必要がある場合、変数が見つからず、実行環境の所有者がその変数を持っている場合は、まず現在の実行環境のアクティブなオブジェクトから検索されます。プロトタイプ属性の場合はプロトタイプチェーンから検索され、それ以外の場合はスコープチェーンに従って検索されます。 var a = ... などのステートメントが出現すると、対応する変数に値が割り当てられます (注: 変数の割り当ては解釈および実行フェーズ中に完了します。変数がこれより前に使用された場合、その値は未定義です)。

(3) 一言でまとめると、変数の宣言はコンパイル前、変数の初期化は実行時に行われます。

<script type="text/javascript">
alert(a); // 在预编译期间a变量已经加载，但是用var定义，所以赋值为undefined先，故这里输出undefined。
var a = 1; // 这里给前面的没有赋值的a进行赋值为1
alert(a); // 这里输出的a已经是前面赋值过的，所以输出1。
</script>

上記のコードの出力結果は次のようになります。最初に未定義が出力され、次に 1 が出力されます。分析については、コードの備考を参照してください。

変数と関数の宣言はドキュメント内のどこにでも置くことができますが、すべての JavaScript コードの前にグローバル変数と関数を宣言し、変数を初期化して代入することをお勧めします。関数内では、変数は最初に宣言されてから参照されます。

3. JavaScript コードをブロックで実行します

いわゆるコードブロックは、<script> タグで区切られたコードセグメントです。 JavaScript インタープリターはスクリプトを実行する際、ブロック単位で実行します。平たく言えば、ブラウザが HTML ドキュメントストリームを解析するときに 3f1c4e4b6b16bbbd69b2ee476dc4f83a タグを検出すると、JavaScript インタプリタはコードブロックがロードされるまで待機し、コードブロックをプリコンパイルしてから実行します。実行後、ブラウザーは以下の HTML ドキュメントストリームの解析を続け、JavaScript インタープリターはコードの次のブロックを処理する準備が整います。 JavaScript はブロック単位で実行されるため、後続のブロックで宣言された変数や関数を JavaScript ブロック内で呼び出すと、構文エラーが表示されます。 <p> <div class="jb51code"> <pre class="brush:js;"> <script> alert(a); </script> <script> var a = 1; </script></pre> <p>上面的这段代码，由于是两个代码块，先执行完第一个代码块，再执行第二个代码块。执行第一个代码块的时候，变量a没有声明，所以报错，报错信息是：a is not defined。 <div class="jb51code"> <pre class="brush:js;"> <script> var a = 1; </script> <script> alert(a); </script></pre> <p>虽然说，JavaScript是按块执行的，但是不同块都属于同一个全局作用域，也就是说，块之间的变量和函数是可以共享的。所以，上面的这两个代码块运行的时候，虽然是两个代码块，但是第一段运行以后，a变量就存在了全局作用域中，此时运行到第二个代码块，输出的a变量就可以调用全局作用域中的a，所以没有问题。 <p><span style="color: #0000ff"><strong>4、借助事件机制改变javascript执行顺序 <p>由于JavaScript是按块处理代码，同时又遵循HTML文档流的解析顺序，所以在上面示例中会看到这样的语法错误。但是当文档流加载完毕，如果再次访问就不会出现这样的错误。为了安全起见，我们一般在页面初始化完毕之后才允许JavaScript代码执行，这样可以避免网速对JavaScript执行的影响，同时也避开了HTML文档流对于JavaScript执行的限制。 <div class="jb51code"> <pre class="brush:js;"> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>javascript</title> <script> window.onload = function() { alert(a); }; </script> <script> var a = 1; alert("bb"); </script> </head> <body> </body> <script> alert("cc"); </script> </html></pre> <p>windows.onload = function()表示先在触发事件上加一个函数，并不立即执行，而是在整个页面都加载完成以后再开始执行该事件，及function。所以，在windows.onload执行之前，就已经把一些变量加载到了全局区中，所以没有问题。上面的输出结果是：先输出bb，再输出cc，最后输出a。 <div class="jb51code"> <pre class="brush:js;"> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>javascript</title> <script> window.onload = function() { alert(a); }; // 上面的onload不会执行，只会执行下面的onload window.onload = function() { alert("onload2"); }; </script> <script> var a = 1; alert("bb"); </script> </head> <body> </body> <script> alert("cc"); </script> </html></pre> <p>如果在一个页面中存在多个windows.onload事件处理函数，则只有最后一个才是有效的(如上面的代码所示)，为了解决这个问题，可以把所有脚本或调用函数都放在同一个onload事件处理函数中，如下面的代码所示： <div class="jb51code"> <pre class="brush:js;"> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>javascript</title> <script> window.onload = function() { // 放到一起 alert(a); alert("onload2"); }; </script> <script> var a = 1; alert("bb"); </script> </head> <body> </body> <script> alert("cc"); </script> </html></pre> <p><span style="color: #0000ff"><strong>5、javascript输出脚本的执行顺序 <p>在JavaScript开发中，经常会使用document对象的write()方法输出JavaScript脚本。document.write()方法先把输出的脚本字符串写入到脚本所在的文档位置，浏览器在解析完document.write()所在文档内容后，继续解析document.write()输出的内容，然后才按顺序解析后面的HTML文档。也就是说，JavaScript脚本输出的代码字符串会在输出后马上被执行。请注意，使用document.write()方法输出的JavaScript脚本字符串必须放在同时被输出的3f1c4e4b6b16bbbd69b2ee476dc4f83a标签中，否则JavaScript解释器因为不能够识别这些合法的JavaScript代码，而作为普通的字符串显示在页面文档中。但是，通过document.write()方法输出脚本并执行也存在一定的风险，因为不同JavaScript引擎对其执行顺序不同，同时不同浏览器在解析时也会出现Bug。 <p>以上所述是小编给大家介绍的JavaScript语句的执行过程，希望对大家有所帮助。 </script>

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：jQuery は checkbox_jquery の選択された値を取得します次の記事：jQuery は checkbox_jquery の選択された値を取得します

続きを見る

JavaScript ステートメントの実行プロセスについて説明する_JavaScript スキル

関連記事