js 程序执行与顺序实现详解

转自

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!” 
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 177,028评论 25 709
  • 这两天 不管面对谁 也不管正进行的话题 我总是能自顾自地 时不时穿插一句 要开学了 好悲伤 要回重庆了 好悲伤 但...
    特别愚人阅读 2,905评论 0 0
  • 某个午夜,某个黎明,某个微小的生活场景,都会让我恍如当年!多年前想写就马上提笔挥挥洒洒几千字,只因为喜欢!多年前会...
    蕙紫阅读 2,490评论 0 0
  • 话说,看到这两年金融市场的变化是很大的,从大盘现货不能做,很多贸易商都尝尽了,金字塔模式带来的伤害,很多人都选择转...
    吾茗轩商城阅读 906评论 0 0

友情链接更多精彩内容