深入浅析javascript中的作用域(推荐)


Posted in Javascript onJuly 19, 2016

所谓的作用域,可以简单理解为一个可以读、写的范围(区域),有些js经验的同学可能会说:"js没有块级作用域",js除了全局作用域外,只有函数可以创建作用域。作用域的一个好处就是可以隔离变量。

我们通过一些例子来帮助我们理解js中的作用域。

alert(a);
 var a = 1;

如果对作用域一点不了解的同学可能会说 alert的是1或者报错;但实际上是undefined;

说到这里,我们首先说一下js逐行解析代码之前做的一些准备工作,

js在逐行读代码之前,会做一些“预解析”工作,会先提前找到一些”小东西”,当然”js解析器“不会随便找一些数据的,它会根据var,function,参数来找。

”js解析器“它比较”懒“,在正式运行代码之前都会给var声明的变量赋值为undefined,也就是var a = undefined;会把整个函数看作一个代码块,不去管里边有多少代码。参数等到后边例子中会说。

当所有准备工作都做好后,“JS解析器”就开始逐行执行代码了,现在我们来分析开始的这个例子就很容易明白为什么是undefined了。

再来看下边这个例子

alert(a);
 var a = 1;
 alert(a);
 var a = 2;
 alert(a);

我们来一点点分析这个

首先 ”预解析“: 解析器会找var

读到第二行时 a = undefined;

读到第四行时 依然 a = undefined;

正式逐行执行代码:

第一行 alert:undefined 

第二行 a = 1;

第三行 alert:1;

第五行 alert:2

接着看下边这个例子

alert(a); 
 var a = 1;
 alert(a); 
 function a (){ alert(2); }
 alert(a); 
 var a = 3; 
 alert(a); 
 function a (){ alert(4); }
 alert(a);

我们依然来一点点分析这个

首先 ”预解析“: 解析器会找var function;

读到第二行时 a = undefined;

读到第四行时 a = function a (){ alert(2);} //所有的函数,在正式运行代码之前,都是整个函数块;变量遇到重名的,只留一个变量,如果变量和函数重名,就只留下函数。

读到第六行时,a = function a (){ alert(2);}

读到第八行时,a = function a (){ alert(4);}

正式逐行执行代码:

第一行 alert: function a (){ alert(4);} 

第二行 a = 1; //表达式可以修改预解析的值!

第三行 alert:1;

第四行 函数没有调用,略过;

第五行 alert:1;

第六行 a = 3;

第七行 alert:3

第八行 函数没有调用,略过;

第九行 alert:3

如图所示:

深入浅析javascript中的作用域(推荐)

继续看例子:

var a = 1;
function fn1(){
 alert(a); //undefined   
 var a = 2;
}
fn1();
alert(a); //1

首先 ”预解析“: 解析器会找var function

读到第一行时 a = undefined;

读到第二行时 fn1 = function fn1 (){alert(2);var a = 2;}

正式逐行执行代码: 第一行 a = 1;

第六行 函数调用,进入函数作用域 在函数作用域内依旧是先预解析,再逐行执行

函数内预解析:a = undefined;

执行:alert:undefined;

a = 2; //此时的a仅为函数作用域中的a,不会影响全局中的a

函数执行完毕,回到全局作用域;

第七行 alert:1;

继续:

var a = 1;
function fn1(){
 alert(a); //1  
 a = 2;
}
fn1();
alert(a); //2

这个例子上边那个例子唯一的区别就是函数中的a没有var,只分析其中关键的地方

在函数作用域中 第三行alert(a),由于函数中没有var a,所以"解析器"会到函数的作用域的上一级作用域去寻找a(作用域上下级关系的确定就看函数是在哪个作用域下创建的,在哪个作用域下创建,就是哪个作用域的下级),此时函数的上一级是全局作用域,在全局作用域中,a = 1,所以此时第三行 alert:1,接着第四行,a = 2赋值,依然是函数作用域中没有a, 所以在上一级作用域,也就是全局作用域中找到a,修改全局作用域中的a, 所以会使全局作用域中的a = 2, 因此第七行 alert:2;

这点要理解清楚,注意有无var的区别。

接着来:

var a = 1;
 function fn1(a){
 alert(a); //undefined 
 a = 2;
 }
 fn1();
 alert(a); // 1

这个例子和上一个的区别就是多了个参数,参数的作用相当于局部变量,也就是在函数中预解析会有var a = undefined,所以第三行 alert:undefined,第四行 a = 2 改的是函数作用域中的a,不影响全局中的a,第七行alert:1;

接着:

var a = 1;
function fn1(a){
alert(a); // 1
a = 2;
}
fn1(a);
alert(a); // 1

这个例子又与上一个有些区别,在第六行函数调用时传了个实参进去,第六行函数实参的a是全局变量a = 1的1,函数执行时,第二行 a = 1,所以第三行alert:1,第七行alert:1。

注意这几个例子之间的区别,别混淆了。

再来一个:

var a = 1;
function en(){
var a = 2;
fn();
}
function fn(){
alert(a); //1
}
en();

fn中的a未声明,要到创建这个函数的那个作用域中取值——是“创建”,而不是“调用”这个函数的作用域中。

PS:JavaScript中的作用域和上下文概念

javascript中的作用域(scope)和上下文(context)是这门语言的独到之处,这部分归功于他们带来的灵活性。每个函数有不同的变量上下文和作用域。这些概念是javascript中一些强大的设计模式的后盾。然而这也给开发人员带来很大困惑。下面全面揭示了javascript中的上下文和作用域的不同,以及各种设计模式如何使用他们。

上下文 vs 作用域

首先需要澄清的问题是上下文和作用域是不同的概念。多年来我注意到许多开发者经常将这两个术语混淆,错误的将一个描述为另一个。平心而论,这些术语变得非常混乱不堪。

每个函数调用都有与之相关的作用域和上下文。从根本上说,范围是基于函数(function-based)而上下文是基于对象(object-based)。换句话说,作用域是和每次函数调用时变量的访问有关,并且每次调用都是独立的。上下文总是关键字 this 的值,是调用当前可执行代码的对象的引用。

以上所述是小编给大家介绍的javascript中的作用域(推荐),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js实现iframe动态调整高度的代码
Jan 06 Javascript
实现连缀调用的map方法(prototype)
Aug 05 Javascript
javascript中IE浏览器不支持NEW DATE()带参数的解决方法
Mar 01 Javascript
js实现屏蔽默认快捷键调用自定义事件示例
Jun 18 Javascript
jquery移动节点实例
Jan 14 Javascript
JS仿iGoogle自定义首页模块拖拽特效的方法
Feb 13 Javascript
JS实现左右拖动改变内容显示区域大小的方法
Oct 13 Javascript
实例讲解JavaScript中call、apply、bind方法的异同
Sep 13 Javascript
js获取当前周、上一周、下一周日期
Mar 19 Javascript
vue 引入公共css文件的简单方法(推荐)
Jan 20 Javascript
EasyUI 数据表格datagrid列自适应内容宽度的实现
Jul 18 Javascript
vue项目支付功能代码详解
Feb 18 Vue.js
javascript弹出带文字信息的提示框效果
Jul 19 #Javascript
总结在前端排序中遇到的问题
Jul 19 #Javascript
ECMAScript6快速入手攻略
Jul 18 #Javascript
JavaScript读二进制文件并用ajax传输二进制流的方法
Jul 18 #Javascript
JavaScript暂停和继续定时器的实现方法
Jul 18 #Javascript
jquery+CSS3实现3D拖拽相册效果
Jul 18 #Javascript
完美实现八种js焦点轮播图(下篇)
Apr 20 #Javascript
You might like
PHP Mysql编程之高级技巧
2008/08/27 PHP
php连接数据库代码应用分析
2011/05/29 PHP
基于PHP常用字符串的总结(待续)
2013/06/07 PHP
php7基于递归实现删除空文件夹的方法示例
2017/06/15 PHP
PHP学习记录之数组函数
2018/06/01 PHP
jQuery 打造动态下滑菜单实现说明
2010/04/15 Javascript
javascript 广告后加载,加载完页面再加载广告
2010/11/25 Javascript
JavaScript/jQuery 表单美化插件小结
2012/02/14 Javascript
火狐下table中创建form导致两个table之间出现空白
2013/09/02 Javascript
js和jquery中循环的退出和继续下一个循环
2014/09/03 Javascript
nodejs教程之环境安装及运行
2014/11/21 NodeJs
JavaScript中的pow()方法使用详解
2015/06/15 Javascript
vue webpack打包优化操作技巧
2018/02/22 Javascript
react 国际化的实现代码示例
2018/09/14 Javascript
使用 electron 实现类似新版 QQ 的登录界面效果(阴影、背景动画、窗体3D翻转)
2018/10/23 Javascript
Node爬取大批量文件的方法示例
2019/06/28 Javascript
如何换个角度使用VUE过滤器详解
2019/09/11 Javascript
微信小程序事件流原理解析
2019/11/27 Javascript
使用pkg打包ThinkJS项目的方法步骤
2019/12/30 Javascript
微信小程序swiper实现文字纵向轮播提示效果
2020/01/21 Javascript
electron 如何将任意资源打包的方法步骤
2020/04/16 Javascript
[03:32]2014DOTA2西雅图邀请赛 CIS外卡赛赛前black专访
2014/07/09 DOTA
Python中py文件转换成exe可执行文件的方法
2019/06/14 Python
python实现QQ批量登录功能
2019/06/19 Python
利用python求积分的实例
2019/07/03 Python
python的列表List求均值和中位数实例
2020/03/03 Python
python右对齐的实例方法
2020/07/05 Python
如何在Python3中使用telnetlib模块连接网络设备
2020/09/21 Python
实例讲解CSS3中的border-radius属性
2015/08/18 HTML / CSS
css3实现圆锥渐变conic-gradient效果
2020/02/12 HTML / CSS
2014年公司植树节活动方案
2014/03/04 职场文书
小班幼儿评语大全
2014/04/30 职场文书
职业规划实施方案
2014/06/10 职场文书
民主生活会对照检查材料
2014/09/22 职场文书
2014年行风建设工作总结
2014/12/01 职场文书
2015年外联部工作总结
2015/04/03 职场文书