今天工作需要,搜索下JS面试题,看到一个题目,大约是这样的

  1. <script>
  2. var x = 1, y = z = 0;
  3. function add(n) {
  4. n = n+1;
  5.   }
  6. y = add(x);
  7. function add(n) {
  8. n = n + 3;
  9. }
  10. z = add(x);
  11. </script>

问执行完毕后 x, y, z 的值分别是多少?

仔细看的人马上就知道了, x, y 和 z 分别是 1, undefined 和 undefined。

不过,如果将两个 add 函数修改一下,题目变为

  1. <script>
  2. var x = 1, y = z = 0;
  3. function add(n) {
  4. return n = n+1;
  5.   }
  6. y = add(x);
  7. function add(n) {
  8. return n = n + 3;
  9. }
  10. z = add(x);
  11. </script>

那么这时 y 和 z 分别是什么呢?我马上想到是 2 和 4,不过结果却是 4 和 4。 
这说明,在第一次调用 add 函数之前,第二个 add 函数已经覆盖了第一个 add 函数。原来,这是 JS 解释器的"预编译",JS 解析器在执行语句前会将函数声明和变量定义进行"预编译",而这个"预编译",并非一个页面一个页面地"预编译",而是一段一段地预编译,所谓的段就是一个 <script> 块。且看下面的代码

  1. <script>
  2. function add(n) {
  3. return n = n+1;
  4.   }
  5. alert(add(1));
  6. </script>
  7. <script>
  8. function add(n) {
  9. return n = n+3;
  10.   }
  11. alert(add(1));
  12. </script>

会分别弹出 2 和 4。

那么,将上面的题目再变换一下,如下

  1. <script>
  2. alert(typeof addA);
  3. addA();
  4. function addA() {
  5. alert("A executed!");
  6. };
  7. </script>
  8. <script>
  9. alert(typeof addB);
  10. addB();
  11. var addB = function() {
  12. alert("B executed!");
  13. };
  14. </script>

执行结果是什么呢? 按照前面的知识,第一个 <script> 块执行正常,结果就是弹出 "function" 和 "A executed!" 的对话框。 
那么第二个 <script> 块呢? 执行结果是弹出 "undefined" 的对话框后报 JS 错误,说 addB 不是一个 function。 
有点出乎意料?呵呵,其实第一个 script 块中的 addA 一句是函数声明,当然进行了"预编译",但是第二个 script 块中的 addB 一句并非函数声明。只不过在执行这段 <script> 之前对变量进行了"预声明",因此一开始变量addB是存在的,只不过是 undefined 的(可参看http://eclipse07.iteye.com/admin/blogs/484566)。因此执行结果便如上面所示。

将题目再变化下,如下

  1. <script>
  2. alert(typeof addB);
  3. addB();
  4. var addB = function addB() {
  5. alert("B executed!");
  6. };
  7. </script>

执行结果如何呢? 
在 ff 下执行,与上面执行结果一样。打住,且在 IE6 下执行看看如何。 
结果是弹出 "function" 和 "B executed!",一切正常。 
Google 了一下,有人说这是 IE 的 BUG。

那么,请看下面的代码

  1. <script>
  2. alert(typeof addB);
  3. var addB = "variable";
  4. function addB() {
  5. alert("function addB");
  6. }
  7. alert(addB);
  8. </script>

执行结果是"function"和"variable"。 
JS解析器先预定义了 addB 变量为 undefined, 但是 addB 函数覆盖了此变量,因此一开始执行结果是 function,然后 addB 被赋值为 "variable",因此最后执行结果是 "variable",上面的代码即使变为

  1. <script>
  2. alert(typeof addB);
  3. function addB() {
  4. alert("function addB");
  5. }
  6. var addB = "variable";
  7. alert(addB);
  8. </script>

结果也一样,这说明JS解析器先预声明变量,再预定义函数。

小结一下:JS 在执行前会进行类似"预编译"的操作,而且先预定义变量再预定义函数。

Javascript的"预编译"思考的更多相关文章

  1. 一步一步的理解javascript的预编译

    首先,我们要知道javascript是单线程.解释性语言.所谓解释性语言,就是翻译一句执行一句.而不是通篇编译成一个文件再去执行. 其实这么说还没有这么直观,读一句执行一句那是到最后的事了.到JS执行 ...

  2. javascript的预编译和执行顺序

    原文:javascript的预编译和执行顺序 最近在复习javascript的事件处理时发现了一个问题,然后也是我来写javascript的预编译和执行顺序的问题 代码: 代码一<html> ...

  3. JavaScript的预编译和执行

    JavaScript引擎,不是逐条解释执行javascript代码,而是按照代码块一段段解释执行.所谓代码块就是使用<script>标签分隔的代码段. 整个代码块共有两个阶段,预编译阶段和 ...

  4. 还原真实,javascript之预编译 / 预解析

    今天在群里吹水时,有群友提出一个问题.我一看很简单,就立马给出了答案:因为存在变量提升,所以输出undefined.本以为无人反驳,可确招来口诛笔伐.作为写实派的我,一贯以来坚持真实是我的使命,岂能容 ...

  5. JavaScript 之 预编译 作用域,作用域链

    第一次写博客,本来是学习jQuery遇到闭包问题,发现并没有理解闭包,发现闭包牵扯的知识点太多.复习了一遍(发现自己该记住的全忘了)写在博客里,自己也是小白,希望大神们指点迷津,必将感激不尽. 我们知 ...

  6. JavaScript之预编译

    javascript是一种解释性弱类型语言,在浏览器中执行时,浏览器会先预览某段代码进行语法分析,检查语法的正确与否,然后再进行预编译,到最后才会从上往下一句一句开始执行这段代码,简单得来说可以表示为 ...

  7. JavaScript函数——预编译

    四部曲 创建AO对象 找形参和变量声明,将变量和形参名作为AO属性名,值为undefined. 将实参值和形参值统一 在函数体内找函数声明,值赋予函数体. 权重按顺序依次增加.以下例子即可体现上述规则 ...

  8. javascript预编译和执行过程总结

    javascript相对于其它语言来说是一种弱类型的语言,在其它如java语言中,程序的执行需要有编译的阶段,而在javascript中也有类似的“预编译阶段”(javascript的预编译是以代码块 ...

  9. javaScript 预编译过程浅尝

    javaScript 预编译过程 1.创建AO对象(Activation Object) AO{ a: } 2.找形参和变量声明,将变量和形参作为AO属性名,值为undefined AO{ a:und ...

随机推荐

  1. System.MissingMethodException: 找不到方法:

    This is a problem which can occur when there is an old version of a DLL still lingering somewhere ar ...

  2. BP神经网络求解异或问题(Python实现)

    反向传播算法(Back Propagation)分二步进行,即正向传播和反向传播.这两个过程简述如下: 1.正向传播 输入的样本从输入层经过隐单元一层一层进行处理,传向输出层:在逐层处理的过程中.在输 ...

  3. Date Picker Calendar For Oracle Forms 6i

    Giving date picker calendar option to user for date type fields in Oracle Forms. I am providing you ...

  4. [HDOJ1231]最大连续子序列

    混了好几个地方的博客,还是觉得博客园比较靠谱,于是决定在这里安家落户了.本人本科生一个,希望各位巨巨多多指教~ Hello World! 单独一个象征性的问候实在是太low了,还是决定来点实质性的.. ...

  5. [SAP ABAP开发技术总结]采购、销售、生产简单业务流程

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  6. onclick事件分析

     有些时候,我们想实现这样的一种效果:      <a href="imgs/2.jpg" title="A fireworks display" onc ...

  7. Codeforces Round #377 (Div. 2) D. Exams 二分

    D. Exams time limit per test 1 second memory limit per test 256 megabytes input standard input outpu ...

  8. android的简单入门学习

    话说光配环境就整死我了, 不是说多么难, 是最近google被屏了, 很多sdk里面需要下载的东西都下不下来, 坑爹啊.  最后跟扫拉稀要了一个他配置好的,才运行了. android目录分析: ass ...

  9. iOS - UIAlertView

    前言 NS_CLASS_DEPRECATED_IOS(2_0, 9_0, "UIAlertView is deprecated. Use UIAlertController with a p ...

  10. js 立即执行函数,() .则前面的function 是表达式,不能是函数申明

    fnName(); function fnName(){     ... }//正常,因为‘提升’了函数声明,函数调用可在函数声明之前 fnName(); var fnName=function(){ ...