再探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 分栏效果实现代码
Aug 29 Javascript
js获取RadioButtonList的Value/Text及选中值等信息实现代码
Mar 05 Javascript
深入理解JavaScript系列(48):对象创建模式(下篇)
Mar 04 Javascript
MVVM模式中ViewModel和View、Model有什么区别?
Jun 19 Javascript
js实现图片点击左右轮播
Jul 08 Javascript
jQuery unbind 删除绑定事件详解
May 24 Javascript
高效Web开发的10个jQuery代码片段
Jul 22 Javascript
JS常用倒计时代码实例总结
Feb 07 Javascript
js中删除数组中的某一元素实例(无下标时)
Feb 28 Javascript
jQuery开源组件BootstrapValidator使用详解
Jun 29 jQuery
vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)
May 10 Javascript
利用promise及参数解构封装ajax请求的方法
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
用文本文件制作留言板提示(上)
2006/10/09 PHP
PHP5+UTF8多文件上传类
2008/10/17 PHP
处理php自动反斜杠的函数代码
2010/01/05 PHP
php生成静态文件的多种方法分享
2012/07/17 PHP
php加密解密函数authcode的用法详细解析
2013/10/28 PHP
PHP版微信公众平台红包API
2015/04/02 PHP
如何使用纯PHP实现定时器任务(Timer)
2015/07/31 PHP
关于laravel 子查询 & join的使用
2019/10/16 PHP
为原生js Array增加each方法
2012/04/07 Javascript
解决window.opener=null;window.close(),只支持IE6不支持IE7,IE8的问题
2014/01/14 Javascript
jQuery获取节点和子节点文本的方法
2014/07/22 Javascript
express的中间件bodyParser详解
2014/12/04 Javascript
js仿腾讯QQ的web登陆界面
2016/08/19 Javascript
老生常谈jacascript DOM节点获取
2017/04/17 Javascript
在nginx上部署vue项目(history模式)的方法
2017/12/28 Javascript
详解Vue Elementui中的Tag与页面其它元素相互交互的两三事
2018/09/25 Javascript
基于javascript的拖拽类封装详解
2019/04/19 Javascript
vant实现购物车功能
2020/06/29 Javascript
利用js canvas实现五子棋游戏
2020/10/11 Javascript
[00:18]天涯墨客三技能展示
2018/08/25 DOTA
在Python中使用sort()方法进行排序的简单教程
2015/05/21 Python
Python实现繁?转为简体的方法示例
2018/12/18 Python
python 将字符串中的数字相加求和的实现
2019/07/18 Python
python redis连接 有序集合去重的代码
2019/08/04 Python
python读取大文件越来越慢的原因与解决
2019/08/08 Python
利用Python复制文件的9种方法总结
2019/09/02 Python
Tensorflow训练MNIST手写数字识别模型
2020/02/13 Python
Django使用django-simple-captcha做验证码的实现示例
2021/01/07 Python
澳大利高级泳装品牌:Bondi Born
2018/05/23 全球购物
印度最好的在线药品订购网站:PharmEasy
2018/11/30 全球购物
营销与策划应届生求职信
2013/11/04 职场文书
金属材料工程毕业生个人的自我评价
2013/11/28 职场文书
团队精神演讲稿
2013/12/31 职场文书
中层干部竞争上岗演讲稿
2014/01/13 职场文书
出国签证在职证明
2014/01/16 职场文书
2014年村计划生育工作总结
2014/11/14 职场文书