再探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 相关文章推荐
use jscript List Installed Software
Jun 11 Javascript
Javascript日期对象的dateAdd与dateDiff方法
Nov 18 Javascript
js中for in语句的用法讲解
Apr 24 Javascript
使用AngularJS编写较为优美的JavaScript代码指南
Jun 19 Javascript
js实现具有高亮显示效果的多级菜单代码
Sep 01 Javascript
jquery zTree异步加载、模糊搜索简单实例分享
Mar 24 Javascript
jquery if条件语句的写法
May 19 Javascript
JavaScript的继承实现小结
May 07 Javascript
BootStrap 获得轮播中的索引和当前活动的焦点对象
May 11 Javascript
浅析Javascript中双等号(==)隐性转换机制
Oct 27 Javascript
详解webpack模块化管理和打包工具
Apr 21 Javascript
使用原生js编写一个简单的框选功能方法
May 13 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 Mssql操作简单封装支持存储过程
2009/12/11 PHP
PHP实现HTTP断点续传的方法
2015/06/17 PHP
对于Laravel 5.5核心架构的深入理解
2018/02/22 PHP
摘自百度的图片轮换效果代码
2007/11/19 Javascript
Javascript 面向对象 对象(Object)
2010/05/13 Javascript
JS 如果改变span标签的是否隐藏属性
2011/10/06 Javascript
使用JQuery和CSS模拟超链接的用户单击事件的实现代码
2012/05/23 Javascript
基于jquery自己写tab滑动门(通用版)
2012/10/30 Javascript
JavaScript 创建运动框架的实现代码
2013/05/08 Javascript
js导航栏单击事件背景变换示例代码
2014/01/13 Javascript
详解JavaScript中Hash Map映射结构的实现
2016/05/21 Javascript
JS实现table表格数据排序功能(可支持动态数据+分页效果)
2016/05/26 Javascript
js仿百度音乐全选操作
2017/01/13 Javascript
微信小程序 页面之间传参实例详解
2017/01/13 Javascript
JavaScript优化以及前段开发小技巧
2017/02/02 Javascript
Bootstrap禁用响应式布局的实现方法
2017/03/09 Javascript
AngularJS入门教程二:在路由中传递参数的方法分析
2017/05/27 Javascript
vue 父组件调用子组件方法及事件
2018/03/29 Javascript
微信网页授权并获取用户信息的方法
2018/07/30 Javascript
jQuery超简单遮罩层实现方法示例
2018/09/06 jQuery
手动下载Chrome并解决puppeteer无法使用问题
2018/11/12 Javascript
小程序登录态管理的方法示例
2018/11/13 Javascript
使用 js 简单的实现 bind、call 、aplly代码实例
2019/09/07 Javascript
微信小程序实现滑动翻页效果(完整代码)
2019/12/06 Javascript
python实用代码片段收集贴
2015/06/03 Python
Python编写一个闹钟功能
2017/07/11 Python
Python实现matplotlib显示中文的方法详解
2018/02/06 Python
tensorflow输出权重值和偏差的方法
2018/02/10 Python
Python爬虫实现vip电影下载的示例代码
2020/04/20 Python
遮罩层 + Iframe实现界面自动显示的示例代码
2020/04/26 HTML / CSS
德国专业木制品经销商:Holz-Direkt24
2019/12/26 全球购物
护士演讲稿范文
2014/01/05 职场文书
教师党员思想汇报
2014/01/06 职场文书
《苏珊的帽子》教学反思
2014/04/07 职场文书
2014年内勤工作总结
2014/11/24 职场文书
2016年度农村党员干部主题教育活动总结
2016/04/06 职场文书