Javascript的"预编译"思考

看到一个JS面试题，大约是这样的

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 函数修改一下，题目变为

Js代码


<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>
块。且看下面的代码

Js代码


<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。