js 程序执行与顺序实现详解
2018-03-23 本文已影响19人
米酒真香
1、 js中定义式函数和赋值式函数
JavaScript函数的定义方式大体有以下两种，浏览器对于不同的方式有不同的解析顺序。
//“定义式”函数:
function Fn1(){
alert("Hello World!");
}
//“赋值式”函数:
var Fn2 = function(){
alert("Hello World!");
}
页面加载过程中，浏览器会对页面上或载入的每个js代码块(或文件)进行扫描，如果遇到定义式函数，则进行预处理(类似于C等的编译)，处理完成之后再开始由上至下执行；遇到赋值式函数，则只是将函数赋给一个变量，不进行预处理(类似1中变量必须先定义后引用的原则)，待调用到的时候才进行处理。下面举个简单的例子：
//“定义式”函数
Fn1(); //正常执行
function Fn1(){
alert("Hello World!");
}
正常执行，弹出“Hello World!”，浏览器对Fn1进行了预处理，再从Fn1();开始执行。
//“赋值式”函数
Fn2(); //报错，Fn2 is not a function
var Fn2 = function(){
alert("Hello wild!");
}
报错：Fn2 is not a function，浏览器未对Fn2进行预处理，依序执行，所以报错Fn2未定义。
2、 代码块及js文件的处理
“代码块”是指一对<script></script>标签包裹着的js代码，文件就是指.js文件。
浏览器对每个块或文件进行独立的扫描，然后对全局的代码进行顺序执行。所以，在一个块(文件)中，函数可以在调用之后进行“定义式”定义；但在两个块中，定义函数所在的块必须在函数被调用的块之前。
如：
<script type="text/javascript">
Fn();
</script>
<script type="text/javascript">
function Fn(){
alert("Hello World!");
}
</script>
// 报错：Fn is notdefined，两个块换过来就对了
3、重复定义函数会覆盖前面的定义
这和变量的重复定义是一样的
function fn(){
alert(1);
}
function fn(){
alert(2);
}
fn();
// 弹出：“2”
如果是:
fn();
function fn(){
alert(1);
}
function fn(){
alert(2);
}
// 还是弹出：“2”
4 、body的onload函数与body内部函数的执行
//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!”
