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 相关文章推荐
js禁止页面复制功能禁用页面右键菜单示例代码
Aug 29 Javascript
jquery实现弹出div,始终显示在屏幕正中间的简单实例
Mar 08 Javascript
jQuery如何防止这种冒泡事件发生
Feb 27 Javascript
jQuery拖动布局其结果保存到数据库
Oct 09 Javascript
javascript实现动态标签云
Oct 16 Javascript
基于JavaScript实现全屏透明遮罩div层锁屏效果
Jan 26 Javascript
浅谈javascript中的constructor
Jun 08 Javascript
详解vue-router 路由元信息
Sep 13 Javascript
最后说说Vue2 SSR 的 Cookies 问题
May 25 Javascript
详解Webstorm 下的Angular2.0开发之路(图文)
Dec 06 Javascript
webpack4手动搭建Vue开发环境实现todoList项目的方法
May 16 Javascript
使用compose函数优化代码提高可读性及扩展性
Jun 16 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
PHPMailer邮件类利用smtp.163.com发送邮件方法
2008/09/11 PHP
php Xdebug的安装与使用详解
2013/06/20 PHP
php生成随机密码自定义函数代码(简单快速)
2014/05/10 PHP
PHP内核探索之解释器的执行过程
2015/12/22 PHP
php类的自动加载操作实例详解
2016/09/28 PHP
详解php用curl调用接口方法,get和post两种方式
2017/01/13 PHP
Laravel5.5 视图 - 创建视图和数据传递示例
2019/10/21 PHP
JQuery与Ajax常用代码实现对比
2009/10/03 Javascript
A标签中通过href和onclick传递的this对象实现思路
2013/04/19 Javascript
Jquery实现控件的隐藏和显示实例
2014/02/08 Javascript
JavaScript中的正则表达式简明总结
2014/04/04 Javascript
angular.element方法汇总
2015/01/07 Javascript
jQuery模拟新浪微博首页滚动效果的方法
2015/03/11 Javascript
fullCalendar中文API官方文档
2017/02/07 Javascript
基于JavaScript实现无缝滚动效果
2017/07/21 Javascript
利用JavaScript如何查询某个值是否数组内
2017/07/30 Javascript
vue插件实现v-model功能
2018/09/10 Javascript
bootstrap tooltips在 angularJS中的使用方法
2019/04/10 Javascript
webpack 最佳配置指北(推荐)
2020/01/07 Javascript
JS浏览器BOM常见操作实例详解
2020/04/27 Javascript
在nodejs中创建child process的方法
2021/01/26 NodeJs
Python实现获取操作系统版本信息方法
2015/04/08 Python
Python 创建子进程模块subprocess详解
2015/04/08 Python
Python计算一个文件里字数的方法
2015/06/15 Python
python发送邮件功能实现代码
2016/07/15 Python
python2.7 json 转换日期的处理的示例
2018/03/07 Python
python 实现从高分辨图像上抠取图像块
2020/01/02 Python
Python提取视频中图片的示例(按帧、按秒)
2020/10/22 Python
HTML5 Canvas基本线条绘制的实例教程
2016/03/17 HTML / CSS
中海讯通笔试题
2015/09/15 面试题
英语生日邀请函
2014/01/23 职场文书
演讲比赛获奖感言
2014/02/02 职场文书
2014年招生工作总结
2014/11/26 职场文书
会议简讯范文
2015/07/20 职场文书
教师病假条范文
2015/08/17 职场文书
golang import自定义包方式
2021/04/29 Golang