详解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 相关文章推荐
Ext 表单布局实例代码
Apr 30 Javascript
javascript闭包的高级使用方法实例
Jul 04 Javascript
JavaScript中的6种运算符总结
Oct 16 Javascript
打造自己的jQuery插件入门教程
Sep 23 Javascript
js中创建对象的几种方式
Feb 05 Javascript
微信小程序 获取二维码实例详解
Jun 23 Javascript
详解vue.js移动端导航navigationbar的封装
Jul 05 Javascript
VUE 实现滚动监听 导航栏置顶的方法
Sep 11 Javascript
ES6中Symbol、Set和Map用法详解
Aug 20 Javascript
JS自定义对象创建与简单使用方法示例
Jan 15 Javascript
微信小程序拖拽排序列表的示例代码
Jul 08 Javascript
vue中activated的用法
Jan 03 Vue.js
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
php mssql 分页SQL语句优化 持续影响
2009/04/26 PHP
由php的call_user_func传reference引发的思考
2010/07/23 PHP
php二维数组用键名分组相加实例函数
2013/11/06 PHP
zf框架的db类select查询器join链表使用示例(zend框架)
2014/03/14 PHP
php根据用户名和手机号查询是否存在手机号码
2017/02/16 PHP
PHP获取当前系统时间的方法小结
2018/10/03 PHP
js的event详解。
2006/09/06 Javascript
告诉大家什么是JSON
2008/06/10 Javascript
javascript判断用户浏览器插件安装情况的代码
2011/01/01 Javascript
用Javascript评估用户输入密码的强度(Knockout版)
2011/11/30 Javascript
JS中toFixed()方法引起的问题如何解决
2012/11/20 Javascript
解析JavaScript中delete操作符不能删除的对象
2013/12/03 Javascript
Lua表达式和控制结构学习笔记
2014/12/15 Javascript
不使用ajax实现无刷新提交表单
2014/12/21 Javascript
js带前后翻页的图片切换效果代码分享
2015/09/08 Javascript
JavaScript 数据类型详解
2017/03/13 Javascript
vue组件学习教程
2017/09/09 Javascript
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
2018/01/25 jQuery
详解javascript脚本何时会被执行
2021/02/05 Javascript
Python实现二叉堆
2016/02/03 Python
详解Python中的测试工具
2019/06/09 Python
Python批量查询关键词微信指数实例方法
2019/06/27 Python
Python3.7 读取 mp3 音频文件生成波形图效果
2019/11/05 Python
Centos7下源码安装Python3 及shell 脚本自动安装Python3的教程
2020/03/07 Python
Python用dilb提取照片上人脸的示例
2020/10/26 Python
matplotlib交互式数据光标实现(mplcursors)
2021/01/13 Python
Edwaybuy西班牙:小米在线商店
2019/12/04 全球购物
乌克兰珠宝大卖场:Zlato.ua
2020/09/27 全球购物
工程项目经理岗位职责
2013/12/15 职场文书
2014信息技术专业毕业生自我评价
2014/01/17 职场文书
岗位竞聘演讲稿范文
2014/04/24 职场文书
股指期货心得体会
2014/09/13 职场文书
2014年计划生育工作总结
2014/11/14 职场文书
2014财务部年度工作总结
2014/12/08 职场文书
世界文化遗产导游词
2015/02/13 职场文书
Pytorch 统计模型参数量的操作 param.numel()
2021/05/13 Python