再探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 相关文章推荐
JQuery 学习笔记 选择器之四
Jul 23 Javascript
Jquery Ajax学习实例4 向WebService发出请求,返回实体对象的异步调用
Mar 16 Javascript
利用jQuery操作对象数组的实现代码
Apr 27 Javascript
jquery自定义滚动条插件示例分享
Feb 21 Javascript
javascript实现平滑无缝滚动
Aug 09 Javascript
最简单的tab切换实例代码
May 13 Javascript
Vue 多层组件嵌套二种实现方式(测试实例)
Sep 08 Javascript
基于js 字符串indexof与search方法的区别(详解)
Dec 04 Javascript
vue better scroll 无法滚动的解决方法
Jun 07 Javascript
Vue axios全局拦截 get请求、post请求、配置请求的实例代码
Nov 28 Javascript
vue实现条件叠加搜索的解决方法
May 28 Javascript
Node.js创建一个Express服务的方法详解
Jan 06 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实现的在线人员函数库
2008/04/09 PHP
php file_get_contents函数轻松采集html数据
2010/04/22 PHP
php cookies中删除的一般赋值方法
2011/05/07 PHP
php若干单维数组遍历方法的比较
2011/09/20 PHP
PHP中isset()和unset()函数的用法小结
2014/03/11 PHP
phpmyadmin中禁止外网使用的方法
2014/11/04 PHP
微信公众号开发之微信公共平台消息回复类实例
2014/11/14 PHP
PHP实现的进度条效果详解
2016/05/03 PHP
php实现小程序支付完整版
2018/10/09 PHP
PHP结合Ffmpeg快速搭建流媒体服务的实践记录
2018/10/31 PHP
PHP http请求超时问题解决方案
2020/11/13 PHP
Open and Print a Word Document
2007/06/15 Javascript
javascript 打开页面window.location和window.open的区别
2010/03/17 Javascript
js中访问html中iframe的文档对象的代码[IE6,IE7,IE8,FF]
2011/01/08 Javascript
javascript按位非运算符的使用方法
2013/11/14 Javascript
jQuery向父辈遍历的简单方法
2016/09/18 Javascript
javascript的几种写法总结
2016/09/30 Javascript
BootStrap按钮标签及基本样式
2016/11/23 Javascript
ES6学习教程之对象的扩展详解
2017/05/02 Javascript
vue项目如何刷新当前页面的方法
2018/05/18 Javascript
利用d3.js制作连线动画图与编辑器的方法实例
2019/09/05 Javascript
JS如何把字符串转换成json
2020/02/21 Javascript
JS如何实现手机端输入验证码效果
2020/05/13 Javascript
python事件驱动event实现详解
2018/11/21 Python
python 搜索大文件的实例代码
2019/07/08 Python
Python使用pyautocad+openpyxl处理cad文件示例
2019/07/11 Python
Python计算两个矩形重合面积代码实例
2019/09/16 Python
通过实例了解python property属性
2019/11/01 Python
ubuntu 18.04 安装opencv3.4.5的教程(图解)
2019/11/04 Python
个人合作协议书范本
2014/04/18 职场文书
高中学校对照检查材料
2014/08/31 职场文书
小学运动会报道稿
2014/10/04 职场文书
平遥古城导游词
2015/02/03 职场文书
远程教育集中轮训基层干部培训班学习心得体会
2016/01/09 职场文书
《文化苦旅》读后感:阅读,让人诗意地栖居在大地上
2019/12/24 职场文书
Windows Server 2012 R2服务器安装与配置的完整步骤
2022/07/15 Servers