您的位置：首页 > Web前端 > JavaScript

JS预解析的一点认识

2017-12-29 12:02 253 查看
先看一道面试题：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>

alert(a);
var a=1;
alert(a);
function a(){
alert(2)
}
alert(a)
var a=3
alert(a)
function a(){
alert(4)
}
alert(a)
a()

</script>
</body>
</html>
这里不得不提到JS中的解析过程，关于JS有没有预编译这个说法暂且不谈，这里我把它称为“预解析”JavaScript有预编译吗？

JS解析过程如下：

1.页面产生便创建了GO全局对象（Global Object,也就是大家熟悉的window对象）

2.语法分析

3.开始预解析
查找变量声明，作为GO属性，值赋予undefined
查找函数声明，作为GO属性，值赋予函数体

4.解释执行

现在分析一下上述代码的预解析过程：

预解析过程寻找（1）变量声明 var…（2）函数声明 function…

1、var a=1;    预解析为var a = undefined  声明但不定义，此时a为undefined存在内存中
2、function a(){alert(2)}    预解析为a=function a(){alert(2)}  同名的情况下、有名函数的级别大于变量  所以内存中为function a(){alert(2)}
3、var a=3    同上情况、内存不变
4、function a(){alert(4)}    预解析为a=function a(){alert(4)}  层叠上一个函数，内存中为function a(){alert(4)}
预解析结束，开始逐行解析并执行：
1、alert(a);   弹出function a(){alert(4)}
2、var a=1;    表达式（= + - * / ++  --），更改预解析后的值，a=1
3、alert(a);   弹出1
4、function a(){alert(2)};   什么都没发生
5、alert(a);   弹出1
6、var a=3;    更改预解析后的值，a=3
7、alert(a);   弹出3
8、function a(){alert(4)};   什么都没发生
9、alert(a);   弹出3
10、a();       此时a=3、不是函数，控制台报错：a is not a function...
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  前端小白望指教
相关文章推荐
新的分享
章节导航