JavaScript进阶(二)词法作用域与作用域链实例分析


Posted in Javascript onMay 09, 2020

本文实例讲述了JavaScript词法作用域与作用域链。分享给大家供大家参考,具体如下:

一、作用域

域表示的就是范围,即作用域,就是一个名字在什么地方可以使用,什么时候不能使用。想了解更多关于作用域的问题推荐阅读《你不知道的JavaScript上卷》第一章(或第一部分),从编译原理的角度说明什么是作用域。概括的说作用域就是一套设计良好的规则来存储变量,并且之后可以方便地找到这些变量。

1.1 块级作用域

在C、Java、C#等编程语言中,下面的语法报错(伪代码)

{
  var num = 123;
  {
    console.log( num );  // num => 123
   }
}
console.log( num );  //报错

1.2 JS的词法作用域

所谓的词法(代码)作用域,就是代码在编写过程中体现出来的作用范围,代码一旦写好,不用执行,作用范围就已经确定好了,这个就是所谓的词法作用域。

在JS中词法作用域的规则:

  1. 函数允许访问函数外部的数据
  2. 整个代码结构中只有函数可以限定作用域
  3. 作用规则首先使用提升规则分析
  4. 如果当前作用域中有了名字了,就不考虑外面的名字

例子1:

var num = 123;
function foo(){
  console.log( num );
}
foo();  //123

例子2:

if( false ){
  var num = 123;
}
console.log( num ); //undefined

例子3:

var num = 123;
function foo () {
  var num = 456;
  function func(){
    console.log( num );
   }
   func();
}
foo();  //456

二、作用域链

只有函数才能制造作用域结构,那么只要是代码,至少有一个作用域,即全局作用域。

凡是代码中有函数,那么这个函数就构成另一个作用域。如果函数中还有函数,那么在这个作用域中就又可以诞生一个作用域,那么将这样的所有作用域列出来,可以有一个结构:函数内指向函数外的链式结构

例如:

function f1() {
  function f2() {
  }
}
var num = 456;
function f3() {
  function f4() {
  }
}

作用域链结构与DOM树结构很相似.

2.1 绘制作用域链

步骤:

  1. 看整个全局是一条链,即顶级链,记为0级链
  2. 看全局作用域中有什么成员声明,就以方格的形式绘制到0级链上
  3. 再找函数,只有函数可以限制作用域,因此从函数中引出新链,标记为1级链
  4. 然后在每一个1级链中再次往复刚才的行为

JavaScript进阶(二)词法作用域与作用域链实例分析

2.2 变量的访问(搜索)规则

  1. 首先看变量在第几条链上,在该链上看是否有变量的定义与赋值,如果有直接使用
  2. 如果没有到上一级链上找( n - 1 级链),如果有直接使用,停止继续查找。
  3. 如果还没有在此往上找… 直到全局链(0级),还没有就是is not defined
  4. 注意,切记:同级的链不可混合查找

绘制如下程序的作用域链

function f1() {
  var num = 123;
  function f2() {
    console.log( num ); 
   }
  f2();
}
var num = 456;
f1();  //123

JavaScript进阶(二)词法作用域与作用域链实例分析

函数f1 和变量 num=456, 在0级链,而f1下又可以展开1级链,1级链上有num=123和函数f2。程序f1()调用进入左边1级链,而f1中又调用了f2函数,f2函数中console.log(num)可以看作在2级链,此时,程序会向这一条链向上查找,首先2级链没有num,向上到达1级链,刚好1级链上有num=123,所以就直接使用123,程序最后的结果就是打印123.

2.3 如何分析代码

  1. 在分析代码的时候切记从代码的运行角度上来分析,如果代码给变量赋值了,一定要标记到图中
  2. 如果代码比较复杂,可以在图中表示代码的内容,有时候还要将原型图与作用域图结合起来分析

分析如下代码:

var num = 123;
function f1() {
  console.log( num );
}
function f2(){
  var num = 456;
  f1();
}
f2();  //123

作用域链图:

JavaScript进阶(二)词法作用域与作用域链实例分析

首先把num=123,函数f1,函数f2画在0级链上。f1中只有一句console,画出一条1级链,f2也下画出1级链,链上有num=456和函数调用语句f1();

调用f2(),进入f2函数的作用域链,而在f2中又调用了f1函数,程序进入f1的作用域链,所以console.log(num)会在此链上查找是否存在num,没有,继续向上一级链查找,刚好在0级链上找到了num=123,所以f1函数中的console.log(num)就是123.

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题:《JavaScript常用函数技巧汇总》、《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
ajax 缓存 问题 requestheader
Aug 01 Javascript
jquery radio 操作代码
Mar 16 Javascript
ASP.NET jQuery 实例2 (表单中使用回车在TextBox之间向下移动)
Jan 13 Javascript
jQuery.buildFragment使用方法及思路分析
Jan 07 Javascript
node.js中的fs.fchownSync方法使用说明
Dec 16 Javascript
BootStrap模态框和select2合用时input无法获取焦点的解决方法
Sep 01 Javascript
详解vue-cil和webpack中本地静态图片的路径问题解决方案
Sep 27 Javascript
webpack-dev-server远程访问配置方法
Feb 22 Javascript
如何换个角度使用VUE过滤器详解
Sep 11 Javascript
JQuery 实现文件下载的常用方法分析
Oct 29 jQuery
mapboxgl实现带箭头轨迹线的代码
Jan 04 Javascript
vue-router路由懒加载及实现的3种方式
Feb 28 Vue.js
JavaScript进阶(一)变量声明提升实例分析
May 09 #Javascript
JavaScript面向对象核心知识与概念归纳整理
May 09 #Javascript
Vue列表如何实现滚动到指定位置样式改变效果
May 09 #Javascript
Node.js API详解之 util模块用法实例分析
May 09 #Javascript
Vue实现PC端靠边悬浮球的代码
May 09 #Javascript
Auto.JS实现抖音刷宝等刷视频app,自动点赞,自动滑屏,自动切换视频功能
May 08 #Javascript
基于JavaScript实现表格隔行换色
May 08 #Javascript
You might like
用PHP发电子邮件
2006/10/09 PHP
PHP三元运算的2种写法代码实例
2014/05/12 PHP
php递归函数三种实现方法及如何实现数字累加
2015/08/07 PHP
对比PHP对MySQL的缓冲查询和无缓冲查询
2016/07/01 PHP
php对xml文件的增删改查操作实现方法分析
2017/05/19 PHP
PHP让网站移动访问更加友好方法
2019/02/14 PHP
漂亮的widgets,支持换肤和后期开发新皮肤
2007/04/23 Javascript
js动态创建上传表单通过iframe模拟Ajax实现无刷新
2014/02/20 Javascript
js实现简单的验证码
2015/12/25 Javascript
javascript使用Promise对象实现异步编程
2016/03/01 Javascript
JavaScript蒙板(model)功能的简单实现代码
2016/08/04 Javascript
Vue.JS入门教程之自定义指令
2016/12/08 Javascript
jQuery 全选 全不选 事件绑定的实现代码
2017/01/23 Javascript
vue使用mint-ui实现下拉刷新和无限滚动的示例代码
2017/11/06 Javascript
vue+webpack中配置ESLint
2018/11/07 Javascript
玩转Koa之koa-router原理解析
2018/12/29 Javascript
JS简单表单验证功能完整示例
2020/01/26 Javascript
详解JavaScript中精度失准问题及解决方法
2020/02/04 Javascript
[20:46]Ti4循环赛第三日VG vs DK
2014/07/12 DOTA
[07:39]第一届亚洲邀请赛回顾视频
2017/02/14 DOTA
python读写文件操作示例程序
2013/12/02 Python
Python random模块用法解析及简单示例
2017/12/18 Python
PyQt5实现类似别踩白块游戏
2019/01/24 Python
numpy库与pandas库axis=0,axis= 1轴的用法详解
2019/05/27 Python
python字符串替换第一个字符串的方法
2019/06/26 Python
django xadmin 管理器常用显示设置方式
2020/03/11 Python
通过python 执行 nohup 不生效的解决
2020/04/16 Python
物流管理专业大学生自荐信
2013/10/04 职场文书
哈理工毕业生的求职信
2013/12/22 职场文书
学术会议邀请函范文
2014/01/22 职场文书
商业计算机应用专业自荐书
2014/06/09 职场文书
机关作风建设整改方案
2014/10/27 职场文书
悬崖上的金鱼姬观后感
2015/06/15 职场文书
干部考核工作总结
2015/08/12 职场文书
优质服务心得体会(共4篇)
2016/01/22 职场文书
戴尔Win11系统no bootable devices found解决教程
2022/09/23 数码科技