再探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 相关文章推荐
一个XML格式数据转换为图表的例子
Feb 09 Javascript
javascript hasFocus使用实例
Jun 29 Javascript
javascript常用方法、属性集合及NodeList 和 HTMLCollection 的浏览器差异
Dec 25 Javascript
深入理解JavaScript系列(7) S.O.L.I.D五大原则之开闭原则OCP
Jan 15 Javascript
Jquery动态添加及删除页面节点元素示例代码
Jun 16 Javascript
js实现prototype扩展的方法(字符串,日期,数组扩展)
Jan 14 Javascript
JavaScript实现移动端轮播效果
Jun 06 Javascript
JavaScript字符串转数字的5种方法及遇到的坑
Jul 16 Javascript
React性能优化系列之减少props改变的实现方法
Jan 17 Javascript
微信小程序实现商城倒计时
Nov 01 Javascript
webpack自动打包和热更新的实现方法
Jun 24 Javascript
JS实现简易留言板特效
Dec 23 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实现接收二进制流转换成图片的方法
2017/01/10 PHP
PHP实现广度优先搜索算法(BFS,Broad First Search)详解
2017/09/16 PHP
php 多继承的几种常见实现方法示例
2019/11/18 PHP
基于PHP+mysql实现新闻发布系统的开发
2020/08/06 PHP
js实现数字每三位加逗号的方法
2015/02/05 Javascript
js实现漂浮回顶部按钮实例
2015/05/06 Javascript
浅析jquery数组删除指定元素的方法:grep()
2016/05/19 Javascript
javascript使用 concat 方法对数组进行合并的方法
2016/09/08 Javascript
关于axios返回空对象的问题解决
2017/04/04 Javascript
Angularjs中的$apply及优化使用详解
2018/07/02 Javascript
JS使用百度地图API自动获取地址和经纬度操作示例
2019/04/16 Javascript
了解javascript中的Dom操作
2019/05/27 Javascript
JS图片懒加载的优点及实现原理
2020/01/10 Javascript
浅谈TypeScript的类型保护机制
2020/02/23 Javascript
微信小程序基于ColorUI构建皮皮虾短视频去水印组件
2020/11/04 Javascript
[04:45]DOTA2上海特级锦标赛主赛事第四日RECAP
2016/03/06 DOTA
[42:23]完美世界DOTA2联赛PWL S3 Forest vs Rebirth 第二场 12.10
2020/12/13 DOTA
python从入门到精通(DAY 2)
2015/12/20 Python
Python随机生成手机号、数字的方法详解
2017/07/21 Python
Python实现扩展内置类型的方法分析
2017/10/16 Python
微信跳一跳辅助python代码实现
2018/01/05 Python
详谈python3 numpy-loadtxt的编码问题
2018/04/29 Python
python3 kmp 字符串匹配的方法
2018/07/07 Python
python 读取dicom文件,生成info.txt和raw文件的方法
2019/01/24 Python
tensorflow 查看梯度方式
2020/02/04 Python
如何使用python传入不确定个数参数
2020/02/18 Python
HTML页面中添加Canvas标签示例
2015/01/01 HTML / CSS
英语简历自我评价
2014/01/26 职场文书
八年级数学教学反思
2014/01/31 职场文书
《两只鸟蛋》教学反思
2014/02/10 职场文书
2014教师评职称工作总结
2014/11/10 职场文书
一文了解JavaScript用Element Traversal新属性遍历子元素
2021/11/27 Javascript
css常用字体属性与背景属性介绍
2022/02/28 HTML / CSS
spring cloud eureka 服务启动失败的原因分析及解决方法
2022/03/17 Java/Android
app场景下uniapp的扫码记录
2022/07/23 Java/Android
Python pyecharts案例超市4年数据可视化分析
2022/08/14 Python