![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
<!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>
