再探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 相关文章推荐
IE8 引入跨站数据获取功能说明
Jul 22 Javascript
jQuery 瀑布流 浮动布局(一)(延迟AJAX加载图片)
May 23 Javascript
HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
Nov 25 Javascript
jQuery增加和删除表格项目及实现表格项目排序的方法
May 30 Javascript
html5+CSS 实现禁止IOS长按复制粘贴功能
Dec 28 Javascript
Vue2.0实现购物车功能
Jun 05 Javascript
解决Layui数据表格中checkbox位置不居中的方法
Aug 15 Javascript
JS原型与继承操作示例
May 09 Javascript
jQuery事件委托代码实践详解
Jun 21 jQuery
ES6 Array常用扩展的应用实例分析
Jun 26 Javascript
基于vue实现圆形菜单栏组件
Jul 05 Javascript
vue2.x 通过后端接口代理,获取qq音乐api的数据示例
Oct 30 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 smarty模版引擎中的缓存应用
2009/12/02 PHP
php判断GIF图片是否为动画的方法
2020/09/04 PHP
基于php的微信公众平台开发入门实例
2015/04/15 PHP
ThinkPHP实现的rsa非对称加密类示例
2018/05/29 PHP
javascript简单性能问题及学习笔记
2014/02/04 Javascript
extJS中常用的4种Ajax异步提交方式
2014/03/07 Javascript
jQuery打印图片pdf、txt示例代码
2014/07/22 Javascript
使用angular写一个hello world
2015/01/23 Javascript
Bootstrap Table的使用总结
2016/10/08 Javascript
原生JS查找元素的方法(推荐)
2016/11/22 Javascript
详解AngularJS2 Http服务
2017/06/26 Javascript
jquery+css实现下拉列表功能
2017/09/03 jQuery
jQuery实现的简单无刷新评论功能示例
2017/11/08 jQuery
微信开发之企业付款到银行卡接口开发的示例代码
2018/09/18 Javascript
nodejs中实现用户注册路由功能
2019/05/20 NodeJs
JS回调函数原理与用法详解【附PHP回调函数】
2019/07/20 Javascript
[03:26]回顾2015国际邀请赛中国区预选赛
2015/06/09 DOTA
Python多线程、异步+多进程爬虫实现代码
2016/02/17 Python
Python使用SocketServer模块编写基本服务器程序的教程
2016/07/12 Python
Collatz 序列、逗号代码、字符图网格实例
2017/06/22 Python
python求解数组中两个字符串的最小距离
2018/09/27 Python
TensorFlow查看输入节点和输出节点名称方式
2020/01/04 Python
详解pandas apply 并行处理的几种方法
2021/02/24 Python
HTML5引入的新数组TypedArray介绍
2012/12/24 HTML / CSS
婴儿地球:Baby Earth
2018/12/25 全球购物
澳大利亚领先的亚麻品牌:Bed Threads
2019/12/16 全球购物
乌克兰机票、铁路和巴士票、酒店搜索、保险:Tickets.ua
2020/01/11 全球购物
机关保密承诺书
2014/06/03 职场文书
材料专业大学毕业生自荐书
2014/07/02 职场文书
学生穿着不得体检讨书
2014/10/12 职场文书
2014年设备管理工作总结
2014/11/26 职场文书
音乐教师个人工作总结
2015/02/06 职场文书
2015年党员创先争优公开承诺书
2015/04/27 职场文书
2015人事行政工作总结范文
2015/05/21 职场文书
2015年幼儿园师德师风建设工作总结
2015/10/23 职场文书
5分钟教你docker安装启动redis全教程(全新方式)
2021/05/29 Redis