![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>javascript在頁面中的執行順序</title>
<link rel="stylesheet" type="text/css" href="inputAndDiv.css">
</head>
<body style="background-color: #CCE8CF;" οnlοad="fn4();">
<h2>javascript在頁面中的執行順序</h2>
</body>
<script type="text/javascript">
console.log('我是代碼塊1');
</script>
<script type="text/javascript">
console.log('我是代碼塊2');
</script>
<script type="text/javascript">
//test2變量的聲明會前置
// var test2; //test2變量的聲明會提前
var test1 = '江西省贛州市於都縣';
console.log(str); //ReferenceError: str is not defined(因爲沒有定義str，所以會報錯，下面的不能運行)
console.log('我是代碼塊3'); //沒有運行到這裏
var test2 = '天若有情天亦老'; //test2變量的聲明會提前,但是賦值不會提前
// test2 = '天若有情天亦老'; //但是賦值不會提前
</script>
<script type="text/javascript">
console.log('我是代碼塊4'); //這裏有運行到
console.log(test1); //江西省贛州市於都縣
//能訪問到test2變量，但是獲取不到test2變量的值
console.log(test2); //undefined
/*
上面的代碼中代碼塊3中運行報錯，但不影響其他代碼塊的執行，這就是代
碼塊間的獨立性，而代碼塊4中能調用到代碼塊3中的變量，則是塊間共享性。
*/
</script>
<script type="text/javascript">
//js中的函數定義分爲兩種：聲明式函數與賦值式函數
//聲明式函數與賦值式函數的區別在於：在JS的預編譯期，聲明式函數將會先被提取出來，然後才按順序執行js代碼
function fn() { //聲明式函數
}
var fn = function() { //賦值式函數
}
</script>
<script type="text/javascript">
fn1(); //執行結果："執行了1.....",同名函數後者會覆蓋前者
function fn1(){
console.log("執行了1.....");
}
function fn1(){
console.log("執行了2.....");
}
</script>
<script type="text/javascript">
////執行結果："執行了聲明式函數.....",在預編譯期聲明函數及被處理了，所以即使Fn()調用函數放在聲明函數前也能執行
fn2();
function fn2(){//聲明式函數
console.log("執行了聲明式函數.....");
}
var fn2 = function(){//賦值式函數
console.log("執行了賦值式函數.....");
}
</script>
<script type="text/javascript">
console.log("我是代碼塊15");
alert(a); //ReferenceError: a is not defined
</script>
<script type="text/javascript">
console.log("我是代碼塊16");
alert(a); //彈窗"undefined"
//變量的聲明會前置
var a = "hello"; //a變量的聲明會提前,但是賦值不會提前
/*
js在預處理期對變量進行了聲明處理,但是並沒有進行初始化與賦值，所以導致代碼塊16中的變
量是unfiened的，而代碼塊15中的變量是完全不存在的，所以會報錯
*/
</script>
<script type="text/javascript">
//參考網頁https://blog.csdn.net/czh500/article/details/104793911
fn3(); //報錯:ReferenceError: fn3 is not defined
</script>
<script type="text/javascript">
function fn3(){
alert("我是fn3()函數");
}
</script>
<script type="text/javascript">
console.log("1.......");
function fn4(){
console.log("3.......");
}
</script>
<script type="text/javascript">
console.log("2.......");
</script>
</html>
