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 相关文章推荐
location.href 在IE6中不跳转的解决方法与推荐使用代码
Jul 08 Javascript
javascript动态改变img的src属性图片不显示的解决方法
Oct 20 Javascript
JQuery页面地址处理插件jqURL详解
May 03 Javascript
简介JavaScript中Boolean.toSource()方法的使用
Jun 05 Javascript
ionic实现滑动的三种方式
Aug 27 Javascript
Angular 理解module和injector,即依赖注入
Sep 07 Javascript
JavaScript实现邮箱地址自动匹配功能代码
Nov 28 Javascript
jquery插件bootstrapValidator表单验证详解
Dec 15 Javascript
基于 Vue 的树形选择组件的示例代码
Aug 18 Javascript
jQuery中$原理实例分析
Aug 13 jQuery
Vue中的v-for指令不起效果的解决方法
Sep 27 Javascript
node.js中 mysql 增删改查操作及async,await处理实例分析
Feb 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
jQuery 源码分析笔记
2011/05/25 PHP
php使用pclzip类实现文件压缩的方法(附pclzip类下载地址)
2016/04/30 PHP
PHP处理Ajax请求与Ajax跨域问题
2017/02/13 PHP
php 生成加密公钥加密私钥实例详解
2017/06/16 PHP
javascript KeyDown、KeyPress和KeyUp事件的区别与联系
2009/12/03 Javascript
新手常遇到的一些jquery问题整理
2010/08/16 Javascript
JavaScript Scoping and Hoisting 翻译
2012/07/03 Javascript
解析Javascript中大括号“{}”的多义性
2013/12/02 Javascript
JavaScript截取指定长度字符串点击可以展开全部代码
2015/12/04 Javascript
温习Javascript基础语法之词法结构
2016/05/31 Javascript
js中遍历Map对象的方法
2016/07/27 Javascript
JS变量中有var定义和无var定义的区别以及es6中let命令和const命令
2017/02/19 Javascript
使用JavaScript进行表单校验功能
2017/08/01 Javascript
React Native 环境搭建的教程
2017/08/19 Javascript
Vue.Draggable拖拽功能的配置使用方法
2020/07/29 Javascript
Nodejs核心模块之net和http的使用详解
2019/04/02 NodeJs
微信小程序获取地理位置及经纬度授权代码实例
2019/09/18 Javascript
Python的动态重新封装的教程
2015/04/11 Python
简单介绍Python的Django框架的dj-scaffold项目
2015/05/30 Python
python 获取网页编码方式实现代码
2017/03/11 Python
python3如何将docx转换成pdf文件
2018/03/23 Python
python3获取两个日期之间所有日期,以及比较大小的实例
2018/04/08 Python
使用Python 正则匹配两个特定字符之间的字符方法
2018/12/24 Python
logging level级别介绍
2020/02/21 Python
python如何提取英语pdf内容并翻译
2020/03/03 Python
python中Ansible模块的Playbook的具体使用
2020/05/28 Python
使用python matploblib库绘制准确率,损失率折线图
2020/06/16 Python
OpenCV 之按位运算举例解析
2020/06/19 Python
如何基于Python按行合并两个txt
2020/11/03 Python
button在IE6/7下的黑边去除方案
2012/12/24 HTML / CSS
《巨人的花园》教学反思
2014/02/12 职场文书
2014年办公室工作总结范文
2014/11/12 职场文书
学校党支部承诺书
2015/04/30 职场文书
Python基础之常用库常用方法整理
2021/04/30 Python
使用ICOM IC-R9500接收机同时测评十台收音机中波接收性能
2022/05/10 无线电
vue中data里面的数据相互使用方式
2022/06/05 Vue.js