Javascript的"预编译"思考
ref:http://eclipse07.iteye.com/blog/501169
今天工作需要,搜索下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 type="text/JavaScript"> //第一段JavaScript代码
- alert(typeof addA);
- addA();
- function addA() {
- alert("A executed!");
- };
- </script>
- <script language="JavaScript"> //第二段JavaScript代码
- alert(typeof addB); //undefined,说明addB是声明了的,但是没附初值
- addB(); //如果在这调用函数addB() 会报错
- var addB = function() {
- alert("B executed!");
- };
- addB();//B executed! 如果在此位置调用函数addB(),则不会报错
- </script>
解释 第二段JavaScript代码
<script language="JavaScript">
alert(typeof(a)); //undefined
var a=5;
</script>
在执行第二段JavaScript代码的时候 ,首先会对这段代码进行预编译,然后再执行,"var addB = function() { }" 实际上就是 对一个变量addB的"预编译", 对一个变量的预编译的时候,并没有对该变量进行初始化(在执行该语句的时候才对变量进行初始化)。在执行"alert(typeof addB)"的时候,由于还没有对变量addB附初值,所以是undefined
在预编译的时候把addB当成一个变量,在执行的时候把addB当成一个函数
执行结果是什么呢? 按照前面的知识,第一个 <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 在执行前会进行类似"预编译"的操作,而且先预定义变量再预定义函数。