Javascript之旅——第一站:从变量说起
工作这几年,js学的不是很好,正好周末有些闲时间,索性买本《js权威指南》,大名鼎鼎的犀牛书,好好的把js深入的看一看。买过这本
书的第一印象就是贼厚,不过后面有一半部分都是参考手册。
一:作用域
说起变量第一个要说到的肯定就是作用域,正是因为不熟悉JS的作用域,往往就会把面向对象的作用域张冠李戴,毕竟有些东西总是习惯性
的这样,但是并不是每次照搬都是可以的,那么下一个问题就来了,js到底是什么作用域,当然是函数作用域了,我们的浏览器就是一个被实例
化的window对象,如果在window下定义一个name字段,那么name字段就具有window这个函数作用域,也就是在window下都是可以访问的,
如果在window下定义一个function ctrip,然后里面再定义一个name,那么这个新定义的name只能在ctrip函数下通用,而老的name继续在
window下通用,举个例子。
从图中可以看出两点:
1: 在window下定义了一个name,居然还可以在function下定义一个重名的name,这个在C#里面是不可想象的。
2:在JS下就可以做到眼瞎,它只认自己的作用域,所以就出现了第一个"second",你可能觉得这个没有什么稀奇的地方,这是因为可能你还
没有真正理解什么是函数作用域,解析器在执行ctrip的时候,第一件事情就是寻找ctrip下的所有局部变量,然后再执行后续语句,既然是先
寻找,那么var name="second"这条语句定义在ctrip中任何位置都是可以的,下面我们把语句调换过来。
可以看到在ctrip函数下,第一个console.log输出的是undefined,这个结果可以证实,确实做了第一件事情是收集到了name这个局部变量,可能
有人说为什么没有变成”second“,那是因为初始化操作必须是逐语句执行,所以在ctrip函数中执行console.log(name)时,此时解析器只知道有一
个未赋值的变量name,所以就console的时候就是undefined了。
二:作用域链
从上面的这个例子中我们也很清楚的知道了,在function中定义的变量只具有function范围内的作用域,同时我们也看到上面这个例子只是一层
嵌套,window是个大的function,里面是一个ctrip的function,同样的道理也可以延伸到多层嵌套,比如三层,四层。。。。N层,这些层就形成了
一个链式结构。
从图中可以看到,我在ctrip下再定义了一个plane函数,这样的话就有三层了,输出的结果也是我们希望看到的,每层的name只在自己的作用域范围
内生效,但是下面有一个问题来了,有一天我傻逼了,在定义plane的函数时,把 var name="third" 中的var忘记写了,那么这个时候,plane中的
name到底是什么值呢? 是first还是second呢?
var name="first";
function ctrip(){
var name="second";
function plane(){
name="third";
console.log(name);
}
plane();
console.log(name);
}
ctrip();
console.log(name);
现在就是考验你是否真的懂了作用域链,仔细想想会发现,当代码执行到plane函数中的name=”third“时,发现plane函数中并没有name这个局部
变量,恰好代码又在ctrip这个大函数中,所以解析器就会回溯到ctrip函数中寻找name,发现果然有name,这个时候就把ctrip的name
修改成了”third“。
又有一天,我喝多了酒又傻逼了一回,在定义plane函数的时候,把name="third" 错写成了 nam="third"; 丢了一个e,你可以说是酒精的问题,
又不是我代码的问题。那么这个时候解析器该怎么处理呢?同样的道理,在回溯时,发现ctrip没有,再回溯到顶层的window下,发现还是没有,
这个时候解析器做了这样的处理,既然整个链中都没有,你又赋值了,我总不能给你报错,那多尴尬呀,就索性给你在window下隐式的定义一个
nam变量,这个时候nam其实就是全局变量了。我们可以在window顶层console一下nam看看。
好了,关于变量的东西也就这么多了,没什么稀奇的,理解了就没什么意思了。
Javascript之旅——第一站:从变量说起的更多相关文章
- Javascript之旅——第二站:对象和数组
一觉睡到中午,本来准备起来洗洗继续睡,不过想想没辙,还得继续这个系列,走过变量的第一站,第二站我们再来看看对象和数组. 一:对象 说起对象,我们不自然就想起了面向对象中自封装的一个类,同样JS中也 ...
- CSS之旅——第一站 为什么要用CSS
不知道有多少码农和我一样,css一直是一个软肋,软到全身酥麻...既然软肋来了,只能是要想办法解决,所以就找本CSS权威指南看一看,都说 CSS权威指南这本书比较过时,但是内容还是比较充实的,而且内容 ...
- asp.net mvc 之旅—— 第一站 从简单的razor入手
记得2011年mvc3刚出来的时候,我们就有幸将 mvc3 用在我们团购项目上,当时老大让我们用一个星期时间来熟悉mvc,幸好园子里面的老朋友DR 正在写mvc3系列,也恭喜这个系列文章被整理成专题供 ...
- Javascript之旅——第九站:吐槽function
说到funciton,也是我对js非常吐槽的一点,封装的让我眼瞎,马蛋的,哥只能大眼睁着去黑盒的使用,简直只有完完全全的听各类图书对 function的道听图说,完全没有做到一点点的眼见为实. 一:f ...
- Sql Server之旅——第一站 那些给我们带来福利的系统视图
本来想这个系列写点什么好呢,后来想想大家作为程序员,用的最多的莫过于数据库了,但是事实上很多像我这样工作在一线的码农,对sql 都一知半解,别谈优化和对数据库底层的认识了,我也是这样... 一:那些系 ...
- llvm之旅第一站 - 编译及简单使用 LLVM 图解
http://www.nagain.com/activity/article/4/ http://blog.csdn.net/snsn1984/article/details/8593380
- 【C语言探索之旅】 第一部分第四课第一章:变量的世界之内存那档事
内容简介 1.课程大纲 2.第一部分第四课第一章:变量的世界之内存那档事 3.第一部分第四课第二章预告:变量的世界之声明变量 课程大纲 我们的课程分为四大部分,每一个部分结束后都会有练习题,并会公布答 ...
- JavaScript之旅(二)
JavaScript之旅(二) 二.进阶知识 js的正则表达式 异常处理 调试 变量提升 表单验证 JSON javascript:void(0) JavaScript 代码规范 二.进阶知识 1. ...
- Javascript之旅(一)
Javascript之旅(一) 一.基础知识 基本语法 变量 数据类型 字符串 数组 对象 条件判断 循环 Map和Set iterable 为什么要学习JavaScript JavaScript 是 ...
随机推荐
- 算法实例-C#-快速排序-QuickSort
算法实例 ##排序算法Sort## ### 快速排序QuickSort ### bing搜索结果 http://www.bing.com/knows/search?q=%E5%BF%AB%E9%80% ...
- MyEclipse10修改servlet模版
Myeclipse10中servlet模版存放的位置与早些的版本不同,它存放在: MyEclipse\Common\plugins中的下面那个jar包中 com.genuitec.eclipse.wi ...
- 点击div折叠
<!doctype html> <html> <head> <meta charset="utf-8"> <meta cont ...
- 使用MySQL WorkBench导出数据库
1. 在MySQL WorkBench的Server Administrator中双击要连接的数据库: 2. 点击左边的Data Export,在右边的数据库列表中选择要导出的数据库: 3. Expo ...
- Java基础复习笔记系列 二
1.Java中Static的相关用法总结?(静态方法:静态变量:静态代码块) public static void main(String args[])执行的关键,在于有static.有了stati ...
- Several ports (8080, 8009) required by Tomcat v6.0 Server at localhost are already in use.
遇到这个问题似然重启是个办法,但是真心好累.. 1.在dos下,输入 netstat -ano|findstr 8080 //说明:查看占用8080端口的进程 显示占用端口的进程 2.在任务管 ...
- jQuery BreakingNews 间歇滚动
BreakingNews 是一款基于jQuery的间歇滚动插件.它可以设置标题.标题颜色.标题背景颜色.链接颜色.字体大小.边框.宽度.自动滚动.间歇时间等等,同时它还好提供两种过度方式--淡入淡出( ...
- MaterialUp - 寻找材料设计灵感必备的网站
MaterialUp 是一个展示最好的材料设计 APP,网站和概念的地方,每天都会更新.每款设计都精心挑选,展示那些有才华的设计师的伟大工作. MaterialUp 的核心价值是让尽可能多的设计师提供 ...
- 【CSS3】 CSS3:弹性盒子(Flex Box)
Flex布局是什么 如何指定一个容器为Flex布局 Flex的基本语法 display flex-direction justify-content align-items flew-wrap ali ...
- HTML表格边框的设置小技巧
对于很多初学HTML的人来说,表格<table>是最常用的标签了,但对于表格边框的控制,很多初学者却不甚其解. 对于很多初学HTML的人来说,表格<table>是最常用的标签了 ...