再探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 相关文章推荐
poshytip 基于jquery的 插件 主要用于显示微博人的图像和鼠标提示等
Oct 12 Javascript
jQuery.buildFragment使用方法及思路分析
Jan 07 Javascript
JavaScript中constructor()方法的使用简介
Jun 05 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之绑定事件
Nov 19 Javascript
javascript模块化简单解析
Apr 07 Javascript
8 行 Node.js 代码实现代理服务器
Dec 05 Javascript
微信小程序 跳转传参数与传对象详解及实例代码
Mar 14 Javascript
div中文字内容溢出常见的解决方法
Mar 16 Javascript
JavaScript 巧学巧用
May 23 Javascript
Vue开发之watch监听数组、对象、变量操作分析
Apr 25 Javascript
vue组件间通信六种方式(总结篇)
May 15 Javascript
微信小程序实现手指拖动选项排序
Apr 22 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
Yii框架在页面输出执行sql语句以方便调试的实现方法
2014/12/24 PHP
php中动态调用函数的方法
2015/03/16 PHP
PHP实现导出excel数据的类库用法示例
2016/10/15 PHP
phpinfo()中Loaded Configuration File(none)的解决方法
2017/01/16 PHP
js获取TreeView控件选中节点的Text和Value值的方法
2012/11/24 Javascript
浅析用prototype定义自己的方法
2013/11/14 Javascript
在jquery boxy中添加百度地图坐标拾取注意流程
2014/04/03 Javascript
javascript中DOM复选框选择用法实例
2015/05/14 Javascript
轻松搞定jQuery.noConflict()
2016/02/15 Javascript
更高效的使用JQuery 这里总结了8个小技巧
2016/04/13 Javascript
JS传值出现中文参数乱码的解决方法
2016/06/30 Javascript
jQuery获取与设置iframe高度的方法
2016/08/01 Javascript
解决React Native端口号修改的方法
2017/07/28 Javascript
node.js处理前端提交的GET请求
2019/08/30 Javascript
layui中的switch开关实现方法
2019/09/03 Javascript
在vue中高德地图引入和轨迹的绘制的实现
2019/10/11 Javascript
JS控制GIF图片的停止与显示
2019/10/24 Javascript
[00:59]DOTA2荣耀之路1:Doom is back!weapon X!
2018/05/22 DOTA
将Emacs打造成强大的Python代码编辑工具
2015/11/20 Python
人机交互程序 python实现人机对话
2017/11/14 Python
python代码过长的换行方法
2018/07/19 Python
Python基于递归算法求最小公倍数和最大公约数示例
2018/07/27 Python
基于sklearn实现Bagging算法(python)
2019/07/11 Python
简单了解python列表和元组的区别
2020/05/14 Python
python 无损批量压缩图片(支持保留图片信息)的示例
2020/09/22 Python
Python自动化办公Excel模块openpyxl原理及用法解析
2020/11/05 Python
CSS3 translate导致字体模糊的实例代码
2019/08/30 HTML / CSS
表决心的诗句大全
2014/03/11 职场文书
乐观自信演讲稿范文
2014/05/21 职场文书
美术兴趣小组活动总结
2014/07/07 职场文书
班主任师德师风自我剖析材料
2014/10/02 职场文书
大学生学习新党章思想汇报
2014/10/25 职场文书
实习介绍信范文
2015/05/05 职场文书
2015年终个人政治思想工作总结
2015/11/24 职场文书
2016年“七一建党节”广播稿
2015/12/18 职场文书
Netty分布式客户端处理接入事件handle源码解析
2022/03/25 Java/Android