再探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 相关文章推荐
js CSS操作方法集合
Oct 31 Javascript
De facto standard 世界上不可思议的事实标准
Aug 29 Javascript
JQuery中getJSON的使用方法
Dec 13 Javascript
JavaScript实现数字数组按照倒序排列的方法
Apr 06 Javascript
javascript断点调试心得分享
Apr 23 Javascript
BootStrap中Datepicker控件带中文的js文件
Aug 10 Javascript
VueRouter导航守卫用法详解
Dec 25 Javascript
layui实现动态和静态分页
Apr 28 Javascript
区别JavaScript函数声明与变量声明
Sep 12 Javascript
vue实现微信分享链接添加动态参数的方法
Apr 29 Javascript
Nuxt默认模板、默认布局和自定义错误页面的实现
May 11 Javascript
vue 扩展现有组件的操作
Aug 14 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实现 使用PHP数组内部指针操作函数
2010/10/12 PHP
PHP FOR MYSQL 代码生成助手(根据Mysql里的字段自动生成类文件的)
2011/07/23 PHP
PHP闭包(Closure)使用详解
2013/05/02 PHP
PHP error_log()将错误信息写入一个文件(定义和用法)
2013/10/25 PHP
PHP5.5新特性之yield理解与用法实例分析
2019/01/11 PHP
laravel 查询数据库获取结果实现判断是否为空
2019/10/24 PHP
jquery简单体验
2007/01/10 Javascript
JavaScript 继承详解(四)
2009/07/13 Javascript
远离JS灾难css灾难之 js私有函数和css选择器作为容器
2011/12/11 Javascript
JavaScript(js)设置默认输入焦点(focus)
2012/12/28 Javascript
jQuery中ajax的get()方法用法实例
2014/12/26 Javascript
jQuery中Ajax的load方法详解
2015/01/14 Javascript
angularjs创建弹出框实现拖动效果
2020/08/25 Javascript
JavaScript Math 对象常用方法总结
2016/04/28 Javascript
JavaScript暂停和继续定时器的实现方法
2016/07/18 Javascript
简易的JS计算器实现代码
2016/10/18 Javascript
bootstrap快速制作后台界面
2016/12/05 Javascript
JS大坑之19位数的Number型精度丢失问题详解
2019/04/22 Javascript
python学习之面向对象【入门初级篇】
2017/01/21 Python
Python之读取TXT文件的方法小结
2018/04/27 Python
深入浅析Python中的迭代器
2019/06/04 Python
Selenium+Python 自动化操控登录界面实例(有简单验证码图片校验)
2019/06/28 Python
Python搭建Spark分布式集群环境
2019/07/05 Python
flask框架路由常用定义方式总结
2019/07/23 Python
Python字符串中添加、插入特定字符的方法
2019/09/10 Python
Python计算机视觉里的IOU计算实例
2020/01/17 Python
Python调用Redis的示例代码
2020/11/24 Python
CSS3实现时间轴特效
2020/11/02 HTML / CSS
AmazeUI 导航条的实现示例
2020/08/14 HTML / CSS
美国沃尔玛网上超市:Walmart
2020/08/14 全球购物
物流专业自荐信
2014/05/23 职场文书
政风行风建设整改方案
2014/10/27 职场文书
优秀党员个人总结
2015/02/14 职场文书
新生儿未入户证明
2015/06/23 职场文书
毕业论文答辩演讲稿
2015/06/23 职场文书
纯CSS3实现div按照顺序出入效果
2021/07/15 HTML / CSS