JavaScript的执行
下面内容参考:http://blog.csdn.net/cxiaokai/article/details/7552653
http://www.jb51.net/article/36755.htm
首先,对于一个html文档,浏览器是按着从上到下逐步解析页面结构和信息的。JavaScript代码作为嵌入的脚本应该也算做HTML文档的组成部分,所以JavaScript代码在装载时的执行顺序也是根据脚本标签<script>的出现顺序来确定的。 而且,不管是在html里面的脚本,还是通过<script src="">这样的引用外面的js文件的脚本,都是按照其原来的顺序来加载的。 不会因为是外部JavaScript文件而延期执行!!
js一个重要的部分就是函数,函数的定义方式大致有两种:
//“定义式”函数定义
function Fn1(){
alert("Hello World!");
}
//“赋值式”函数定义
var Fn2 = function(){
alert("Hello wild!");
}
而对于一个js脚本,它的执行其实是分为两个步骤的,先是“预编译”,再是“执行期”.
在预编译的过程中,会把定义式的函数优先执行,也会把所有var变量创建,默认值为undefined,以提高程序的执行效率。
页面加载过程中,浏览器会对页面上或载入的每个js代码块(或文件)进行扫描,如果遇到定义式函数,则进行预处理(类似于C等的编译),处理完成之后再开始由上至下执行;遇到赋值式函数,则只是将函数赋给一个变量,不进行预处理(类似1中变量必须先定义后引用的原则),待调用到的时候才进行处理。(注意:变量的赋值是在解释执行阶段完成的,如果在这之前使用变量,它的值会是undefined)
//“定义式”函数定义
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未定义。
这是因为,上面示例中定义的函数仅作为值赋值给变量Fn2,所以在预编译期,JavaScript解释器只能够为声明变量f进行处理,而对于变量f的值,只能等到执行期时按顺序进行赋值,自然就会出现语法错误,提示找不到对象f。
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,两个块换过来就对了
虽然说,JavaScript是按块执行的,但是不同块都属于同一个全局作用域,也就是说,块之间的变量和函数是可以共享的。
4. 重复定义函数会覆盖前面的定义
这和变量的重复定义是一样的,代码:
代码如下:
function fn(){
alert(1);
}
function fn(){
alert(2);
}
fn();
// 弹出:“2”
如果是这样呢:
代码如下:
fn();
function fn(){
alert(1);
}
function fn(){
alert(2);
}
// 还是弹出:“2”
还是弹出“2”,为什么?2都讲了好吧…
JavaScript的执行的更多相关文章
- javaScript代码执行顺序
javaScript是一种描述型脚本语言,由浏览器进行动态的解析和执行. 页面加载过程中,浏览器会对页面上载入的每个js代码块进行扫描. JavaScript是一段一段的分析执行的,在分析执行同一段代 ...
- javascript立即执行函数
javascript和其他编程语言相比比较随意,所以javascript代码中充满各种奇葩的写法,有时雾里看花;当然,能理解各型各色的写法也是对javascript语言特性更进一步的深入理解. ( ...
- JavaScript 立即执行函数
js中(function(){…})()立即执行函数写法理解 javascript和其他编程语言相比比较随意,所以javascript代码中充满各种奇葩的写法,有时雾里看花,当然,能理解各型各色的写法 ...
- 深入理解javascript中执行环境(作用域)与作用域链
深入理解javascript中执行环境(作用域)与作用域链 相信很多初学者对与javascript中的执行环境与作用域链不能很好的理解,这里,我会按照自己的理解同大家一起分享. 一般情况下,我们把执行 ...
- javascript立即执行函数 (function(){})()
看到一段代码: (function(){ var outer = $('#subject'); outer.find('li').on('mouseover', mouseover); })() ( ...
- JavaScript的执行上下文
在JavaScript的运行过程中,经常会遇到一些"奇怪"的行为,不理解为什么JavaScript会这么工作. 这时候可能就需要了解一下JavaScript执行过程中的相关内容了. ...
- javascript的执行顺序(转载)
之前从JavaScript引擎的解析机制来探索JavaScript的工作原理,下面我们以更形象的示例来说明JavaScript代码在页面中的执行顺序.如果说,JavaScript引擎的工作机制比较深奥 ...
- 深入理解JavaScript系列+ 深入理解javascript之执行上下文
http://www.cnblogs.com/TomXu/archive/2011/12/15/2288411.html http://blog.csdn.net/hi_kevin/article/d ...
- Javascript自执行匿名函数(function() { })()的原理浅析
匿名函数就是没有函数名的函数.这篇文章主要介绍了Javascript自执行匿名函数(function() { })()的原理浅析的相关资料,需要的朋友可以参考下 函数是JavaScript中最灵活的一 ...
- 从头开始学JavaScript (九)——执行环境和作用域
原文:从头开始学JavaScript (九)--执行环境和作用域 一.执行环境:定义了变量或者函数有权访问的其他数据,决定了它们各自的行为.每个执行环境都有与之关联的变量对象. 变量对象:保存着环境中 ...
随机推荐
- MySQL多实例配置(一)
MySQL数据库的集中化运维,能够通过在一台MySQL数据库服务器上,部署多个MySQL实例.该功能是通过mysqld_multi来实现.mysqld_multi用于管理多个mysqld的服务进程,这 ...
- linux远程管理工具:putty
使用QTP测试文件上传和目录做成是否成功,必须先将文件和目录下载到本地,再作比较.现在下载工具众多,其中putty是最出色的一个,支持linux服务器,这点很重要“免费的”.下面就让我们来看一下吧! ...
- ASP.NET没有魔法——ASP.NET MVC Razor与View渲染 ASP.NET没有魔法——ASP.NET MVC界面美化及使用Bundle完成静态资源管理
ASP.NET没有魔法——ASP.NET MVC Razor与View渲染 对于Web应用来说,它的界面是由浏览器根据HTML代码及其引用的相关资源进行渲染后展示给用户的结果,换句话说Web应用的 ...
- 使用python在极坐标中生成一条直线
在测试雷达时,往往需要测试雷达的数据是否准确,这时就需要在雷达图中显示一条标准的直线作为对比. "create a wall" import numpy as np import ...
- lmhostid获取hostid为空问题
lmhostid获取hostid为空问题 问题描写叙述 今天迁移曾经的一个装有flexlm的虚拟机,结果发如今迁移后启动时报错 ... Wrong hostid on SERVER line for ...
- enterText与typeText
转自:http://www.cnblogs.com/hyddd/p/4126979.html 问题场景: Robotium.enterText输入数据后,点击"发送"按钮,多数情况 ...
- 【iOS系列】-UITableViewCell的展开与收缩的实现思路
UITableViewCell的展开与收缩的实现思路 现在项目中很多地方都会用到,所以我这里介绍一种可以复用的思路,这与文章后面的Swift的实现思路不同,具体大家可自行对比. Demo项目地址 开始 ...
- Java小白手记2:一些名词解释
看到<Java 征途:行者的地图> ,这是一篇有关java学习路径文章.对我等Java小白有指引作用.里面提到了一些基本的名词术语,有些我知道,有些不知道,再补上一些自己曾觉得模糊的,记录 ...
- iOS开发——高级篇——FMDB 数据库简单使用
#import <Foundation/Foundation.h> @interface UserDB : NSObject // 把userDB设计成一个单例类 + (id)shareI ...
- PS人物脸部去高光简单之法
案例素材图: 方法原理步骤:得到高光面的选区,然后吸取高光面附近的颜色填充上去,这样就达到了去高光的效果. 得到高光选区的方法有很多种,要提取这种选区,通过阿尔法通道是最合适不过的了,本案例就通过阿尔 ...