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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,847评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,208评论 1 292
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,587评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,942评论 0 205
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,332评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,587评论 1 218
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,853评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,568评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,273评论 1 242
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,542评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,033评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,373评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,031评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,073评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,830评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,628评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,537评论 2 269

推荐阅读更多精彩内容

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