javascript 预编译
2013-12-20 16:06
393 查看
今天工作需要,搜索下JS面试题,看到一个题目,大约是这样的
问执行完毕后 x, y, z 的值分别是多少?
仔细看的人马上就知道了, x, y 和 z 分别是 1, undefined 和 undefined。
不过,如果将两个 add 函数修改一下,题目变为
那么这时 y 和 z 分别是什么呢?我马上想到是 2 和 4,不过结果却是 4 和 4。
这说明,在第一次调用 add 函数之前,第二个 add 函数已经覆盖了第一个 add 函数。原来,这是 JS 解释器的"预编译",JS 解析器在执行语句前会将函数声明和变量定义进行"预编译",而这个"预编译",并非一个页面一个页面地"预编译",而是一段一段地预编译,所谓的段就是一个 <script> 块。且看下面的代码
会分别弹出 2 和 4。
那么,将上面的题目再变换一下,如下
执行结果是什么呢? 按照前面的知识,第一个 <script> 块执行正常,结果就是弹出 "function" 和 "A executed!" 的对话框。
那么第二个 <script> 块呢? 执行结果是弹出 "undefined" 的对话框后报 JS 错误,说 addB 不是一个 function。
有点出乎意料?呵呵,其实第一个 script 块中的 addA 一句是函数声明,当然进行了"预编译",但是第二个 script 块中的 addB 一句并非函数声明。只不过在执行这段 <script> 之前对变量进行了"预声明",因此一开始变量addB是存在的,只不过是 undefined 的(可参看http://eclipse07.iteye.com/admin/blogs/484566)。因此执行结果便如上面所示。
将题目再变化下,如下
执行结果如何呢?
在 ff 下执行,与上面执行结果一样。打住,且在 IE6 下执行看看如何。
结果是弹出 "function" 和 "B executed!",一切正常。
Google 了一下,有人说这是 IE 的 BUG。
那么,请看下面的代码
执行结果是"function"和"variable"。
JS解析器先预定义了 addB 变量为 undefined, 但是 addB 函数覆盖了此变量,因此一开始执行结果是 function,然后 addB 被赋值为 "variable",因此最后执行结果是 "variable",上面的代码即使变为
结果也一样,这说明JS解析器先预声明变量,再预定义函数。
小结一下:JS 在执行前会进行类似"预编译"的操作,而且先预定义变量再预定义函数。
转自:http://eclipse07.iteye.com/blog/501169
<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 在执行前会进行类似"预编译"的操作,而且先预定义变量再预定义函数。
转自:http://eclipse07.iteye.com/blog/501169
相关文章推荐
- javaScript语言的预编译与运行
- javascript中使用var定义变量的预编译效果
- javascript预编译+例题分析
- javascript的预编译和执行顺序
- javascript的预编译和执行顺序
- javascript的预编译
- Javascript 果然存在所谓的预编译,例证:
- JavaScript 详解预编译原理
- javascript的预编译和执行顺序
- javascript 预编译 作用域
- JavaScript-深入理解JavaScript(一、预编译和执行过程)
- JavaScript 预编译(变量提升和函数提升的原理)
- Javascript的"预编译"思考
- 注意javascript引擎变量提升,可以说预编译
- JavaScript的预编译及执行顺序
- Javascript的预编译和执行顺序
- JavaScript运行过程中的“预编译阶段”和“执行阶段”
- JavaScript面试之预编译与执行
- JavaScript运行过程中的“预编译阶段”和“执行阶段”
- javascript之预编译