JavaScript静态作用域和动态作用域实例详解


Posted in Javascript onJune 17, 2019

静态作用域指的是一段代码,在它执行之前就已经确定了它的作用域,简单来说就是在执行之前就确定了它可以应用哪些地方的作用域(变量)。

动态作用域?函数的作用域是在函数调用的时候才决定的

JavaScript采用的是词法作用域即静态作用域;

// 静态作用域:
var a = 10;
function fn() {
  var b = 1;
  console.log(a + b);
}
fn(); // 11

在创建fn函数时的时候就已经确定了它可以作用哪些变量,如果函数fn里面有变量a就直接操作变量a,

如果没有就往上一级查找,这就是静态作用域

// 动态作用域:
function foo() {
  console.log(a);
}
function bar() {
  var a = 3;
  foo();
}
var a = 2;
bar(); // 2;

bar 调用,bar里面foo被调用,foo函数需要查找变量a,由于JavaScript是词法作用域(即静态作用域),foo被解析时在全局作用域.

所以只能在全局作用域中找a,输出结果为2,而非bar作用域中的a。如果js采用的时动态作用域,那么foo在bar中调用,就会先在bar中查询a,输出为3。

ps:下面看下JavaScript之静态作用域

作用域是指代码中定义变量的区域。作用域规定了如何查找变量,也就是确定当前代码对变量的访问权限。

静态作用域和动态作用域

静态作用域是指函数的作用域在函数定义时就已经确定了,而动态作用域是指函数的作用域在运行时才确定。下面是一段代码:

var value = 1;
function foo() {
    console.log(value);
}
function bar() {
    var value = 2;
    foo();
}
bar();

如果这段代码使用静态作用域的方式访问变量,那么执行foo()函数时,首先查看函数内是否存在局部变量value的定义,如果没有,则查找之前的代码,也就是var value = 1;,查找到了value的定义为1,因此输出1。
如果这段代码使用动态作用域的方式访问变量,那么执行foo()函数时,首先依旧从函数内部查找是否存在局部变量value的定义,如果没有,那么从调用方bar()函数的作用域中查找,找到了var value = 2;,因此输出2。
JavaScript采用静态作用域的方式访问变量,因此这个例子输出为1。

常见的采用动态作用域的语言是bash。

Javascript 相关文章推荐
JavaScript 版本自动生成文章摘要
Jul 23 Javascript
jquery validate使用攻略 第四步
Jul 01 Javascript
多个jquery.datatable共存,checkbox全选异常的快速解决方法
Dec 10 Javascript
JS使用oumousemove和oumouseout动态改变图片显示的方法
Mar 31 Javascript
Javascript编写2048小游戏
Jul 07 Javascript
配置Grunt的Task时通配符支持和动态生成文件名问题
Sep 06 Javascript
JavaScript数组的定义及数字操作技巧
Jun 06 Javascript
浅谈EasyUI常用控件的禁用方法
Nov 09 Javascript
小程序点击图片实现png转jpg
Oct 22 Javascript
jQuery实现回到顶部效果
Oct 19 jQuery
如何在vue中使用百度地图添加自定义覆盖物(水波纹)
Nov 03 Javascript
vue data有值,但是页面{{}} 取不到值的解决
Nov 09 Javascript
深入解析koa之中间件流程控制
Jun 17 #Javascript
深入解读Node.js中的koa源码
Jun 17 #Javascript
学习RxJS之JavaScript框架Cycle.js
Jun 17 #Javascript
javascript系统时间设置操作示例
Jun 17 #Javascript
深入学习TypeScript 、React、 Redux和Ant-Design的最佳实践
Jun 17 #Javascript
Vue程序调试的方法
Jun 17 #Javascript
Vue拖拽组件列表实现动态页面配置功能
Jun 17 #Javascript
You might like
thinkphp 多表 事务详解
2013/06/17 PHP
php实现将wav文件转换成图像文件并在页面中显示的方法
2015/04/21 PHP
ThinkPHP实现更新数据实例详解(demo)
2016/06/29 PHP
php 7新特性之类型申明详解
2017/06/06 PHP
PHP code 验证码生成类定义和简单使用示例
2020/05/27 PHP
Prototype使用指南之selector.js
2007/01/10 Javascript
Firefox下无法正常显示年份的解决方法
2014/09/04 Javascript
JavaScript中的值是按值传递还是按引用传递问题探讨
2015/01/30 Javascript
JavaScript代码实现左右上下自动晃动自动移动
2016/04/08 Javascript
对js eval()函数的一些见解
2016/08/15 Javascript
vue.js 使用v-if v-else发现没有执行解决办法
2017/05/15 Javascript
原JS实现banner图的常用功能
2017/06/12 Javascript
jquery中done和then的区别(详解)
2017/12/19 jQuery
NodeJS 实现多语言的示例代码
2018/09/11 NodeJs
vue+Vue Router多级侧导航切换路由(页面)的实现代码
2018/12/20 Javascript
小程序页面动态配置实现方法
2019/02/05 Javascript
原生javascript中this几种常见用法总结
2020/02/24 Javascript
js String.prototype.trim字符去前后空格的扩展
2020/08/23 Javascript
vue-router定义元信息meta操作
2020/12/07 Vue.js
详解Python3操作Mongodb简明易懂教程
2017/05/25 Python
python2.7+selenium2实现淘宝滑块自动认证功能
2018/02/24 Python
Python实现DDos攻击实例详解
2019/02/02 Python
python实现视频分帧效果
2019/05/31 Python
Python实现滑动平均(Moving Average)的例子
2019/08/24 Python
python自动下载图片的方法示例
2020/03/25 Python
CSS3 简写animation
2012/05/10 HTML / CSS
阿联酋优惠券服务:Living Kool
2019/12/12 全球购物
最新计算机专业自荐信
2013/10/16 职场文书
求职简历中的自我评价分享
2013/12/08 职场文书
大学三年的自我评价
2013/12/25 职场文书
护士实习求职信
2014/06/22 职场文书
乡镇群众路线整改落实情况汇报
2014/10/28 职场文书
社区志愿者服务心得体会
2016/01/22 职场文书
2016简历自荐信优秀范文
2016/01/29 职场文书
MySQL分区表实现按月份归类
2021/11/01 MySQL
宫崎骏十大动画电影,宫崎骏好看的动画电影排名
2022/03/22 日漫