再探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 相关文章推荐
jqeury eval将字符串转换json的方法
Jan 20 Javascript
JavaScript 类型的包装对象(Typed Wrappers)
Oct 27 Javascript
了解jQuery技巧来提高你的代码(个人觉得那个jquery的手册很不错)
Feb 10 Javascript
js有序数组的连接问题
Oct 01 Javascript
JavaScript 开发工具webstrom使用指南
Dec 09 Javascript
本人自用的global.js库源码分享
Feb 28 Javascript
jQuery取得iframe中元素的常用方法详解
Jan 14 Javascript
简单谈谈gulp-changed插件
Feb 21 Javascript
JS设计模式之数据访问对象模式的实例讲解
Sep 30 Javascript
js+canvas实现验证码功能
Sep 21 Javascript
详解如何解决vue开发请求数据跨域的问题(基于浏览器的配置解决)
Nov 12 Javascript
监控微信小程序中的慢HTTP请求过程详解
Jul 05 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中动态HTML的输出技术
2006/10/09 PHP
图片按比例缩放函数
2006/06/26 Javascript
贴一个在Mozilla中常用的Javascript代码
2007/01/09 Javascript
JS URL传中文参数引发的乱码问题
2009/09/02 Javascript
jQuery中:file选择器用法实例
2015/01/04 Javascript
jQuery中offsetParent()方法用法实例
2015/01/19 Javascript
js实现鼠标划过给div加透明度的方法
2015/05/25 Javascript
jquery $.trim()去除字符串空格的实现方法【附图例】
2016/03/30 Javascript
原生js实现autocomplete插件
2016/04/14 Javascript
JavaScript对Json的增删改属性详解
2016/06/02 Javascript
利用BootStrap的Carousel.js实现轮播图动画效果
2016/12/21 Javascript
基于jQuery实现瀑布流页面
2017/04/11 jQuery
如何解决React官方脚手架不支持Less的问题(小结)
2018/09/12 Javascript
简单易扩展可控性强的Jquery转盘抽奖程序
2019/03/16 jQuery
JavaScript实现移动端带transition动画的轮播效果
2020/03/24 Javascript
openlayers 3实现车辆轨迹回放
2020/09/24 Javascript
使用python检测主机存活端口及检查存活主机
2015/10/12 Python
Python实现命令行通讯录实例教程
2016/08/18 Python
Python+Socket实现基于UDP协议的局域网广播功能示例
2017/08/31 Python
Python使用requests及BeautifulSoup构建爬虫实例代码
2018/01/24 Python
超简单使用Python换脸实例
2019/03/27 Python
浅谈tensorflow使用张量时的一些注意点tf.concat,tf.reshape,tf.stack
2020/06/23 Python
Python实现冒泡排序算法的完整实例
2020/11/04 Python
CSS3 Media Queries(响应式布局可以让你定制不同的分辨率和设备)
2013/06/06 HTML / CSS
HTML5基于flash实现播放RTMP协议视频的示例代码
2020/12/04 HTML / CSS
欧舒丹比利时官网:L’OCCITANE比利时
2017/04/25 全球购物
公共汽车、火车和飞机票的通用在线预订和销售平台:INFOBUS
2019/11/30 全球购物
公益活动策划方案
2014/01/09 职场文书
语文教学感言
2014/02/06 职场文书
《童年》教学反思
2014/02/18 职场文书
酒店总经理岗位职责范本
2014/08/08 职场文书
2015年销售员工作总结范文
2015/04/07 职场文书
感恩老师主题班会
2015/08/12 职场文书
职场干货:简历中的自我评价应该这样写!
2019/05/06 职场文书
详解GaussDB for MySQL性能优化
2021/05/18 MySQL
mongodb数据库迁移变更的解决方案
2021/09/04 MongoDB