Javascript的"预编译"思考
今天工作需要,搜索下JS面试题,看到一个题目,大约是这样的
- <script>
- var x = 1, y = z = 0;
- function add(n) {
- n = n+1;
- }
- y = add(x);
- function add(n) {
- n = n + 3;
- }
- z = add(x);
- </script>
问执行完毕后 x, y, z 的值分别是多少?
仔细看的人马上就知道了, x, y 和 z 分别是 1, undefined 和 undefined。
不过,如果将两个 add 函数修改一下,题目变为
- <script>
- var x = 1, y = z = 0;
- function add(n) {
- return n = n+1;
- }
- y = add(x);
- function add(n) {
- return n = n + 3;
- }
- z = add(x);
- </script>
那么这时 y 和 z 分别是什么呢?我马上想到是 2 和 4,不过结果却是 4 和 4。
这说明,在第一次调用 add 函数之前,第二个 add 函数已经覆盖了第一个 add 函数。原来,这是 JS 解释器的"预编译",JS 解析器在执行语句前会将函数声明和变量定义进行"预编译",而这个"预编译",并非一个页面一个页面地"预编译",而是一段一段地预编译,所谓的段就是一个 <script> 块。且看下面的代码
- <script>
- function add(n) {
- return n = n+1;
- }
- alert(add(1));
- </script>
- <script>
- function add(n) {
- return n = n+3;
- }
- alert(add(1));
- </script>
会分别弹出 2 和 4。
那么,将上面的题目再变换一下,如下
- <script>
- alert(typeof addA);
- addA();
- function addA() {
- alert("A executed!");
- };
- </script>
- <script>
- alert(typeof addB);
- addB();
- var addB = function() {
- alert("B executed!");
- };
- </script>
执行结果是什么呢? 按照前面的知识,第一个 <script> 块执行正常,结果就是弹出 "function" 和 "A executed!" 的对话框。
那么第二个 <script> 块呢? 执行结果是弹出 "undefined" 的对话框后报 JS 错误,说 addB 不是一个 function。
有点出乎意料?呵呵,其实第一个 script 块中的 addA 一句是函数声明,当然进行了"预编译",但是第二个 script 块中的 addB 一句并非函数声明。只不过在执行这段 <script> 之前对变量进行了"预声明",因此一开始变量addB是存在的,只不过是 undefined 的(可参看http://eclipse07.iteye.com/admin/blogs/484566)。因此执行结果便如上面所示。
将题目再变化下,如下
- <script>
- alert(typeof addB);
- addB();
- var addB = function addB() {
- alert("B executed!");
- };
- </script>
执行结果如何呢?
在 ff 下执行,与上面执行结果一样。打住,且在 IE6 下执行看看如何。
结果是弹出 "function" 和 "B executed!",一切正常。
Google 了一下,有人说这是 IE 的 BUG。
那么,请看下面的代码
- <script>
- alert(typeof addB);
- var addB = "variable";
- function addB() {
- alert("function addB");
- }
- alert(addB);
- </script>
执行结果是"function"和"variable"。
JS解析器先预定义了 addB 变量为 undefined, 但是 addB 函数覆盖了此变量,因此一开始执行结果是 function,然后 addB 被赋值为 "variable",因此最后执行结果是 "variable",上面的代码即使变为
- <script>
- alert(typeof addB);
- function addB() {
- alert("function addB");
- }
- var addB = "variable";
- alert(addB);
- </script>
结果也一样,这说明JS解析器先预声明变量,再预定义函数。
小结一下:JS 在执行前会进行类似"预编译"的操作,而且先预定义变量再预定义函数。
Javascript的"预编译"思考的更多相关文章
- 一步一步的理解javascript的预编译
首先,我们要知道javascript是单线程.解释性语言.所谓解释性语言,就是翻译一句执行一句.而不是通篇编译成一个文件再去执行. 其实这么说还没有这么直观,读一句执行一句那是到最后的事了.到JS执行 ...
- javascript的预编译和执行顺序
原文:javascript的预编译和执行顺序 最近在复习javascript的事件处理时发现了一个问题,然后也是我来写javascript的预编译和执行顺序的问题 代码: 代码一<html> ...
- JavaScript的预编译和执行
JavaScript引擎,不是逐条解释执行javascript代码,而是按照代码块一段段解释执行.所谓代码块就是使用<script>标签分隔的代码段. 整个代码块共有两个阶段,预编译阶段和 ...
- 还原真实,javascript之预编译 / 预解析
今天在群里吹水时,有群友提出一个问题.我一看很简单,就立马给出了答案:因为存在变量提升,所以输出undefined.本以为无人反驳,可确招来口诛笔伐.作为写实派的我,一贯以来坚持真实是我的使命,岂能容 ...
- JavaScript 之 预编译 作用域,作用域链
第一次写博客,本来是学习jQuery遇到闭包问题,发现并没有理解闭包,发现闭包牵扯的知识点太多.复习了一遍(发现自己该记住的全忘了)写在博客里,自己也是小白,希望大神们指点迷津,必将感激不尽. 我们知 ...
- JavaScript之预编译
javascript是一种解释性弱类型语言,在浏览器中执行时,浏览器会先预览某段代码进行语法分析,检查语法的正确与否,然后再进行预编译,到最后才会从上往下一句一句开始执行这段代码,简单得来说可以表示为 ...
- JavaScript函数——预编译
四部曲 创建AO对象 找形参和变量声明,将变量和形参名作为AO属性名,值为undefined. 将实参值和形参值统一 在函数体内找函数声明,值赋予函数体. 权重按顺序依次增加.以下例子即可体现上述规则 ...
- javascript预编译和执行过程总结
javascript相对于其它语言来说是一种弱类型的语言,在其它如java语言中,程序的执行需要有编译的阶段,而在javascript中也有类似的“预编译阶段”(javascript的预编译是以代码块 ...
- javaScript 预编译过程浅尝
javaScript 预编译过程 1.创建AO对象(Activation Object) AO{ a: } 2.找形参和变量声明,将变量和形参作为AO属性名,值为undefined AO{ a:und ...
随机推荐
- JAVA排序--[选择排序]
package com.array; public class Sort_Select { /** * 项目名称:选择排序 ; * 项目要求:用JAVA对数组进行排序,并运用选择排序算法; * 作者: ...
- 数据词典与ABAP类型映射
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
- CGAffineTransform与CATransform3D
CGAffineTransform 1.CG的前缀告诉我们,CGAffineTransform类型属于Core Graphics框架,Core Graphics实际上是一个严格意义上的2D绘图API, ...
- Windows Internals学习笔记(三)Procdump的使用
参考资料: 1. 下载地址 2. 使用示例
- 四十条测试你是不是合格的PHP程序员
四十条测试你是否合格的PHP程序员,不官方,也不权威,但很给力.超过三条就不合格了.超过五条就得好好反省下自己的不足了. 1. 不会利用如phpDoc这样的工具来恰当地注释你的代码 2. 对优秀的集成 ...
- 动态CSS--less
忙了很久终于有时间来写点东西了,不知道大家有没有发现,我们在写CSS的时候总是在重复很多代码,一个相同的属性值往往要重复N次,以前我就经常想有没有什么办法能让我们不用一直重复的font-size啊co ...
- iOS - Swift NSDate 时间
前言 NSDate public class NSDate : NSObject, NSCopying, NSSecureCoding NSDate 用来表示公历的 GMT 时间(格林威治时间).是独 ...
- 使用Memory Analyzer tool(MAT)分析内存泄漏
前言的前言 写blog就是好,在大前提下可以想说什么写什么,不像投稿那么字字斟酌.上周末回了趟成都办事,所以本文来迟了.K117从达州经由达成线往成都方向走的时候,发现铁路边有条河,尽管我现在也不知道 ...
- poj1971Parallelogram Counting
链接 越来越感觉到了数学的重要性!.. 这题本来用以斜率和长度为key值进行hash不过感觉很麻烦还TLE了.. 最后知道中点一样的话就可以组成平行四边形,初中数学就可以了.. #include &l ...
- Traffic Sign Recognition with Multi-Scale Convolutional Networks
总结一下文中几点值得学习的地方: 1,卷积神经网络的结构图:Multi-Scale Features. 因为它提取的特征的分层的,对吧,虽然最后 一层可以提供全局信息,但是呢,前面的几层可以提供更 ...