有段时间没有更新了,思绪一下子有点转不过来。正应了一句古话“一天不读书,无人看得出;一周不读书,开始会爆粗;一月不读书,智商输给猪。”。再加上周五晚上看了下很久没看的湖南综艺节目《天天向上》关于出版书及读书的相关内容,看到相当多的嘉宾家里的书房让我惊叹也伴随着一种文人的向往。我虽然小的时候不太爱看书,但是随着自己一点点的长大,也不知道什么时候开始也有买书藏书看书的情节,而且正如郁钧剑老师所说的藏书有点会上瘾,即使有些书不是马上就会看。挺希望以后不工作了,有自己的一间书屋,一方书桌,一把椅子,一壶茶水,悠然自得的读书练习书法。
话题有点跑题了,切换模式回到这篇博客上来。在一次小组同事间分享的时候,有位同事给出了这样一个代码:
if (true) { function fn() { alert(‘为 true 时执行我!‘); } } else { function fn() { alert(‘为 false 时执行我!‘); } } fn()
大家可以看下,这段代码执行的结果到底是什么?开启你智慧的大脑吧!
好吧,下面是各主流浏览器的执行结果:
- 最爱的chrome:// 为 false 时执行我!
- 不用很久的firefox // 为 true 时执行我!
- IE7/8/9 // 为 false 时执行我!
哦,这是why?其实当我那同事问我们的时候,我的第一直觉就是 “为 true 时执行我!”。 后来,我想了想这个情况是不是浏览器在解析javascript的语法分析的时候有区别。
下面是我当时的猜想,大家不要当作是解释以上代码的理由:
1.chrome和IE在解析上述代码的时候语法作用域解析的变量与函数声明提升。大概是这样的意思:
function fn() { alert(‘为 true 时执行我!‘); } function fn() { alert(‘为 false 时执行我!‘); } if (true) { function fn() { alert(‘为 true 时执行我!‘); } } else { function fn() { alert(‘为 false 时执行我!‘); } } fn()
所以后面的函数覆盖前面的函数,所以才会是这样的结果。
firefox的解析可能不太一样,在处理语法作用域的时候,当函数声明的时候在if语句中是按顺序执行。
哈哈,以上也是自己的猜想,没有去研究浏览器之间的源码,能力有限,今日记下,日后有能 力再补上。也欢迎各路高手留言指点迷津。
分割,在我那个同事分享后放假就是五一,三天假期像我这样的宅男只能看着别人带着女朋友到处旅游;自个默默的只好宅在家里,三天休息也不是一点没有收获。三天有两天下午到公园跑步跑6圈,不经常跑步,一跑起来真是上气不接下气,但还是坚持跑完了自己定下的6圈,毕竟做程序的没有个好身体怎么行是吧?每晚,看会周爱民写的《javascript语言精髓与编程实践》,刚好看到模块化的层次---语法作用域这一节,就有涉及上述代码的解释。
javascript语法作用域图表:
特殊作用运算符图
在这一节的语法作用域之间的相关性是这样描述的:
结构化语言中,代码块的作用域是相互不相交的。这些作用域之间只存在平行或嵌套两种相关性。
例如:
代码平行:
/** * 示例1:代码一与代码二平行 */ // 代码一 if (true){ // ... } // 代码二 while (true) { // ... }
代码嵌套:
/** * 示例2: 代码一与代码二嵌套 */ // 代码一 if (true){ // ... // 代码二 while (true) { // ... } }
结构化语言是通过代码块这种“互不相交”的特性来保证逻辑上的独立,消除代码块之间的耦合。但是“嵌套”这种相关性中,代码二与代码一的语法作用域存在重叠。这种关系,就是通过前面所说的“语法作用域的级别”来控制。
- 相同级别的语法作用域可以相互嵌套
- 高级别的语法作用域能够包含低级别的语法作用域
- 低级别的语法作用域不包含高级别的语法作用域。由于不存在包含关系,因此语言实现时,一般处理成语法的违例,或者理解为“平行”的关系。
规则一的示例:
/** * 规则1: 相同级别的代码的嵌套 */ function fn1() { function fn2() { function fn3() { // .... } } }
规则二的示例:
/** * 规则2: 高级别代码的嵌套低级别代码 */ function fn1() { if (true) { // ... } }
规则三的示例:
/** * 规则3: 低级别代码的嵌套高级别代码 */ if (true) { function fn1() { // ... } } else { function fn1() { // ... } } // 低级别代码不能包含高级别代码,所以把这种嵌套关系理解成平行关系 if (true) { // .. } else { // ... } function fn1() { // ... } function fn1() { // ... } // 同名函数,后者覆盖前者
至此,大家看到规则三的时候是不是很眼熟啊,的确,看到这示例就很快能理解之前我同事分享那段代码在chrome和IE的执行结果是怎么一回事。
不过遗憾的是,没能解释为什么在firefox的执行原理,正如我前面个人的猜想的那样吧,只不过目前自己还没弄清在firefox的执行原理,不过那是迟早的事儿。还是那句话,欢迎大家不要吝惜自己的留言,把自己理解的分享给大家也是在提升自己。^_^!!!