详解js的作用域、预解析机制


Posted in Javascript onFebruary 05, 2018

虽然,ES6在我们工作中应用得越来越广泛,但是还是很多项目保留着ES5的写法,所以,今天,带着大家重新巩固下ES5下的作用域及预解析机制。

概念:

作用域:域,指的是一个空间、范围、区域,作用指的是在域内可进行读写操作。一个变量的作用域是程序源代码中定义的这个变量的区域。

在ES5中,只存在全局和函数级作用域,在ES6中,引入了块级作用域,js的预解析机制大概分为两个过程:预解析和自上而下逐行解读

预解析:js解析器会先把var定义的变量、function、参数等一些东西存储进仓库里面(内存)。变量var在正式运行之前,都赋值为undefined,function函数在运行之前,就是整个函数块

逐行解读

表达式=、+、-、*、/、++、--、!、%.....number()、参数都可以赋值

遇到重名的,只留下一个,变量和函数重名,函数优先级高于变量,只留下函数

函数调用(函数是一个作用域,遇到作用域都会按照先进行预解析,然后逐行解读的过程执行),先局部找参数,局部找不到就自下向上找(作用域链)

概念扯了一大段,估计初学者还是有点晕乎乎,老司机就可以提前下车了,接下来,咋们举几个小栗子,结合上面的理论,深入理解。

实践

例1:

alert(a); //error: a is not defined
a = 3;

分析:

预解析

上面说过,预解析时只会把var 、 function 、参数等存储起来,所以:

整个作用域没有找到var function 参数

逐行解读

预解析后,内存中存在a且被赋值了underfind整个变量,所有,代码执行过程中程序直接报错。

例2:

alert(a); //undefined
var a = 3;

分析:

预解析

上面说过,预解析时只会把var 、 function 、参数等存储起来,所以:

执行到第二行时,a 的值是未定义。

逐行解读

第一行:预解析后,内存中存在a且被赋值了underfined

例3:

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

分析:

域解析

上面说过,预解析时只会把var 、 function 、参数等存储起来,所以:

执行到第二行时,a 的值是未定义。

执行到第四行时,a 的值是函数本身,也就是function a(){alert(2);}。

执行到第六行时,a 的值还是第四行时的值,也就是function a(){alert(2);},因为函数的优先级比变量高。

执行到第八行时,a 的值就变成了function a(){alert(4);} ,因为当两个函数重名时,遵循代码从上往下执行。

逐行解读

预解析完成之后,就是代码逐行执行了,

第一行:会弹出function a(){alert(4);} ,因为预解析完成之后,被存进内存的a 的值就是function a(){alert(4);}

第二行:第二行里有表达式,a 被赋了一个新的值1 表达式会改变变量的值。表达式可以改变预解析的值。

第三行:a现在被赋值为1,所有会弹出1

第四行:只是函数的声明,并没有用到表达式,而且也没有函数的调用,所以不会改变a 的值。

第五行:因为a的值没有变化,所以还是1

第六行:使用了表达式,a 被赋了一个新的值3

第七行:会弹出3

第八行:函数的声明,不会改变a 的值。

第九行:a的值没有改变,所以还是3

通过上面的栗子,相信大家应该对变量作用域的预解析过程有一定的了解了,接下来,咋们再举几个函数作用域的栗子

例4:

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

例5:

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

例6:

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

例7:

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

这几个栗子想必不用在一步步分析吧,不过就一点小改动,可能结果就截然不同,所以,大家还是需要仔细琢磨下。

Javascript 相关文章推荐
验证javascript中Object和Function的关系的三段简单代码
Jun 27 Javascript
JavaScript(js)设置默认输入焦点(focus)
Dec 28 Javascript
Jquery封装tab自动切换效果的具体实现
Jul 13 Javascript
js获取当前页面路径示例讲解
Jan 08 Javascript
javascript伸缩型菜单实现代码
Nov 16 Javascript
Bootstrap每天必学之警告框插件
Apr 26 Javascript
Javascript必知必会(四)js类型转换
Jun 08 Javascript
js实现导航吸顶效果
Feb 24 Javascript
简单的Vue SSR的示例代码
Jan 12 Javascript
vue实现的仿淘宝购物车功能详解
Jan 27 Javascript
简述Vue中容易被忽视的知识点
Dec 09 Javascript
Node.js 中如何收集和解析命令行参数
Jan 08 Javascript
Vue使用枚举类型实现HTML下拉框步骤详解
Feb 05 #Javascript
jQuery实现动态显示select下拉列表数据的方法
Feb 05 #jQuery
详解vue静态资源打包中的坑与解决方案
Feb 05 #Javascript
理解Koa2中的async&await的用法
Feb 05 #Javascript
zTree 树插件实现全国五级地区点击后加载的示例
Feb 05 #Javascript
使用vue如何构建一个自动建站项目
Feb 05 #Javascript
在 webpack 中使用 ECharts的实例详解
Feb 05 #Javascript
You might like
使用sockets:从新闻组中获取文章(二)
2006/10/09 PHP
PHP时间戳与日期之间转换的实例介绍
2013/04/19 PHP
深入PHP操作MongoDB的技术总结
2013/06/02 PHP
输入值/表单提交参数过滤有效防止sql注入的方法
2013/12/25 PHP
php给一组指定关键词添加span标签的方法
2015/03/31 PHP
laravel项目利用twemproxy部署redis集群的完整步骤
2018/05/11 PHP
PHP微信支付结果通知与回调策略分析
2019/01/10 PHP
php use和include区别总结
2019/10/13 PHP
jQuery示例收集
2010/11/05 Javascript
StringTemplate遇见jQuery冲突的解决方法
2011/09/22 Javascript
JS调用页面表格导出excel示例代码
2014/03/18 Javascript
JavaScript获取路径设计源码
2014/05/22 Javascript
node.js中的fs.createReadStream方法使用说明
2014/12/17 Javascript
jQuery中$.each使用详解
2015/01/29 Javascript
js简单倒计时实现代码
2016/04/30 Javascript
jQuery处理XML文件的几种方法
2016/06/14 Javascript
解决ie img标签内存泄漏的问题
2017/10/13 Javascript
Js判断H5上下滑动方向及滑动到顶部和底部判断的示例代码
2017/11/15 Javascript
js 实现复选框只能选择一项的示例代码
2018/01/23 Javascript
vue 利用路由守卫判断是否登录的方法
2018/09/29 Javascript
JS数组求和的常用方法实例小结
2019/01/07 Javascript
Vue 中文本内容超出规定行数后展开收起的处理的实现方法
2019/04/28 Javascript
详解JavaScript中的坐标和距离
2019/05/27 Javascript
简单实现节流函数和防抖函数过程解析
2019/10/08 Javascript
python简单分割文件的方法
2015/07/30 Python
浅析Python中的getattr(),setattr(),delattr(),hasattr()
2016/06/14 Python
美国校园市场:OCM
2017/06/08 全球购物
我的珠宝盒:Ma boîte à bijoux
2019/08/27 全球购物
建筑设计师岗位职责
2013/11/18 职场文书
财务会计应届生求职信
2013/11/24 职场文书
物流仓管员工作职责
2014/01/06 职场文书
铅球加油稿100字
2014/09/26 职场文书
质监局领导班子对照检查材料思想汇报
2014/09/27 职场文书
党支部审查意见
2015/06/02 职场文书
煤矿安全生产工作总结
2015/08/13 职场文书
Nginx如何配置多个服务域名解析共用80端口详解
2022/09/23 Servers