jsの実行順序解析-jsチュートリアル-php.cn

jsの実行順序解析

小云云

リリース： 2018-03-07 10:56:01

オリジナル

1609 人が閲覧しました

JavaScript は、ブラウザーによって動的に解析および実行される記述スクリプト言語です。一般に、関数を定義するには 2 つの方法があり、ブラウザでは方法に応じて解析順序が異なります。この記事では主に js の実行シーケンス分析について説明し、皆様のお役に立てれば幸いです。

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

//“定义式”函数定义 
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 ファイルの処理
「コードブロック」とは、タグで囲まれた 1 組の JS コードを指します。ファイルはファイルを指します、ナンセンス :D
ブラウザは各ブロックまたはファイルを個別にスキャンし、グローバルコードを順番に実行します (2 で述べた)。したがって、1 つのブロック (ファイル) では、関数は呼び出しの後に「定義」できますが、2 つのブロックでは、関数が呼び出されるブロックよりも前に関数が定義されている必要があります。
非常に複雑です。例を見てください:
コードは次のとおりです:

<script type="text/javascript"> 
Fn(); 
</script> 
<script type="text/javascript"> 
function Fn(){ 
alert("Hello World!"); 
} 
</script> 
// 报错：Fn is notdefined，两个块换过来就对了

ログイン後にコピー

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

function fn(){ alert(1); 
} function fn(){ alert(2); 
} fn(); 
// 弹出：“2”

ログイン後にコピー

この場合はどうなりますか:
コードは次のとおりです:

fn(); 
function fn()
{ alert(1); } 
function fn()
{ alert(2); } 
// 还是弹出：
“2”

ログイン後にコピー

「2」がまだポップアップ表示されます、なぜですか? 2については説明済みです...

5. 本体のonload関数と本体の内部関数の実行 テストコード:

//html head... 
<script type="text/javascript"> 
function fnOnLoad(){ 
alert("I am outside the Wall!"); 
} 
</script> 
<body onload="fnOnLoad();"> 
<script type="text/javascript"> 
alert("I am inside the Wall.."); 
</script> 
</body> 
//先弹出“I am inside the Wall..”; 
//后弹出“I am outside the Wall!”

ログイン後にコピー

bodyの内部関数はonload関数の前に実行されます。 onload イベントトリガー条件は、本文のコンテンツが読み込まれ、このイベントがトリガーされる前に本文内の JS コードが実行されることです (なぜですか? 6 でわかります...)

6 JavaScript はマルチスレッドですか、シングルスレッドですか。ネジ式？
厳密に言えば、JavaScript にはマルチスレッドの概念がありません。すべてのプログラムは「シングルスレッド」で順番に実行されます。 不適切な例を挙げると、次のようになります。

function fn1(){ 
var sum = 0; 
for(var ind=0; ind<1000; ind++) { 
sum += ind; 
} 
alert("答案是"+sum); 
} 
function fn2(){ 
alert("早知道了，我就是不说"); 
} 
fn1(); 
fn2(); 

//先弹出：“答案是499500”， 
//后弹出：“早知道了，我就是不说”

ログイン後にコピー

次に、次のように尋ねる必要があります。つまり、遅延実行と Ajax 非同期読み込みはマルチスレッドではないのですか?はい、次のプログラムは確かに「マルチスレッド」のように見えます:

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

function fn1(){ 
setTimeout(function(){ 
alert("我先调用") 
},1000); 
} 
function fn2(){ 
alert("我后调用"); 
} 
fn1(); 
fn2(); 
// 先弹出：“我后调用”， 
// 1秒后弹出：“我先调用”

ログイン後にコピー

fn2() と遅延プログラムが 2 つのプロセスに分かれているように見えますが、実際にはこれは " " コールバックですオペレーティングシステムの「割り込みと応答」と同様のメカニズムが動作しています。遅延プログラムは「割り込み」を設定し、次に fn2() を実行し、1000 ミリ秒待ってからコールバックして fn1() を実行します。

同様に、5 の本体の onload イベントによって呼び出される関数もコールバックメカニズムを使用します。本体がロードされた後、コールバックは fnOnLoad() 関数を実行します。

Ajax リクエストのデータ処理関数にも同じことが当てはまります。
JavaScript のスレッドの問題についてさらに詳しく説明するには、infoQ の記事「JavaScript のスレッドに関する私の意見」と「JavaScript マルチスレッドプログラミングの概要」を参照してください。
眠いので、コールバック関数についてもう一度話しましょう。

7. コールバック関数
コールバック関数は何に使用されますか?それはコールバックによって実行される単なる関数です、ナンセンス:D 6 で述べたように、最も一般的なコールバックは、onclick、onmouseotutorialver、onmousedown、onload などのブラウザイベントの呼び出し関数と、Ajax 非同期リクエストデータの処理関数です。 ; SetTimeOut 遅延実行、setInterval ループ実行関数など。
再生する純粋なコールバック関数を書いてみましょう:
コードは次のとおりです:

function onBack(num){ 
alert("姗姗我来迟了"); 
// 执行num个耳光 
} 
function dating(hours, callBack){ 
var SP= 0; // SP,愤怒值 
//女猪脚在雪里站了hours个钟头 
//循环开始.. 
SP ++; 
//循环结束... 
callBack(SP); 
} 
dating(1, onBack);

ログイン後にコピー