ホームページ > 記事 > ウェブフロントエンド > JavaScriptプログラムの実行順序の課題まとめ_JavaScriptスキル

JavaScriptプログラムの実行順序の課題まとめ_JavaScriptスキル

WBOYオリジナル: 2016-05-16 18:05:251044ブラウズ

順番が乱雑になるかもしれないので、書きすぎたら整理します。用語が不適切な場合もありますので、批判や修正は歓迎です。以下で使用するサンプルプログラムは私によって検証されており、すべての主要なブラウザと互換性があります。さて、本題に入りましょう。
1. 変数の宣言と参照
変数は最初に宣言してから参照する必要があることは誰もが知っていますが、関連する問題については後で説明するので、必ず説明する必要があります。

[Ctrl A すべて選択注: 外部 Js を導入する必要がある場合は、更新して実行する必要があります

]
2. 関数の宣言と呼び出し

JavaScript は、ブラウザーによって動的に解析されて実行される記述スクリプト言語です。一般に、関数を定義するには 2 つの方法があり、ブラウザには方法ごとに異なる解析順序があります。

コードをコピー

コードは次のとおりです。

 
//「定義」関数定義
function Fn1(){ 
alert("Hello World!"); 
} 
//「割り当て」関数定義 
var Fn2 = function(){ 
alert("Hello wild ! "); 
} 

ページの読み込みプロセス中に、ブラウザーはページ上または読み込まれたすべての JS コードブロック (またはファイル) をスキャンします。定義された関数が見つかった場合は、次の処理を実行します。前処理 (C などのコンパイルと同様) を実行し、処理が完了した後に上から下へ実行を開始します。代入関数に遭遇すると、関数は前処理なしで変数にのみ代入されます (1 の変数と同様)。 (定義後参照の原則)、呼び出されるまで処理されません。簡単な例を次に示します:

コードをコピー

コードは次のとおりです:

 
//"定義 "関数定義 
Fn1(); 
function Fn1(){ 
alert("Hello World!"); 
} 

通常実行してポップアップ " Hello World" !" を実行すると、ブラウザは Fn1 を前処理し、Fn1(); から実行を開始します。

コードをコピー

コードは次のとおりです:

 
//「代入」関数定義
Fn2 (); 
var Fn2 = function(){ 
alert("Hello wild!"); 
} 

Firebug エラー: Fn2 は関数ではありません。ブラウザは Fn2 を前処理して順番に実行しないため、エラー Fn2 は未定義です。
3. コードブロックと js ファイルの処理
「コードブロック」とは、js でラップされたタグのペアを指します。コード、ファイルはファイルを意味します、ナンセンス :D
ブラウザは各ブロックまたはファイルを個別にスキャンし、グローバルコードを順番に実行します (2 で述べた)。したがって、1 つのブロック (ファイル) では呼び出しの後に関数を「定義」できますが、2 つのブロックでは、関数を定義するブロックは関数を呼び出すブロックの前になければなりません。
わかりにくいので、例を見てください:

コードをコピーします

コードは次のとおりです:

 
// エラー: Fn は未定義です。2 つのブロックを入れ替えてください

4. 関数を繰り返し定義すると、前の定義が上書きされます。
これは、変数の繰り返し定義と同じです。コード:

コードをコピーコードは次のとおりです。

 
function fn(){ 
alert(1)} 
function fn; (){ 
alert (2); 
} 
fn() 
// ポップアップ: "2" 

 

次の場合:

コードをコピーしますコードは次のとおりです。

fn(); {
alert(1);
}
function fn(){
alert(2);
}
// 引き続きポップアップが表示されます: "2"

「2」がまだ表示されますが、なぜですか? 2 については説明しました...
5. 本体の onload 関数と本体の内部関数の実行
本体の内部関数は onload 関数の前に実行されます。 🎜>

コードをコピーコードは次のとおりです:

//html head...