Javascript実行手順のまとめ

5525 ワード

JavaScriptプログラムの実行順序問題のまとめ
覚えやすい星は下手なペン先に及ばず、適時のまとめは知識を整理するのがより楽で楽しいです.今日は学習と開発の中で遭遇したJavaScript実行順の問題をまとめました.今日は穴を掘って、後でゆっくり埋めます.
順序が乱れているかもしれません.多く書いてから整理します.用語の使い方が間違っているかもしれません.ご指摘を歓迎します.以下で使用する例示的なプログラムはすべて本人の実際的な検証を経て、各大きいブラウザーに対応します.OK、本題に入ります.
1.変数の宣言と参照
変数は先に声明して引用しなければなりません.これはみんな知っていますが、後に関連する問題を述べます.
alert(myStr); //   "undefined";
var myStr = "Hello World!";
alert(myStr); //   "Hello World";
2.関数の宣言と呼び出し
JavaScriptは記述型スクリプト言語であり、ブラウザで動的な解析と実行を行う.関数の定義方式は大体以下の二つがあります.ブラウザは異なる方式に対して異なる解析順序があります.
//“   ”    
function Fn1(){
alert("Hello World!");
}
//“   ”    
var Fn2 = function(){
alert("Hello wild!");
}
ページローディング中に、ブラウザはページ上またはロードされた各jsコードブロック(またはファイル)をスキャンします.もし定義式関数があったら、前処理(Cなどのコンパイルに似ています)を行い、処理が完了したら上から下まで実行します.賦値関数に遭遇すると、関数を変数に割り当てるだけで、前処理は行われません(1の変数は先に定義してから引用する原則が必要です。のような).呼び出しが来たら処理します.簡単な例を以下に挙げます.
//“   ”    
Fn1();
function Fn1(){
alert("Hello World!");
}
正常に実行して、「ハローワールド!」をイジェクトして、ブラウザはFn 1を前処理して、Fn 1()から.実行を開始します.
//“   ”    
Fn2();
var Fn2 = function(){
alert("Hello wild!");
}
Firebugエラー:Fn 2 is not a function、ブラウザはFn 2を前処理していないので、順番に実行します.
3.コードブロック及びjsファイルの処理
「コードブロック」とはペアの「script type=」text/javascript」ラベルに包まれているjsコードを指します.ファイルはファイルです.無駄話:D
ブラウザは、各ブロックまたはファイルを個別にスキャンし、グローバルコードを順次実行する(2に述べました).したがって、一つのブロック(ファイル)では、関数は呼び出し後に定義されてもよい.しかし、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.bodyのonload関数とbody内部関数の実行
body内部の関数はOloadの関数より先に実行されます.テストコード:
//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イベントのトリガ条件は、bodyコンテンツのロードが完了し、bodyのjsコードは、このイベントのトリガの前に実行されます(なぜですか?6教えてあげます).
6.JavaScriptはマルチスレッドorシングルスレッドですか?
厳密には、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    :“    ”
fn 2()と遅延プログラムは二つのプロセスに分けて出発するように見えるが、これはJavaScriptの中の「コールバック」機構が機能しており、オペレーティングシステムの「中断とレスポンス」に似ている.遅延プログラムは「中断」を設定してからfn 2()を実行し、1000ミリ秒後にfn 1()を再調整して実行する.
同様に、5中bodyのワンロードイベントで呼び出された関数も、コールバック機構であるbodyローディングが完了した後に、fnOnLoad関数を実行する.
Ajax要求におけるデータ処理関数も同様である.
JavaScriptスレッド問題について、より深く議論し、このjavascriptのスレッドの中の私は見ます。、およびinfoQ上のJavaScriptマルチスレッドプログラミングの概要を参照してください.
眠いので、再度コールバック関数をお願いします.
7.コールバック関数
コールバック関数は何に使いますか?コールバック実行の関数ですか?また無駄話です.D
6によると、最も一般的なフィードバックは、onclick、onmouseover、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);
datingを実行した後、コールバック関数onBackを実行します.デートが終わり、にわか雨が始まりました.
今日は先にここに書きます.もっと深いものはまだ整理されています.もっと多いものは引き続き勉強しなければならないです.添削を歓迎します.