- 首页 > 资讯 > JavaScript > 正文
javascript的语法作用域你真的懂了吗
有段时间没有更新了，思绪一下子有点转不过来。正应了一句古话“一天不读书，无人看得出；一周不读书，开始会爆粗；一月不读书，智商输给猪。”。再加上周五晚上看了下很久没看的湖南综艺节目《天天向上》关于出版书及读书的相关内容，看到相当多的嘉宾家里的书房让我惊叹也伴随着一种文人的向往。我虽然小的时候不太爱看书，但是随着自己一点点的长大，也不知道什么时候开始也有买书藏书看书的情节，而且正如郁钧剑老师所说的藏书有点会上瘾，即使有些书不是马上就会看。挺希望以后不工作了，有自己的一间书屋，一方书桌，一把椅子，一壶茶水，悠然自得的读书练习书法。
话题有点跑题了，切换模式回到这篇博客上来。在一次小组同事间分享的时候，有位同事给出了这样一个代码：
复制代码
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的执行原理，不过那是迟早的事儿。还是那句话，欢迎大家不要吝惜自己的留言，把自己理解的分享给大家也是在提升自己。^_^!!!
- 上一篇：美国"起诉"中国军人侵入美企电脑 遭中方反击
- 下一篇：企业微信公众号运营技巧有哪些
相关文章
图文推荐
- 文章
- 推荐
- 热门新闻