js執行順序分析
JavaScript是一種描述型腳本語言，由瀏覽器進行動態的解析與執行。函數的定義方式大致上有以下兩種，瀏覽器對於不同的方式有不同的解析順序。本文主要和大家分享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 is not a function，瀏覽器未對Fn2進行預處理，依序執行，所以報錯Fn2未定義。
3. 程式碼區塊及js檔案的處理
「程式碼區塊」是指一對標籤包裹著的js程式碼，檔案就是指檔案啦，廢話:D
瀏覽器對每個區塊或檔案進行獨立的掃描，然後對全域的程式碼進行順序執行(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內部的函數會先於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事件觸發條件是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秒后弹出：“我先调用”看上去，fn2()和延時程式是分兩個過程再走，但其實，這是JavaScript中的“回調”機制在起作用，類似於作業系統中的“中斷和回應” —— 延時程式設定一個“中斷”，然後執行fn2()，待1000毫秒時間到後，再回調執行fn1()。
同樣，5中body的onload事件呼叫的函數，也是利用了回呼機制－body載入完成之後，回呼執行fnOnLoad()函數。
Ajax請求中的資料處理函數也是一樣的道理。
關於JavaScript線程問題的更深入討論，看這篇 javascript中的線程之我見，以及infoQ上的 JavaScript多線程程式設計簡介。
困了，再說一下回呼函數吧。
7. 回呼函數
回呼函數是幹嘛用的？就是回呼執行的函數嘛，又廢話:D
如6所說，最常見的回調就是onclick、onmouseo教程ver、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執行順序分析的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
如何使用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：實現即時監控系統的關鍵技術引言：隨著互聯網技術的快速發展，即時監控系統在各個領域中得到了廣泛的應用。而實現即時監控的關鍵技術之一就是WebSocket與JavaScript的結合使用。本文將介紹WebSocket與JavaScript在即時監控系統中的應用，並給出程式碼範例，詳細解釋其實作原理。一、WebSocket技
JavaScript與WebSocket：打造高效率的即時天氣預報系統
Dec 17, 2023 pm 05:13 PM
JavaScript和WebSocket：打造高效的即時天氣預報系統引言：如今，天氣預報的準確性對於日常生活以及決策制定具有重要意義。隨著技術的發展，我們可以透過即時獲取天氣數據來提供更準確可靠的天氣預報。在本文中，我們將學習如何使用JavaScript和WebSocket技術，來建立一個高效的即時天氣預報系統。本文將透過具體的程式碼範例來展示實現的過程。 We
簡易JavaScript教學：取得HTTP狀態碼的方法
Jan 05, 2024 pm 06:08 PM
JavaScript教學：如何取得HTTP狀態碼，需要具體程式碼範例前言：在Web開發中，經常會涉及到與伺服器進行資料互動的場景。在與伺服器進行通訊時，我們經常需要取得傳回的HTTP狀態碼來判斷操作是否成功，並根據不同的狀態碼來進行對應的處理。本篇文章將教你如何使用JavaScript來取得HTTP狀態碼，並提供一些實用的程式碼範例。使用XMLHttpRequest
織夢CMS二級目錄打不開的原因分析
Mar 13, 2024 pm 06:24 PM
標題：解析織夢CMS二級目錄打不開的原因及解決方案織夢CMS（DedeCMS）是一款功能強大的開源內容管理系統，被廣泛應用於各類網站建設中。然而，有時在搭建網站過程中可能會遇到二級目錄無法開啟的情況，這給網站的正常運作帶來了困擾。在本文中，我們將分析二級目錄打不開的可能原因，並提供具體的程式碼範例來解決這個問題。一、可能的原因分析：偽靜態規則配置問題：在使用
如何在JavaScript中取得HTTP狀態碼的簡單方法
Jan 05, 2024 pm 01:37 PM
JavaScript中的HTTP狀態碼取得方法簡介：在進行前端開發中，我們常常需要處理與後端介面的交互，而HTTP狀態碼就是其中非常重要的一部分。了解並取得HTTP狀態碼有助於我們更好地處理介面傳回的資料。本文將介紹使用JavaScript取得HTTP狀態碼的方法，並提供具體程式碼範例。一、什麼是HTTP狀態碼HTTP狀態碼是指當瀏覽器向伺服器發起請求時，服務
分析騰訊主要的程式語言是否為Go
Mar 27, 2024 pm 04:21 PM
標題：騰訊主要的程式語言是否為Go:一項深入分析騰訊作為中國領先的科技公司，在程式語言的選擇上一直備受關注。近年來，有人認為騰訊主要採用Go作為主要的程式語言。本文將對騰訊主要的程式語言是否為Go進行深入分析，並給出具體的程式碼範例來支持這一觀點。一、Go語言在騰訊的應用Go是一種由Google開發的開源程式語言，它的高效性、並發性和簡潔性受到眾多開發者的喜
分析靜態定位技術的優缺點
Jan 18, 2024 am 11:16 AM
靜態定位技術的優勢與限制分析隨著現代科技的發展，定位技術已成為我們生活中不可或缺的一部分。而靜態定位技術作為其中的一種，具有其特有的優點與限制。本文將對靜態定位技術進行深入分析，以便更了解其應用現狀和未來的發展趨勢。首先，我們來看看靜態定位技術的優勢所在。靜態定位技術是透過對待定位物件進行觀測、測量和計算來實現位置資訊的確定。相較於其他定位技術，
