JavaScript模块代码执行顺序

html文件中js代码执行顺序
大家都知道js是顺序执行的，但是如果在一个函数的定义之前调用这个函数那会是什么效果那？

下面的代码是一个列子，如果myAbc没有定义则会提示错误，如果已经定义则会正确提示。



Js代码
<script>  
try {  
    myAbc();  
} catch(e) {  
    alert("error");  
}  
</script>  
<script>  
function myAbc() {  
    alert("myAbc");  
}  
</script> 

<script>
try {
myAbc();
} catch(e) {
alert("error");
}
</script>
<script>
function myAbc() {
alert("myAbc");
}
</script>
在这种情况下会报错。



Js代码
<script>  
try {  
    myAbc();  
} catch(e) {  
    alert("error");  
}  
function myAbc() {  
    alert("another myAbc()");  
}  
</script> 

<script>
try {
myAbc();
} catch(e) {
alert("error");
}
function myAbc() {
alert("another myAbc()");
}
</script>
这种情况是可以执行的，这说明在一个script范围内定义函数会预加载，这样在调用函数的时候函数就已经存在了。



Js代码
<script>  
try {  
    myAbc();  
} catch(e) {  
    alert("error");  
}  
function myAbc() {  
    alert("another myAbc()");  
}  
</script>  
<script>  
function myAbc() {  
    alert("myAbc");  
}  
</script> 

<script>
try {
myAbc();
} catch(e) {
alert("error");
}
function myAbc() {
alert("another myAbc()");
}
</script>
<script>
function myAbc() {
alert("myAbc");
}
</script>


这种情况下会提示什么那？

呵呵，another myAbc()，跟你想的不一样吧。



总结一下，就是各个script代码模块都是顺序执行的，每个模块的代码只能执行前面已经定义的函数和自己所在代码模块的函数，而不能调用在其后面的模块的函数。