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的执行原理,不过那是迟早的事儿。还是那句话,欢迎大家不要吝惜自己的留言,把自己理解的分享给大家也是在提升自己。^_^!!!
最新文章
- js ES6 多行字符串 连接字符串
- 那些PHP中没有全称的简写
- Unity学习疑问记录之 动作动画忽略timeScale
- HDU 5918 KMP/模拟
- 使用 virtualenv
- Codeforces 708A Letters Cyclic Shift
- [1] Ninject
- 201521123027 <;java程序设计>;第11周学习总结
- (二十六)svn的问题二
- LeetCode &; Q53-Maximum Subarray-Easy &; 动态规划思路分析
- 优雅的使用git
- laravel整合workerman做消息推送系统
- 安装CaffeOnSpark过程中遇到的问题及解决方案
- Kubernetes 持续集成 SpringCloud
- C#闰年判断
- [机器学习入门篇]-Logistic函数与Softmax函数
- jstl 格式化
- Codeforces 825D Suitable Replacement - 贪心 - 二分答案
- 数据库之python操作mysql
- 个人阅读&;个人总结
热门文章
- window.history.back()的改进方法window.history.go()
- 搭建SSH
- ios 多线程开发(二)线程管理
- iOS_17_控制开关_TabBarController_由storyboard道路
- mac平台adb、tcpdump捕手android移动网络数据包
- linux于test 订购具体解释
- Kienct与Arduino学习笔记(2) 深度图像与现实世界的深度图的坐标
- iOS经常使用快捷键
- Linux环境Eclipse + Tomcat + MySQL 构造J2EE方法开发环境
- asp.net web api KnownTypeAttribute