再探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中apply方法的使用详细解析
Nov 04 Javascript
JS如何判断是否为ie浏览器的方法(包括IE10、IE11在内)
Dec 13 Javascript
jquery.cookie实现的客户端购物车操作实例
Dec 24 Javascript
jQuery实现输入框邮箱内容自动补全与上下翻动显示效果【附demo源码下载】
Sep 20 Javascript
JS中位置与大小的获取方法
Nov 22 Javascript
JavaScript实现经典排序算法之冒泡排序
Dec 28 Javascript
JSONP基础知识详解
Mar 19 Javascript
客户端(vue框架)与服务器(koa框架)通信及服务器跨域配置详解
Aug 26 Javascript
关于预加载InstantClick的问题解决方法
Sep 12 Javascript
webpack3里使用uglifyjs压缩js时打包报错的解决
Dec 13 Javascript
Vue最新防抖方案(必看篇)
Oct 30 Javascript
javascript中layim之查找好友查找群组
Feb 06 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
PHP5.5和之前的版本empty函数的不同之处
2014/06/13 PHP
ThinkPHP提交表单时默认自动转义的解决方法
2014/11/25 PHP
PHP数组实际占用内存大小原理解析
2020/12/11 PHP
关于onScroll事件在IE6下每次滚动触发三次bug说明
2011/09/21 Javascript
javascript中IE浏览器不支持NEW DATE()带参数的解决方法
2012/03/01 Javascript
js获得地址栏?问号后参数的方法
2013/08/08 Javascript
取得元素的左和上偏移量的方法
2014/09/17 Javascript
jquery实现简单手风琴菜单效果实例
2015/06/13 Javascript
Vue + Webpack + Vue-loader学习教程之功能介绍篇
2017/03/14 Javascript
微信小程序 实现列表项滑动显示删除按钮的功能
2017/04/13 Javascript
老生常谈javascript的面向对象思想
2017/08/22 Javascript
使用react实现手机号的数据同步显示功能的示例代码
2018/04/03 Javascript
vue v-model动态生成详解
2018/06/30 Javascript
Vue+axios实现统一接口管理的方法
2018/07/23 Javascript
微信小程序之数据绑定原理解析
2019/08/14 Javascript
vue用ant design中table表格,点击某行时触发的事件操作
2020/10/28 Javascript
Python中字典映射类型的学习教程
2015/08/20 Python
浅谈使用Python内置函数getattr实现分发模式
2018/01/22 Python
python中利用zfill方法自动给数字前面补0
2018/04/10 Python
python实现邮件自动发送
2019/08/10 Python
python并发编程多进程 互斥锁原理解析
2019/08/20 Python
PyCharm 2020.2 安装详细教程
2020/09/25 Python
python如何构建mock接口服务
2021/01/28 Python
CSS3实现内凹圆角的实例代码
2017/05/04 HTML / CSS
Space NK英国站:英国热门美妆网站
2017/12/11 全球购物
聚美优品广告词改编
2014/03/14 职场文书
洗车工岗位职责
2014/03/15 职场文书
2014年煤矿安全工作总结
2014/12/04 职场文书
大学生就业意向书
2015/05/11 职场文书
2016抗战胜利71周年红领巾广播稿
2015/12/18 职场文书
z-index不起作用
2021/03/31 HTML / CSS
Python入门之基础语法详解
2021/05/11 Python
浅谈Redis的keys命令到底有多慢
2021/10/05 Redis
mysql聚集索引、辅助索引、覆盖索引、联合索引的使用
2022/02/12 MySQL
一文弄懂MySQL索引创建原则
2022/02/28 MySQL
ssh服务器拒绝了密码 请再试一次已解决(亲测有效)
2022/08/14 Servers