再探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 相关文章推荐
css配合jquery美化 select
Nov 29 Javascript
js判断页面中是否有指定控件的简单实例
Mar 04 Javascript
javascript中Object使用详解
Jan 26 Javascript
jQuery如何防止Ajax重复提交
Oct 14 Javascript
JavaScript使用math.js进行精确计算操作示例
Jun 19 Javascript
Angular5中状态管理的实现
Sep 03 Javascript
javacript replace 正则取字符串中的值并替换【推荐】
Sep 13 Javascript
JavaScript前端页面搜索功能案例【基于jQuery】
Jul 10 jQuery
windows下create-react-app 升级至3.3.1版本踩坑记
Feb 17 Javascript
详解node和ES6的模块导出与导入
Feb 19 Javascript
vue中解决拖拽改变存在iframe的div大小时卡顿问题
Jul 22 Javascript
原生JavaScript实现贪吃蛇游戏
Nov 04 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
虹吸壶煮咖啡26个注意事项
2021/03/03 冲泡冲煮
Linux下ZendOptimizer的安装与配置方法
2007/04/12 PHP
PHP XML备份Mysql数据库
2009/05/27 PHP
PHP 处理图片的类实现代码
2009/10/23 PHP
比较好用的PHP防注入漏洞过滤函数代码
2012/04/11 PHP
php外部执行命令函数用法小结
2016/10/11 PHP
php 微信公众平台开发模式实现多客服的实例代码
2016/11/07 PHP
锋利的jQuery 要点归纳(二) jQuery中的DOM操作(下)
2010/03/23 Javascript
jquery 延迟执行实例介绍
2013/08/20 Javascript
jQuery处理xml格式的返回数据(实例解析)
2013/11/28 Javascript
js设置function参数默认值(适合没有传参情况)
2014/02/24 Javascript
JavaScript编程中的Promise使用大全
2015/07/28 Javascript
论JavaScript模块化编程
2016/03/07 Javascript
浅谈JS中的bind方法与函数柯里化
2016/08/10 Javascript
AngularJS入门教程之迭代器过滤详解
2016/08/18 Javascript
提高Web性能的前端优化技巧总结
2017/02/27 Javascript
Angular实现较为复杂的表格过滤,删除功能示例
2017/12/23 Javascript
vue-music 使用better-scroll遇到轮播图不能自动轮播问题
2018/12/03 Javascript
通过Nodejs搭建网站简单实现注册登录流程
2019/06/14 NodeJs
微信小程序canvas分享海报功能
2019/10/31 Javascript
Vue自定义表单内容检查rules实例
2020/10/30 Javascript
python排序方法实例分析
2015/04/30 Python
python邮件发送smtplib使用详解
2020/06/16 Python
python3下载抖音视频的完整代码
2019/06/05 Python
Python 读取串口数据,动态绘图的示例
2019/07/02 Python
基于CSS3实现图片模糊过滤效果
2015/11/19 HTML / CSS
会计与审计专业大专生求职信
2013/10/03 职场文书
师范生自荐信
2013/10/27 职场文书
生产管理的三大手法
2013/11/11 职场文书
岗位竞聘书范文
2014/03/31 职场文书
幼儿园小班评语大全
2014/04/17 职场文书
讲座新闻稿
2015/07/18 职场文书
五一放假通知怎么写
2015/08/18 职场文书
关于MySQL临时表为什么可以重名的问题
2022/03/22 MySQL
Python中requests库的用法详解
2022/06/05 Python
详解flex:1什么意思
2022/07/23 HTML / CSS