javascript的语法作用域你真的懂了吗

原文:javascript的语法作用域你真的懂了吗

     有段时间没有更新了,思绪一下子有点转不过来。正应了一句古话“一天不读书,无人看得出;一周不读书,开始会爆粗;一月不读书,智商输给猪。”。再加上周五晚上看了下很久没看的湖南综艺节目《天天向上》关于出版书及读书的相关内容,看到相当多的嘉宾家里的书房让我惊叹也伴随着一种文人的向往。我虽然小的时候不太爱看书,但是随着自己一点点的长大,也不知道什么时候开始也有买书藏书看书的情节,而且正如郁钧剑老师所说的藏书有点会上瘾,即使有些书不是马上就会看。挺希望以后不工作了,有自己的一间书屋,一方书桌,一把椅子,一壶茶水,悠然自得的读书练习书法。

话题有点跑题了,切换模式回到这篇博客上来。在一次小组同事间分享的时候,有位同事给出了这样一个代码:

javascript的语法作用域你真的懂了吗
if (true) {
    function fn() {
        alert(‘为 true 时执行我!‘);
    }
} else {
    function fn() {
        alert(‘为 false 时执行我!‘);
    }
}
fn()
javascript的语法作用域你真的懂了吗

大家可以看下,这段代码执行的结果到底是什么?开启你智慧的大脑吧!

好吧,下面是各主流浏览器的执行结果:

  1. 最爱的chrome:// 为 false 时执行我!
  2. 不用很久的firefox // 为 true 时执行我!
  3. IE7/8/9  // 为 false 时执行我!

哦,这是why?其实当我那同事问我们的时候,我的第一直觉就是 “为 true 时执行我!”。 后来,我想了想这个情况是不是浏览器在解析javascript的语法分析的时候有区别。

下面是我当时的猜想,大家不要当作是解释以上代码的理由:

1.chrome和IE在解析上述代码的时候语法作用域解析的变量与函数声明提升。大概是这样的意思:

javascript的语法作用域你真的懂了吗
function fn() {
    alert(‘为 true 时执行我!‘);
}
function fn() {
    alert(‘为 false 时执行我!‘);
}        

if (true) {
    function fn() {
        alert(‘为 true 时执行我!‘);
    }
} else {
    function fn() {
        alert(‘为 false 时执行我!‘);
    }
}
fn()
javascript的语法作用域你真的懂了吗

所以后面的函数覆盖前面的函数,所以才会是这样的结果。

firefox的解析可能不太一样,在处理语法作用域的时候,当函数声明的时候在if语句中是按顺序执行。

哈哈,以上也是自己的猜想,没有去研究浏览器之间的源码,能力有限,今日记下,日后有能 力再补上。也欢迎各路高手留言指点迷津。

分割,在我那个同事分享后放假就是五一,三天假期像我这样的宅男只能看着别人带着女朋友到处旅游;自个默默的只好宅在家里,三天休息也不是一点没有收获。三天有两天下午到公园跑步跑6圈,不经常跑步,一跑起来真是上气不接下气,但还是坚持跑完了自己定下的6圈,毕竟做程序的没有个好身体怎么行是吧?每晚,看会周爱民写的《javascript语言精髓与编程实践》,刚好看到模块化的层次---语法作用域这一节,就有涉及上述代码的解释。

javascript语法作用域图表:

javascript的语法作用域你真的懂了吗

 特殊作用运算符图

javascript的语法作用域你真的懂了吗

在这一节的语法作用域之间的相关性是这样描述的:

结构化语言中,代码块的作用域是相互不相交的。这些作用域之间只存在平行或嵌套两种相关性。

例如:

代码平行:

javascript的语法作用域你真的懂了吗
/**
* 示例1:代码一与代码二平行
*/

// 代码一
if (true){
    // ...
}
// 代码二
while (true) {
    // ...
}
javascript的语法作用域你真的懂了吗

代码嵌套:

javascript的语法作用域你真的懂了吗
/**
* 示例2: 代码一与代码二嵌套
*/

// 代码一
if (true){
    // ...
    // 代码二
    while (true) {
        // ...
    }
}
javascript的语法作用域你真的懂了吗

结构化语言是通过代码块这种“互不相交”的特性来保证逻辑上的独立,消除代码块之间的耦合。但是“嵌套”这种相关性中,代码二与代码一的语法作用域存在重叠。这种关系,就是通过前面所说的“语法作用域的级别”来控制。

  1. 相同级别的语法作用域可以相互嵌套
  2. 高级别的语法作用域能够包含低级别的语法作用域
  3. 低级别的语法作用域不包含高级别的语法作用域。由于不存在包含关系,因此语言实现时,一般处理成语法的违例,或者理解为“平行”的关系。

规则一的示例:

javascript的语法作用域你真的懂了吗
/**
* 规则1: 相同级别的代码的嵌套
*/
function fn1() {
    function fn2() {
        function fn3() {
            // ....
        }
    }
}
javascript的语法作用域你真的懂了吗

规则二的示例:

javascript的语法作用域你真的懂了吗
/**
* 规则2: 高级别代码的嵌套低级别代码
*/
function fn1() {
    if (true) {
        // ...
    }
}
javascript的语法作用域你真的懂了吗

规则三的示例:

javascript的语法作用域你真的懂了吗
/**
* 规则3: 低级别代码的嵌套高级别代码
*/
if (true) {
    function fn1() {
        // ...
    }
} else {
    function fn1() {
        // ...
    }
}

// 低级别代码不能包含高级别代码,所以把这种嵌套关系理解成平行关系

if (true) {
    // ..
} else {
    // ...
}

function fn1() {
    // ...
}

function fn1() {
    // ...
} // 同名函数,后者覆盖前者
javascript的语法作用域你真的懂了吗

至此,大家看到规则三的时候是不是很眼熟啊,的确,看到这示例就很快能理解之前我同事分享那段代码在chrome和IE的执行结果是怎么一回事。

不过遗憾的是,没能解释为什么在firefox的执行原理,正如我前面个人的猜想的那样吧,只不过目前自己还没弄清在firefox的执行原理,不过那是迟早的事儿。还是那句话,欢迎大家不要吝惜自己的留言,把自己理解的分享给大家也是在提升自己。^_^!!!

javascript的语法作用域你真的懂了吗,布布扣,bubuko.com

javascript的语法作用域你真的懂了吗

上一篇:C++杂分析


下一篇:JavaScript高级程序设计18.pdf