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

ホームページ

ウェブフロントエンド

jsチュートリアル

jsの実行順序解析

小云云

Mar 07, 2018 am 10:56 AM

javascript分析する注文

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 サイトの他の関連記事を参照してください。

声明

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

Python vs. JavaScript：コミュニティ、ライブラリ、リソースApr 15, 2025 am 12:16 AM

PythonとJavaScriptには、コミュニティ、ライブラリ、リソースの観点から、独自の利点と短所があります。 1）Pythonコミュニティはフレンドリーで初心者に適していますが、フロントエンドの開発リソースはJavaScriptほど豊富ではありません。 2）Pythonはデータサイエンスおよび機械学習ライブラリで強力ですが、JavaScriptはフロントエンド開発ライブラリとフレームワークで優れています。 3）どちらも豊富な学習リソースを持っていますが、Pythonは公式文書から始めるのに適していますが、JavaScriptはMDNWebDocsにより優れています。選択は、プロジェクトのニーズと個人的な関心に基づいている必要があります。

C/CからJavaScriptへ：すべてがどのように機能するかApr 14, 2025 am 12:05 AM

C/CからJavaScriptへのシフトには、動的なタイピング、ゴミ収集、非同期プログラミングへの適応が必要です。 1）C/Cは、手動メモリ管理を必要とする静的に型付けられた言語であり、JavaScriptは動的に型付けされ、ごみ収集が自動的に処理されます。 2）C/Cはマシンコードにコンパイルする必要がありますが、JavaScriptは解釈言語です。 3）JavaScriptは、閉鎖、プロトタイプチェーン、約束などの概念を導入します。これにより、柔軟性と非同期プログラミング機能が向上します。

JavaScriptエンジン：実装の比較Apr 13, 2025 am 12:05 AM

さまざまなJavaScriptエンジンは、各エンジンの実装原則と最適化戦略が異なるため、JavaScriptコードを解析および実行するときに異なる効果をもたらします。 1。語彙分析：ソースコードを語彙ユニットに変換します。 2。文法分析：抽象的な構文ツリーを生成します。 3。最適化とコンパイル：JITコンパイラを介してマシンコードを生成します。 4。実行：マシンコードを実行します。 V8エンジンはインスタントコンピレーションと非表示クラスを通じて最適化され、Spidermonkeyはタイプ推論システムを使用して、同じコードで異なるパフォーマンスパフォーマンスをもたらします。

ブラウザを超えて：現実世界のJavaScriptApr 12, 2025 am 12:06 AM

現実世界におけるJavaScriptのアプリケーションには、サーバー側のプログラミング、モバイルアプリケーション開発、モノのインターネット制御が含まれます。 2。モバイルアプリケーションの開発は、ReactNativeを通じて実行され、クロスプラットフォームの展開をサポートします。 3.ハードウェアの相互作用に適したJohnny-Fiveライブラリを介したIoTデバイス制御に使用されます。

next.jsを使用してマルチテナントSaaSアプリケーションを構築する（バックエンド統合）Apr 11, 2025 am 08:23 AM

私はあなたの日常的な技術ツールを使用して機能的なマルチテナントSaaSアプリケーション（EDTECHアプリ）を作成しましたが、あなたは同じことをすることができます。まず、マルチテナントSaaSアプリケーションとは何ですか？マルチテナントSaaSアプリケーションを使用すると、Singの複数の顧客にサービスを提供できます

next.jsを使用してマルチテナントSaaSアプリケーションを構築する方法（フロントエンド統合）Apr 11, 2025 am 08:22 AM

この記事では、許可によって保護されたバックエンドとのフロントエンド統合を示し、next.jsを使用して機能的なedtech SaaSアプリケーションを構築します。 FrontEndはユーザーのアクセス許可を取得してUIの可視性を制御し、APIリクエストがロールベースに付着することを保証します

JavaScript：Web言語の汎用性の調査Apr 11, 2025 am 12:01 AM

JavaScriptは、現代のWeb開発のコア言語であり、その多様性と柔軟性に広く使用されています。 1）フロントエンド開発：DOM操作と最新のフレームワーク（React、Vue.JS、Angularなど）を通じて、動的なWebページとシングルページアプリケーションを構築します。 2）サーバー側の開発：node.jsは、非ブロッキングI/Oモデルを使用して、高い並行性とリアルタイムアプリケーションを処理します。 3）モバイルおよびデスクトップアプリケーション開発：クロスプラットフォーム開発は、反応および電子を通じて実現され、開発効率を向上させます。

JavaScriptの進化：現在の傾向と将来の見通しApr 10, 2025 am 09:33 AM

JavaScriptの最新トレンドには、TypeScriptの台頭、最新のフレームワークとライブラリの人気、WebAssemblyの適用が含まれます。将来の見通しは、より強力なタイプシステム、サーバー側のJavaScriptの開発、人工知能と機械学習の拡大、およびIoTおよびEDGEコンピューティングの可能性をカバーしています。

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

SublimeText3 中国語版

中国語版、とても使いやすい

SAP NetWeaver Server Adapter for Eclipse

Eclipse を SAP NetWeaver アプリケーションサーバーと統合します。

Dreamweaver Mac版

ビジュアル Web 開発ツール

Safe Exam Browser

Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポートライブラリとヘッダーファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。