再探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 相关文章推荐
利用javascript打开模态对话框(示例代码)
Jan 11 Javascript
Javascript闭包用法实例分析
Jan 23 Javascript
TypeScript 中接口详解
Jun 19 Javascript
JS使用eval()动态创建变量的方法
Jun 03 Javascript
检查表单元素的值是否为空的实例代码
Jun 16 Javascript
js Canvas实现圆形时钟教程
Sep 19 Javascript
JS只能输入正整数的简单实例
Oct 07 Javascript
利用JavaScript实现栈的数据结构示例代码
Aug 02 Javascript
使用Bootstrap和Vue实现用户信息的编辑删除功能
Oct 25 Javascript
js时间转换毫秒的实例代码
Aug 21 Javascript
jQuery实现判断滚动条滚动到document底部的方法分析
Aug 27 jQuery
解决layer.open弹出框不能获取input框的值为空的问题
Sep 10 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分页示例代码
2007/03/19 PHP
PHP 开源框架22个简单简介
2009/08/24 PHP
PHP判断变量是否为0的方法
2014/02/08 PHP
ThinkPHP做文字水印时提示call an undefined function exif_imagetype()解决方法
2014/10/30 PHP
如何通过Apache在本地配置多个虚拟主机
2020/07/29 PHP
大家未必知道的Js技巧收藏
2008/04/07 Javascript
用RadioButten或CheckBox实现div的显示与隐藏
2013/09/21 Javascript
jquery右下角弹出提示框示例代码
2013/10/08 Javascript
在百度知道团队中快速审批新成员的js脚本
2014/02/02 Javascript
js钢琴按钮波浪式图片排列效果代码分享
2015/08/26 Javascript
AngularJS服务service用法总结
2016/12/13 Javascript
javascript十六进制数字和ASCII字符之间的转换方法
2016/12/27 Javascript
js实现一键复制功能
2017/03/16 Javascript
axios学习教程全攻略
2017/03/26 Javascript
vue中路由参数传递可能会遇到的坑
2017/12/07 Javascript
Vue 中对图片地址进行拼接的方法
2018/09/03 Javascript
Nodejs实现多文件夹文件同步
2018/10/17 NodeJs
JavaScript实现选项卡效果的分析及步骤
2019/04/16 Javascript
vue实现设置载入动画和初始化页面动画效果
2019/10/28 Javascript
Element PageHeader页头的使用方法
2020/07/26 Javascript
js加减乘除精确运算方法实例代码
2021/01/17 Javascript
[01:05:41]EG vs Optic Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
在Python程序中实现分布式进程的教程
2015/04/28 Python
详解Python中的各种函数的使用
2015/05/24 Python
《Python学习手册》学习总结
2018/01/17 Python
Django如何配置mysql数据库
2018/05/04 Python
分享8个非常流行的 Python 可视化工具包
2019/06/05 Python
python绘制BA无标度网络示例代码
2019/11/21 Python
Python2与Python3的区别详解
2020/02/09 Python
大学毕业生的自我鉴定
2013/11/30 职场文书
求职信的要素有哪些呢
2013/12/26 职场文书
端午节寄语2015
2015/03/23 职场文书
出国导师推荐信
2015/03/25 职场文书
2015年绩效考核工作总结
2015/05/23 职场文书
KTV员工管理制度
2015/08/06 职场文书
公司会议开幕词
2016/03/03 职场文书