JS之预解析

javascript 的预解析:(个人理解)代码在执行之前 会在相应的执行环境中预先把 一些东西解析到内存
**一. 那究竟预先解析哪些东西那??答:预先解析 function 和 var
**二. 还有就是预解析的顺序是怎们样的?

1首先是找到<script></script>标签按照<script>块依次解析
2 解析执行环境(这个有点难理解,在下面有具体解释)
3 对标识符( var function)进行解析 (http://blog.csdn.net/u014205965/article/details/45620607#) copy

<script>
test(); // This is test
function test()
{
alert('This is test');
}
</script>

以上案例,在function test()之前就调用了test()函数照样可以弹出 This is test
可见在js执行之前就预先把function test解析到了内存,所以调用test() 照常弹出结果;
接下来看看变量的预解析:

[javascript] view plain copy

<script>
alert(test);//undefined
var test="this is test";
alert(test);//this is test
</script>

在var test=“test”,之前就调用alert弹出test,而没有 报test未定义的错误,而是弹出了undefined,可见在js执行之前就预先把var test;解析到内存,所以不会报错,为什么会弹出undefined是因为,只是把var test的定义预先解析到内存,并没有给变量赋值;

[javascript] view plain copy

var test="this is test";

当我们执行完这句话的时候,就完成了赋值,所以再次调用alert就弹出this is test

接下来继续看:变量和函数重名的时候会是什么情况?

[javascript] view plain copy

<script>
alert(test); //function(){ return " this is function"}
var test="this is test";
function test(){
return "this is function";
}
alert(test); // this is test
alert(test()); // this is function
</script>

这段代码证明了,当函数名和变量名一样的时候,alert(test);调用的是函数function test() 的指针,而不是调用的变量var test; 所以function的预解析 优先级 高于var(个人觉得)

接下来说说“ 解析执行环境 ”是什么意思??看下面的例子

[javascript] view plain copy

<script>
function test(){
var msg ='This is test';
}
alert(msg); // 报错msg未定义
</script>


可能有人会有疑问了,按照上面说的js不是会预解析function 和 var msg吗,我在function 里面定义了var msg ,那为什么调用回报错那???
答案就和我们上面提到的 “解析执行环境” 有关系,在js执行之前是会预解析function 和var 没错,但是在本例中 他们“解析执行环境”不同.
Function test是在一个全局的环境中,而msg是function test中定义的一个局部变量,msg的“解析执行环境”是在function test这个函数里面(这里可以理解为function test里的局部环境),所以当我们在全局这个环境中alert(msg),的时候,并没有定义msg这个变量或者函数,所以就报错了;
为了进一步理解,把上面的例子加以修改

[javascript] view plain copy

<script>
alert(msg); // undefined
function test()
{
alert(msg2);//undefined
var msg2 ='This is test';
}
var msg = "123";
test();
</script>

这个例子,js在执行之前预解析,解析全局的环境,解析到function test 和 var msg ;所以alert(msg);会弹出undefined;
然后当程序执行到test(); 的时候会进入function test里面去,也就是进入function test 的局部环境去 预解析,这时候解析到 var msg2,所以也弹出了undefined;

为了理解的更清楚,可以用IE的F12打个断点看一下


程序开始预解析的时候,实在Global这个全局的执行环境中,解析到了function test 和msg

当我们执行test()的时候,就会进入function test里面这个局部执行环境去解析了


上图可以看到黄色的箭头 有原来的Global 执行环境,变成了test则个局部执行环境了,然后再function test这个局部执行环境中预解析,此时就解析到了 var msg2 这个变量


到这应该可以理解“解析执行环境”这句话了吧,如果还不明白自己动手搞了例子,打个断点debug一下下面这段代码,应该就清楚了!

[javascript] view plain copy

<script>
var a = "我是全局的a";
var b = " 我是全部的b";
function fun1(){
var a = "我是局部的a";
alert(a);
function fun2(){
alert(a);
alert(b);
}
func2();
}
fun1();
</script>

最后说明一下“1首先是找到<script></script>标签按照<script>块依次解析” 这句话是什么意思那?
我们的代码中可能会有多个<script>...</script>标签,每一个<script>...</script>标签我们认为是一个<script>块;js的预解析式按照<script>块来进行的;也就是说js预解析不会跨<script>块去进行预解析,什么意思那?看下面代码

[javascript] view plain copy

<script>
alert(msg);
//test();
</script>
<script>
var msg ="test";
/* function test(){
alert("this is function");
}*/
</script>

这里有两个script块,他们是按照顺序进行预解析的,我们在第二个script块中定义的var msg,而在第一个script块中alert(msg)
显然在第一个script快中并没有预解析到一个叫msg的变量或者函数,而js又不会跨到第二个script块去解析,所以就报错msg未定义



函数function test 也一样


如果把两个script块调换一下位置,结果就不一样了

[javascript] view plain copy

<script>
var msg ="test";
function test(){
alert("this is function");
}
</script>
<script>
alert(msg); // test
test(); // this is function
</script>

script块顺序进行预解析,当第一个script块预解析完,会解析到var msg 和function test,
当再第二个script块中调用alert(msg);和test();时上面的js程序已经执行完毕了,自然会弹出 test 和this is function

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 7,842评论 2 17
  • 第一章: JS简介 从当初简单的语言,变成了现在能够处理复杂计算和交互,拥有闭包、匿名函数, 甚至元编程等...
    LaBaby_阅读 1,703评论 0 6
  • JavaScript是解释性语言,运行的时候动态解析执行 JavaScript加载编译的时候,是以 遵守docum...
    _未名阅读 341评论 0 1
  • 单例模式 适用场景:可能会在场景中使用到对象,但只有一个实例,加载时并不主动创建,需要时才创建 最常见的单例模式,...
    Obeing阅读 2,103评论 1 10
  • 这是潘蓝一写的第16篇潘宝贝原创文章 微信:beibaopan 微信公众号:...
    潘蓝一阅读 554评论 0 0