jsの実行順序解析
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);関連する推奨事項: js の実行順序ソリューションについてpage_javascript スキルでの JS の実行順序 JavaScript の実行順序分析
以上がjsの実行順序解析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7535
15
1379
52
82
11
21
86
WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法
Dec 17, 2023 pm 02:54 PM
WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法 はじめに: 技術の継続的な発展により、音声認識技術は人工知能の分野の重要な部分になりました。 WebSocket と JavaScript をベースとしたオンライン音声認識システムは、低遅延、リアルタイム、クロスプラットフォームという特徴があり、広く使用されるソリューションとなっています。この記事では、WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法を紹介します。
WebSocket と JavaScript: リアルタイム監視システムを実装するための主要テクノロジー
Dec 17, 2023 pm 05:30 PM
WebSocketとJavaScript：リアルタイム監視システムを実現するためのキーテクノロジー はじめに： インターネット技術の急速な発展に伴い、リアルタイム監視システムは様々な分野で広く利用されています。リアルタイム監視を実現するための重要なテクノロジーの 1 つは、WebSocket と JavaScript の組み合わせです。この記事では、リアルタイム監視システムにおける WebSocket と JavaScript のアプリケーションを紹介し、コード例を示し、その実装原理を詳しく説明します。 1.WebSocketテクノロジー
JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築
Dec 17, 2023 pm 05:13 PM
JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築 はじめに: 今日、天気予報の精度は日常生活と意思決定にとって非常に重要です。テクノロジーの発展に伴い、リアルタイムで気象データを取得することで、より正確で信頼性の高い天気予報を提供できるようになりました。この記事では、JavaScript と WebSocket テクノロジを使用して効率的なリアルタイム天気予報システムを構築する方法を学びます。この記事では、具体的なコード例を通じて実装プロセスを説明します。私たちは
簡単な JavaScript チュートリアル: HTTP ステータス コードを取得する方法
Jan 05, 2024 pm 06:08 PM
JavaScript チュートリアル: HTTP ステータス コードを取得する方法、特定のコード例が必要です 序文: Web 開発では、サーバーとのデータ対話が頻繁に発生します。サーバーと通信するとき、多くの場合、返された HTTP ステータス コードを取得して操作が成功したかどうかを判断し、さまざまなステータス コードに基づいて対応する処理を実行する必要があります。この記事では、JavaScript を使用して HTTP ステータス コードを取得する方法を説明し、いくつかの実用的なコード例を示します。 XMLHttpRequestの使用
DreamWeaver CMS のセカンダリディレクトリを開けない原因の分析
Mar 13, 2024 pm 06:24 PM
タイトル: DreamWeaver CMS のセカンダリディレクトリを開けない原因と解決策の分析 Dreamweaver CMS (DedeCMS) は、さまざまな Web サイトの構築に広く使用されている強力なオープンソースのコンテンツ管理システムです。ただし、Web サイトの構築中に、セカンダリ ディレクトリを開けない状況が発生し、Web サイトの通常の動作に問題が発生することがあります。この記事では、セカンダリ ディレクトリを開けない考えられる理由を分析し、この問題を解決するための具体的なコード例を示します。 1. 考えられる原因分析: 疑似静的ルール構成の問題: 使用中
JavaScript で HTTP ステータス コードを簡単に取得する方法
Jan 05, 2024 pm 01:37 PM
JavaScript で HTTP ステータス コードを取得する方法の紹介: フロントエンド開発では、バックエンド インターフェイスとの対話を処理する必要があることが多く、HTTP ステータス コードはその非常に重要な部分です。 HTTP ステータス コードを理解して取得すると、インターフェイスから返されたデータをより適切に処理できるようになります。この記事では、JavaScript を使用して HTTP ステータス コードを取得する方法と、具体的なコード例を紹介します。 1. HTTP ステータス コードとは何ですか? HTTP ステータス コードとは、ブラウザがサーバーへのリクエストを開始したときに、サービスが
Tencent の主要なプログラミング言語が Go であるかどうかを分析する
Mar 27, 2024 pm 04:21 PM
タイトル: テンセントの主要なプログラミング言語は Go ですか: 詳細な分析 中国の大手テクノロジー企業として、テンセントはプログラミング言語の選択において常に多くの注目を集めてきました。近年、テンセントは主に Go を主要なプログラミング言語として採用していると考える人もいます。この記事では、Tencent の主要なプログラミング言語が Go であるかどうかについて詳細な分析を行い、この見解を裏付ける具体的なコード例を示します。 1. Tencent における Go 言語の適用 Go は、Google によって開発されたオープンソースのプログラミング言語であり、その効率性、同時実行性、シンプルさにより多くの開発者に愛されています。
静的測位技術の長所と短所を分析する
Jan 18, 2024 am 11:16 AM
静的測位技術の利点と限界の分析 現代の科学技術の発展に伴い、測位技術は私たちの生活に欠かせないものになりました。その 1 つとして、静的測位テクノロジには独自の利点と制限があります。この記事では、静的測位技術の詳細な分析を実施して、現在の応用状況と将来の開発傾向をより深く理解します。まず、静的測位技術の利点を見てみましょう。静的測位技術は、位置決め対象の物体を観察、測定、計算することで位置情報を決定します。他の測位技術と比較して、
