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


Posted in Javascript onMay 13, 2013

函数的声明和调用
JavaScript是一种描述型脚本语言,由浏览器进行动态的解析与执行。函数的定义方式大体有以下两种,浏览器对于不同的方式有不同的解析顺序。
代码如下:

//“定义式”函数定义 
function Fn1(){ 
alert("Hello World!"); 
} 
//“赋值式”函数定义 
var Fn2 = function(){ 
alert("Hello wild!"); 
}

页面加载过程中,浏览器会对页面上或载入的每个js代码块(或文件)进行扫描,如果遇到定义式函数,则进行预处理(类似于C等的编译),处理完成之后再开始由上至下执行;遇到赋值式函数,则只是将函数赋给一个变量,不进行预处理(类似1中变量必须先定义后引用的原则),待调用到的时候才进行处理。下面举个简单的例子:
代码如下:
//“定义式”函数定义 
Fn1(); 
function Fn1(){ 
alert("Hello World!"); 
}

正常执行,弹出“Hello World!”,浏览器对Fn1进行了预处理,再从Fn1();开始执行。
代码如下:
//“赋值式”函数定义 
Fn2(); 
var Fn2 = function(){ 
alert("Hello wild!"); 
}

Firebug报错:Fn2 is not a function,浏览器未对Fn2进行预处理,依序执行,所以报错Fn2未定义。

3. 代码块及js文件的处理
“代码块”是指一对<script type=”text/网页特效”></script>标签包裹着的js代码,文件就是指文件啦,废话:D
浏览器对每个块或文件进行独立的扫描,然后对全局的代码进行顺序执行(2中讲到了)。所以,在一个块(文件)中,函数可以在调用之后进行“定义式”定义;但在两个块中,定义函数所在的块必须在函数被调用的块之前。
很绕口,看例子好了:
代码如下:

<script type="text/javascript"> 
Fn(); 
</script> 
<script type="text/javascript"> 
function Fn(){ 
alert("Hello World!"); 
} 
</script> 
// 报错:Fn is notdefined,两个块换过来就对了

4. 重复定义函数会覆盖前面的定义
这和变量的重复定义是一样的,代码:
代码如下:
function fn(){ 
alert(1); 
} 
function fn(){ 
alert(2); 
} 
fn(); 
// 弹出:“2”

如果是这样呢:
代码如下:
fn(); 
function fn(){ 
alert(1); 
} 
function fn(){ 
alert(2); 
} 
// 还是弹出:“2”

还是弹出“2”,为什么?2都讲了好吧…

5. body的onload函数与body内部函数的执行
body内部的函数会先于onload的函数执行,测试代码:
代码如下:

//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!”

body的onload事件触发条件是body内容加载完成,而body中的js代码会在这一事件触发之前运行(为什么呢?6告诉你..)

6. JavaScript是多线程or单线程?
严格来说,JavaScript是没有多线程概念的,所有的程序都是“单线程”依次执行的。
举个不太恰当的例子:
代码如下:

function fn1(){ 
var sum = 0; 
for(var ind=0; ind<1000; ind++) { 
sum += ind; 
} 
alert("答案是"+sum); 
} 
function fn2(){ 
alert("早知道了,我就是不说"); 
} 
fn1(); 
fn2();

//先弹出:“答案是499500”,
//后弹出:“早知道了,我就是不说”

那你肯定要问:那延时执行、Ajax异步加载,不是多线程的吗?没错,下面这样的程序确实看起来像“多线程”:
代码如下:

function fn1(){ 
setTimeout(function(){ 
alert("我先调用") 
},1000); 
} 
function fn2(){ 
alert("我后调用"); 
} 
fn1(); 
fn2(); 
// 先弹出:“我后调用”, 
// 1秒后弹出:“我先调用”

看上去,fn2()和延时程序是分两个过程再走,但其实,这是JavaScript中的“回调”机制在起作用,类似于操作系统中的“中断和响应” —— 延时程序设置一个“中断”,然后执行fn2(),待1000毫秒时间到后,再回调执行fn1()。
同样,5中body的onload事件调用的函数,也是利用了回调机制——body加载完成之后,回调执行fnOnLoad()函数。
Ajax请求中的数据处理函数也是一样的道理。
关于JavaScript线程问题的更深入讨论,看这篇 javascript中的线程之我见,以及infoQ上的 JavaScript多线程编程简介。
困了,再说一下回调函数吧。

7. 回调函数
回调函数是干嘛用的?就是回调执行的函数嘛,又废话:D
如6所说,最常见的回调就是onclick、onmouseo教程ver、onmousedown、onload等等浏览器事件的调用函数;还有Ajax异步请求数据的处理函数;setTimeOut延时执行、setInterval循环执行的函数等。
干脆我们写一个纯粹的回调函数玩:
代码如下:

function onBack(num){ 
alert("姗姗我来迟了"); 
// 执行num个耳光 
} 
function dating(hours, callBack){ 
var SP= 0; // SP,愤怒值 
//女猪脚在雪里站了hours个钟头 
//循环开始.. 
SP ++; 
//循环结束... 
callBack(SP); 
} 
dating(1, onBack);
Javascript 相关文章推荐
Struts2的s:radio标签使用及用jquery添加change事件
Apr 08 Javascript
网页中返回顶部代码(多种方法)另附注释说明
Apr 24 Javascript
从QQ网站中提取的纯JS省市区三级联动菜单
Dec 25 Javascript
jquery获取一个元素下面相同子元素的个数代码
Jul 31 Javascript
escape函数解决js中ajax传递中文出现乱码问题
Oct 30 Javascript
JS判断网页广告是否被浏览器拦截过滤的代码
Apr 05 Javascript
JavaScript汉诺塔问题解决方法
Apr 21 Javascript
jQuery插件开发汇总
May 15 Javascript
Jquery Easyui对话框组件Dialog使用详解(14)
Dec 19 Javascript
深入理解vue路由的使用
Mar 24 Javascript
详解angular部署到iis出现404解决方案
Aug 14 Javascript
一篇文章弄清楚Ajax请求的五个步骤
Mar 17 Javascript
JS/jQuery实现默认显示部分文字点击按钮显示全部内容
May 13 #Javascript
JS 加入收藏夹的代码(主流浏览器通用)
May 13 #Javascript
jQuery实现长文字部分显示代码
May 13 #Javascript
jq选项卡鼠标延迟的插件实例
May 13 #Javascript
jQuery获取CSS样式中的颜色值的问题,不同浏览器格式不同的解决办法
May 13 #Javascript
怎么清空javascript数组
May 11 #Javascript
JS子父窗口互相操作取值赋值的方法介绍
May 11 #Javascript
You might like
浅析51个PHP处理字符串的函数
2013/08/02 PHP
PHP实现更改hosts文件的方法示例
2017/08/08 PHP
ThinkPHP5.0框架使用build 自动生成模块操作示例
2019/04/11 PHP
在TP5数据库中四个字段实现无限分类的示例
2019/10/18 PHP
document.getElementById获取控件对象为空的解决方法
2013/11/20 Javascript
JavaScript 32位整型无符号操作示例
2013/12/08 Javascript
jquery缓动swing liner控制动画过程不同时刻的速度
2014/05/29 Javascript
html的DOM中document对象images集合用法实例
2015/01/21 Javascript
js简单工厂模式用法实例
2015/06/30 Javascript
举例讲解jQuery中可见性过滤选择器的使用
2016/04/18 Javascript
JS中作用域和变量提升(hoisting)的深入理解
2016/10/31 Javascript
详解node-ccap模块生成captcha验证码
2017/07/01 Javascript
AngularJS实现select的ng-options功能示例
2017/07/12 Javascript
使用MUI框架模拟手机端的下拉刷新和上拉加载功能
2017/09/04 Javascript
轻松搞定jQuery+JSONP跨域请求的解决方案
2018/03/06 jQuery
基于JavaScript canvas绘制贝塞尔曲线
2018/12/25 Javascript
vue3 源码解读之 time slicing的使用方法
2019/10/31 Javascript
JS实现简易留言板特效
2019/12/23 Javascript
[53:13]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第三场 1月18日
2021/03/11 DOTA
全面解读Python Web开发框架Django
2014/06/30 Python
python读写ini配置文件方法实例分析
2015/06/30 Python
python保存字符串到文件的方法
2015/07/01 Python
windows下添加Python环境变量的方法汇总
2018/05/14 Python
Python模拟自动存取款机的查询、存取款、修改密码等操作
2018/09/02 Python
详解Python匿名函数(lambda函数)
2019/04/19 Python
基于HTML5 Canvas 实现弹出框效果
2017/06/05 HTML / CSS
Reebok俄罗斯官方网上商店:购买锐步运动服装和鞋子
2016/09/26 全球购物
制作部班长职位说明书
2014/02/26 职场文书
幼儿园教师岗位职责
2014/03/17 职场文书
团日活动总结范文
2014/04/25 职场文书
护士求职信范文
2014/05/24 职场文书
预备党员个人总结
2015/02/14 职场文书
小学生手册家长意见
2015/06/03 职场文书
忠诚与背叛观后感
2015/06/04 职场文书
最美乡村教师观后感
2015/06/11 职场文书
Redis 彻底禁用RDB持久化操作
2021/07/09 Redis