再探JavaScript作用域


Posted in Javascript onSeptember 24, 2014

黄金守则第一条:

js没有块级作用域(你可以自己闭包或其他方法实现),只有函数级作用域,函数外面的变量函数里面可以找到,函数里面的变量外面找不到。

first try:

再探JavaScript作用域

这是为什么呢??

var a = 10;
function aaa(){//step-4
	alert(a);//step-5->执行alert,此时只能找到外面的a=10故弹框10
}
function bbb(){//step-2
	var a = 20;
	aaa();//step-3
}
//定义了函数没啥用,调用才是真格的所以这里是step-1
bbb();//step-1

其实原理大家都懂,应该就是易错而已,万变不离其综。

second try:

再探JavaScript作用域

这是为什么呢? 因为给a赋值b的时候,b还没有定义,所以a是undefined,b是10.

黄金守则第二条:

变量的查找是就近原则,去寻找var定义的变量,当就近没有找到的时候就去查找外层。

look:

再探JavaScript作用域

这是为什么呢、? 这里面有两个原因,一是预解析,二是就近查找。

var a=10;
function aaa(){
	alert(a);//undefined,查找a的时候会现在函数内查找,由于预解析的作用,此时的a是undefined,因此永远不会去查找外面的10了
	var a = 20;

	/*预解析
	var a
	alert(a);
	var a = 20;*/

}
aaa();

attention:

再探JavaScript作用域

这个吧,就验证了第二条,虽然是就近原则,但是是就近找var声明的变量,这个是因为没有var声明的变量是全局的,这里只是修改了a的值。所以上面就是因为在函数内没找到var的a,于是到外面去找了,一找就找到了,于是a就alert出10了;不过没错的是a=20后,a确实为20了,只不过alert的时候还没有执行到那~~

看吧~

再探JavaScript作用域

下面这个例子,更加验证了js的函数作用域 而已:

再探JavaScript作用域

这是因为在alert(a)的时候,bbb函数中的a确实为20 ,可是它对于这时的alert(a)这句话来说是局部的,alert(a)根本找不到bbb函数中的a,所以在aaa函数中它找不到a,于是乎去外面找,一找,就找到了10。

黄金守则第三条:

当参数跟局部变量重名时,优先级是等同的。

例:

再探JavaScript作用域

还有:传参时,基本类型传值,引用类型传引用。(但是重新赋值之后就不是这样了喔)

var a = 5;
var b = a;
b +=3;
alert(a);//5

var a = [1,2,3];
var b=a;
b.push(4);
alert(a);//[1,2,3,4];

上面代码没有问题,但是下面就不一样啦。

再探JavaScript作用域

因为b被重新赋值了,不指向a了。

此外,参数与变量的作用域是相似的:

再探JavaScript作用域

对比上下这两个:

再探JavaScript作用域

上面是参数是基本类型,只传了值进去,下面的传个引用类型:(同样也包含重新赋值的情况)

再探JavaScript作用域

再探JavaScript作用域

Javascript 相关文章推荐
js创建数据共享接口——简化框架之间相互传值
Oct 23 Javascript
基于jQuery实现的百度导航li拖放排列效果,即时更新数据库
Jul 31 Javascript
extjs中form与grid交互数据(record)的方法
Aug 29 Javascript
javascript垃圾收集机制与内存泄漏详细解析
Nov 11 Javascript
js获取IFRAME当前的URL的方法
Nov 13 Javascript
json中换行符的处理方法示例介绍
Jun 10 Javascript
老生常谈 关于JavaScript的类的继承
Jun 24 Javascript
AngularJS出现$http异步后台无法获取请求参数问题的解决方法
Nov 03 Javascript
微信分享调用jssdk实例
Jun 08 Javascript
使用flow来规范javascript的变量类型
Sep 12 Javascript
基于JavaScript实现轮播图效果
Jan 02 Javascript
js正则匹配markdown里的图片标签的实现
Mar 24 Javascript
深入理解javascript原型链和继承
Sep 23 #Javascript
深入理解javascript构造函数和原型对象
Sep 23 #Javascript
常用的jquery模板插件——jQuery Boilerplate介绍
Sep 23 #Javascript
Javascript的setTimeout()使用闭包特性时需要注意的问题
Sep 23 #Javascript
IE6 hack for js 集锦
Sep 23 #Javascript
深入理解javascript作用域和闭包
Sep 23 #Javascript
js变量、作用域及内存详解
Sep 23 #Javascript
You might like
PHP函数学习之PHP函数点评
2012/07/05 PHP
在云虚拟主机部署thinkphp5项目的步骤详解
2017/12/21 PHP
Laravel框架实现抢红包功能示例
2019/10/31 PHP
js 刷新页面的代码小结 推荐
2010/04/02 Javascript
jquery.validate.js插件使用经验记录
2014/07/02 Javascript
简介JavaScript中search()方法的使用
2015/06/06 Javascript
JS非Alert实现网页右下角“未读信息”效果弹窗
2015/09/26 Javascript
angular.bind使用心得
2015/10/26 Javascript
JavaScript数组的一些奇葩行为
2016/01/25 Javascript
深入浅出讲解ES6的解构
2016/08/03 Javascript
chrome下判断点击input上标签还是其余标签的实现方法
2016/09/18 Javascript
NodeJS使用formidable实现文件上传
2016/10/27 NodeJs
微信小程序 动态的设置图片的高度和宽度详解及实例代码
2017/02/24 Javascript
AngularJS的脏检查深入分析
2017/04/22 Javascript
微信小程序实现根据字母选择城市功能
2017/08/16 Javascript
微信小程序wx:for和wx:for-item的用法详解
2018/04/01 Javascript
JS实现匀速与减速缓慢运动的动画效果封装示例
2018/08/27 Javascript
解决Vue + Echarts 使用markLine标线(precision精度问题)
2020/07/20 Javascript
JS如何判断对象是否包含某个属性
2020/08/29 Javascript
vue element el-transfer增加拖拽功能
2021/01/15 Vue.js
[01:20]辉夜杯背景故事宣传片《辉夜传说》
2015/12/25 DOTA
利用QT写一个极简单的图形化Python闹钟程序
2015/04/07 Python
python中常用检测字符串相关函数汇总
2015/04/15 Python
Python 按字典dict的键排序,并取出相应的键值放于list中的实例
2019/02/12 Python
python对指定字符串逆序的6种方法(小结)
2020/04/02 Python
pytorch 常用函数 max ,eq说明
2020/06/28 Python
Python selenium键盘鼠标事件实现过程详解
2020/07/28 Python
不同浏览器创建XMLHttpRequest方法有什么不同
2014/11/17 面试题
文言文形式的学生求职信
2013/12/03 职场文书
出国考察邀请函
2014/01/21 职场文书
初中化学教学反思
2014/01/23 职场文书
“六查”、“三学”、“三干”查摆问题整改措施
2014/09/27 职场文书
处级领导干部四风问题自我剖析材料
2014/09/29 职场文书
关于安全的广播稿
2014/10/23 职场文书
医院见习报告范文
2014/11/03 职场文书
迎新晚会主持词开场白
2015/05/28 职场文书