js 程序执行与顺序实现详解
函数的声明和调用
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);
相关推荐
-
解读IE和firefox下JScript和HREF的执行顺序
很久都没有写关于代码方面的文章了.主要原因还是因为最近的工作都集中在需求分析方面,没有了现实中的感触,就没有了写作的动机.讨论一个关于JScript执行顺序的问题.示例代码如下: a.htm <A onmouseup="func('onmouseup')" href="b.htm">Click Me!</A> <A onclick="func2('onclick')" href="d.htm"&g
-
页面中js执行顺序
下面是测试的代码: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <head runat="server"> <title>测试js的执行顺序</title> <script language="javascript" type="text/javascri
-
JavaScript 全面解析各种浏览器网页中的JS 执行顺序
我们知道javaScript是一种解释型语言,他的执行是自上而下,但是各个浏览器对于至上而下的理解是有细微差别的,而代码的上下游也就是程序流又对于程序正确至关重要,所以我觉得有必要深入理解多个js块儿的执行顺序. 首先得知道有多少方法能把javaScript加入到页面中呢?常见下述的前2种,其实还有更多. 1.页面中直接引入外部js文件:<script src="my.js"></script> 2.页面中直接写如js片段<script>alert(
-
Html中JS脚本执行顺序简单举例说明
复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu
-
js 程序执行与顺序实现详解
函数的声明和调用 JavaScript是一种描述型脚本语言,由浏览器进行动态的解析与执行.函数的定义方式大体有以下两种,浏览器对于不同的方式有不同的解析顺序. 代码如下: 复制代码 代码如下: //"定义式"函数定义 function Fn1(){ alert("Hello World!"); } //"赋值式"函数定义 var Fn2 = function(){ alert("Hello wild!"); } 页面加载过程中
-
Spring AOP执行先后顺序实例详解
这篇文章主要介绍了Spring AOP执行先后顺序实例详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 众所周知,spring声明式事务是基于AOP实现的,那么,如果我们在同一个方法自定义多个AOP,我们如何指定他们的执行顺序呢? 网上很多答案都是指定order,order越小越是最先执行,这种也不能算是错,但有些片面. 配置AOP执行顺序的三种方式: 通过实现org.springframework.core.Ordered接口 @Compo
-
JS异步的执行原理和回调详解
一.JS异步的执行原理 我们知道JavaScript是单线程的,而浏览器是多线程的.单线程执行任务需要一个个排队进行,假如一个任务需要很长时间执行(像ajax需要较长时间),会直接导致无响应,后面的任务一直在等待执行.这时候就需要用到异步. 想了解异步,首先我们要知道浏览器有最基本的三个常驻线程: JS引擎线程,事件触发线程,GUI渲染线程. 其中JS引擎线程和事件触发线程共同构成了一种事件循环机制,而GUI渲染线程与JS引擎是互斥的,当JS引擎执行时GUI线程会被挂起,GUI更新保
-
Django Admin设置应用程序及模型顺序方法详解
Django默认情况下,按字母顺序对模型进行排序.因此,Event应用模型的顺序为Epic.EventHero.EventVillain.Event 假设你希望顺序是 EventHero.EventVillain.Epic.Event. 用于呈现后台indxe页面的模板为admin/index.html,对应的视图函数为 ModelAdmin.index. def index(self, request, extra_context=None): """ Display th
-
DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)
俗话说的好,好记性不如个烂笔头,这么多技术文章如果不去吃透,技术点很快就容易忘掉,下面是小编平时浏览的技术文章,整理的笔记,分享给大家. 开发过程中我们都希望使用别人成熟的框架,因为站在巨人的肩膀上会使得我们开发的效率大幅度提升.不过,我们也应该.必须了解其基本原理.比如DOM事件,jquery框架帮我们为我们封装和抽象了各浏览器的差异行为,为事件处理带来了极大的便利.不过浏览器逐步走向统一和标准化,我们可以更加安全地使用官方规范的接口.因为只有获得众多开发者的芳心,浏览器才会走得更远.正如我们
-
微信小程序引用公共js里的方法的实例详解
微信小程序引用公共js里的方法的实例详解 一个小程序页面由四个文件组成,一个小程序页面的四个文件具有相同路径与文件名,由此我们可知一个小程序页面对应着一个跟页面同名的js文件.可是当有些公共方法,我们想抽离出来成为一个独立公共的js文件.我们该如何实现呢. 在根目录下有一个app.js文件.这个根目录的js 文件我们可以通过getApp()轻松调用. //app.js App({ globaData:'huangenai' }) //test.js var app = getApp(); Pag
-
对java for 循环执行顺序的详解
如下所示: for(表达式1;表达式2;表达式3) { //循环体 } 先执行"表达式1",再进行"表达式2"的判断,判断为真则执行 "循环体",循环体执行完以后执行表达式3. 例如 for(int i=0;i<2;i++){ //TODO } 先执行 int i = 0; 然后 判断 i<2 然后执行函数体 最后执行i++ 然后轮回到判断i<2 int[] arr = new int[3]; int j; arr[0] = 1
-
使用Jacoco获取 Java 程序的代码执行覆盖率的步骤详解
Jacoco是Java Code Coverage的缩写,顾名思义,它是获取Java代码执行覆盖率的一个工具,通常用它来获取单元测试覆盖率.它通过分析Java字节码来得到代码执行覆盖率,因此它还可以分析任何基于JVM的语言(如Croovy.Kotlin)的覆盖率.本文不讨论如何用Jacoco获取单元测试的代码覆盖率,而是从Jacoco的原理出发,介绍如何通过Jacoco获取SIT或者UAT的测试覆盖率.更准确来讲,是获取一个应用执行过的代码占总代码的比率.包括字节码指令覆盖率,分支覆盖率,圈复杂
-
Golang控制协程执行顺序方法详解
目录 循环控制 通道控制 互斥锁 async.Mutex 在 Go 里面的协程执行实际上默认是没有严格的先后顺序的.由于 Go 语言 GPM 模型的设计理念,真正执行实际工作的实际上是 GPM 中的 M(machine) 执行器,而我们的协程任务 G(goroutine) 协程需要被 P(produce) 关联到某个 M 上才能被执行.而每一个 P 都有一个私有队列,除此之外所有的 P 还共用一个公共队列.因此当我们创建了一个协程之后,并不是立即执行,而是进入队列等待被分配,且不同队列之间没有顺
-
C++ 成员变量的初始化顺序问题详解
C++ 成员变量的初始化顺序问题详解 问题来源: 由于面试题中,考官出了一道简单的程序输出结果值的题:如下, class A { private: int n1; int n2; public: A():n2(0),n1(n2+2){} void Print(){ cout << "n1:" << n1 << ", n2: " << n2 <<endl; } }; int main() { A a; a.P