详解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 相关文章推荐
JS 常用校验函数
Mar 26 Javascript
深入了解javascript中的prototype与继承
Apr 14 Javascript
JavaScript中的条件判断语句使用详解
Jun 03 Javascript
JS与jQ读取xml文件的方法
Dec 08 Javascript
Bootstrap实现响应式导航栏效果
Dec 28 Javascript
AngularJs上传前预览图片的实例代码
Jan 20 Javascript
angularjs+bootstrap菜单的使用示例代码
Mar 07 Javascript
JS判断微信扫码的方法
Aug 07 Javascript
JavaScript创建对象的常用方式总结
Aug 10 Javascript
Bootstrap4 gulp 配置详解
Jan 06 Javascript
微信小程序 checkbox使用实例解析
Sep 09 Javascript
微信小程序canvas动态时钟
Oct 22 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
老生常谈文本文件和二进制文件的区别
2017/02/27 PHP
浅谈php中变量的数据类型判断函数
2017/03/04 PHP
Yii支持多域名cors原理的实现
2018/12/05 PHP
extjs form textfield的隐藏方法
2008/12/29 Javascript
超链接的禁用属性Disabled使用示例
2014/07/31 Javascript
JS实现双击编辑可修改状态的方法
2015/08/14 Javascript
jquery实现的仿天猫侧导航tab切换效果
2015/08/24 Javascript
理解JavaScript表单的基础知识
2016/01/25 Javascript
jQuery Easyui 验证两次密码输入是否相等
2016/05/13 Javascript
谈谈JS中常遇到的浏览器兼容问题和解决方法
2016/12/17 Javascript
Vue监听数组变化源码解析
2017/03/09 Javascript
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
2018/04/26 jQuery
微信小程序实现页面浮动导航
2019/01/28 Javascript
JS中的算法与数据结构之字典(Dictionary)实例详解
2019/08/20 Javascript
vue实现浏览器全屏展示功能
2019/11/27 Javascript
vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解
2020/12/15 Vue.js
[16:56]heroes英雄教学 司夜刺客
2014/09/18 DOTA
[00:32]2018DOTA2亚洲邀请赛VG出场
2018/04/03 DOTA
[57:29]Alliance vs KG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/17 DOTA
跟老齐学Python之眼花缭乱的运算符
2014/09/14 Python
非递归的输出1-N的全排列实例(推荐)
2017/04/11 Python
几种实用的pythonic语法实例代码
2018/02/24 Python
python 遍历列表提取下标和值的实例
2018/12/25 Python
pandas读取csv文件提示不存在的解决方法及原因分析
2020/04/21 Python
python PyAUtoGUI库实现自动化控制鼠标键盘
2020/09/09 Python
Django用户认证系统如何实现自定义
2020/11/12 Python
CSS3中currentColor关键字的妙用
2016/02/27 HTML / CSS
英国最大的奢侈珠宝和手表网站:C W Sellors
2017/02/10 全球购物
世界上最好的足球商店:Unisport
2019/03/02 全球购物
应届生人事助理求职信
2013/11/09 职场文书
高中生职业生涯规划书
2014/02/24 职场文书
运输服务质量承诺书
2014/03/27 职场文书
单位绩效考核方案
2014/05/11 职场文书
医院反腐倡廉演讲稿
2014/09/16 职场文书
怎样写家长意见
2015/06/04 职场文书
基于Redis延迟队列的实现代码
2021/05/13 Redis