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 相关文章推荐
prettify 代码高亮着色器google出品
Dec 28 Javascript
js简单抽奖代码
Jan 16 Javascript
Bootstrap每天必学之按钮(一)
Nov 24 Javascript
关于JavaScript中forEach和each用法浅析
Jul 27 Javascript
ES6新增的math,Number方法
Aug 06 Javascript
解决easyui日期时间框ie的兼容的问题
Mar 01 Javascript
基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法
Dec 09 Javascript
vue使用@scroll监听滚动事件时,@scroll无效问题的解决方法详解
Oct 15 Javascript
node.js制作一个简单的登录拦截器
Feb 10 Javascript
微信小程序实现watch监听
Jun 04 Javascript
Vue js with语句原理及用法解析
Sep 03 Javascript
H5+css3+js搭建带验证码的登录页面
Oct 11 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
基于数据库的在线人数,日访问量等统计
2006/10/09 PHP
php+MySQL实现登录时验证登录名和密码是否正确
2016/05/10 PHP
php实现的一段简单概率相关代码
2016/05/30 PHP
php实现 master-worker 守护多进程模式的实例代码
2019/07/20 PHP
Yii框架 session 数据库存储操作方法示例
2019/11/18 PHP
javascript json 新手入门文档
2009/12/03 Javascript
javascript中方便增删改cookie的一个类
2012/10/11 Javascript
利用CSS、JavaScript及Ajax实现高效的图片预加载
2013/10/16 Javascript
JS仿百度搜索自动提示框匹配查询功能
2013/11/21 Javascript
node.js中的fs.mkdir方法使用说明
2014/12/17 Javascript
js+jquery常用知识点汇总
2015/03/03 Javascript
javascript背景时钟实现方法
2015/06/18 Javascript
js实现无限级树形导航列表效果代码
2015/09/23 Javascript
Bootstrap每天必学之表格
2015/11/23 Javascript
学习使用grunt来打包JavaScript和CSS程序的教程
2016/01/04 Javascript
理解javascript正则表达式
2016/03/08 Javascript
jQuery实现下拉框左右移动(全部移动,已选移动)
2016/04/15 Javascript
DOM操作和jQuery实现选项移动操作的简单实例
2016/06/07 Javascript
AngularJS 路由详解和简单实例
2016/07/28 Javascript
Ionic默认的Tabs模板使用实例
2016/08/29 Javascript
原生js实现日期计算器功能
2017/02/17 Javascript
ionic2打包android时gradle无法下载的解决方法
2017/04/05 Javascript
jQuery实现的下雪动画效果示例【附源码下载】
2018/02/02 jQuery
angularjs 获取默认选中的单选按钮的value方法
2018/02/28 Javascript
详解如何在你的Vue项目配置vux
2018/06/04 Javascript
利用Angular7开发一个Radio组件的全过程
2019/07/11 Javascript
vue iview的菜单组件Mune 点击不高亮的解决方案
2019/11/01 Javascript
解决vue里a标签值解析变量,跳转页面,前面加默认域名端口的问题
2020/07/22 Javascript
python实现的阳历转阴历(农历)算法
2014/04/25 Python
Django重装mysql后启动报错:No module named ‘MySQLdb’的解决方法
2018/04/22 Python
利用Pyhton中的requests包进行网页访问测试的方法
2018/12/26 Python
Pytorch Tensor 输出为txt和mat格式方式
2020/01/03 Python
详解Django自定义图片和文件上传路径(upload_to)的2种方式
2020/12/01 Python
python模块内置属性概念及实例
2021/02/18 Python
详解Canvas实用库Fabric.js使用手册
2019/01/07 HTML / CSS
初婚未育证明
2014/01/15 职场文书