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 相关文章推荐
一行代码告别document.getElementById
Jun 01 Javascript
理解jQuery stop()方法
Nov 21 Javascript
JavaScript在浏览器标题栏上显示当前日期和时间的方法
Mar 19 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐)
Jun 23 Javascript
javascript中setAttribute兼容性用法分析
Dec 12 Javascript
javascript容错处理代码(屏蔽js错误)
Jan 20 Javascript
基于js粘贴事件paste简单解析以及遇到的坑
Sep 07 Javascript
Angular实现较为复杂的表格过滤,删除功能示例
Dec 23 Javascript
vue-test-utils初使用详解
May 23 Javascript
JS实现使用POST方式发送请求
Aug 30 Javascript
JS控制下拉列表左右选择实例代码
May 08 Javascript
vue 图片裁剪上传组件的实现
Nov 12 Javascript
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
单点登录 Ucenter示例分析
2013/10/29 PHP
PHP微信支付实例解析
2016/07/22 PHP
利用Laravel事件系统如何实现登录日志的记录详解
2017/05/20 PHP
javascript replace方法与正则表达式
2008/02/19 Javascript
javascript:void(0)的真正含义实例分析
2008/08/20 Javascript
仿163填写邮件地址自动显示下拉(无优化)
2008/11/05 Javascript
模仿百度三维地图的js数据分享
2011/05/12 Javascript
js循环改变div颜色具体方法
2013/06/25 Javascript
jQuery如何封装输入框插件
2016/08/19 Javascript
有关suggest快速删除后仍然出现下拉列表的bug问题
2016/12/02 Javascript
vue实现提示保存后退出的方法
2018/03/15 Javascript
详解使用create-react-app添加css modules、sasss和antd
2018/07/31 Javascript
微信小程序获取地理位置及经纬度授权代码实例
2019/09/18 Javascript
[02:23]DOTA2英雄基础教程 幻影长矛手
2013/12/09 DOTA
[12:51]71泪洒现场!是DOTA2让经典重现
2014/03/24 DOTA
[49:30]DOTA2-DPC中国联赛正赛 Dragon vs Dynasty BO3 第二场 3月4日
2021/03/11 DOTA
Python中的time模块与datetime模块用法总结
2016/06/30 Python
分享vim python缩进等一些配置
2018/07/02 Python
Django开发的简易留言板案例详解
2018/12/04 Python
python pandas生成时间列表
2019/06/29 Python
python 实现创建文件夹和创建日志文件的方法
2019/07/07 Python
Jupyter加载文件的实现方法
2020/04/14 Python
python网络爬虫实现发送短信验证码的方法
2021/02/25 Python
HTML5中的进度条progress元素简介及兼容性处理
2016/06/02 HTML / CSS
荷兰和比利时时尚鞋店:Van Dalen
2018/04/23 全球购物
Raffaello Network西班牙:意大利拉斐尔时尚购物网
2019/03/12 全球购物
SQL Server提供的3种恢复模型都是什么? 有什么区别?
2012/05/13 面试题
了解AppleShare protocol(AppleShare协议)吗
2015/08/28 面试题
竞选班长自荐书范文
2014/03/09 职场文书
石油工程专业毕业生求职信
2014/04/13 职场文书
中职毕业生自我鉴定范文(3篇)
2014/09/28 职场文书
2019年怎样写好导游词?
2019/07/02 职场文书
正能量励志演讲稿三分钟(范文)
2019/07/11 职场文书
导游词之秦始皇兵马俑博物馆
2019/09/29 职场文书
详解MySQL 联合查询优化机制
2021/05/10 MySQL
为什么mysql字段要使用NOT NULL
2021/05/13 MySQL