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 相关文章推荐
DOM_window对象属性之--clipboardData对象操作代码
Feb 03 Javascript
JS控件的生命周期介绍
Oct 22 Javascript
兼容IE和Firefox火狐的上下、左右循环无间断滚动JS代码
Apr 19 Javascript
JS幻灯片可循环播放可平滑旋转带滚动导航(自写)
Aug 05 Javascript
JavaScript判断密码强度(自写代码)
Sep 06 Javascript
jQuery实现平滑滚动的标签分栏切换效果
Aug 28 Javascript
JS随机洗牌算法之数组随机排序
Mar 23 Javascript
深入理解Javascript中的观察者模式
Feb 20 Javascript
Angular 4依赖注入学习教程之简介(一)
Jun 04 Javascript
十大 Node.js 的 Web 框架(快速提升工作效率)
Jun 30 Javascript
vue全局使用axios的方法实例详解
Nov 22 Javascript
原生JS实现音乐播放器
Jan 26 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
PHP获取网卡地址的代码
2008/04/09 PHP
php文件缓存类汇总
2014/11/21 PHP
php mysql PDO 查询操作的实例详解
2017/09/23 PHP
Laravel 框架返回状态拦截代码
2019/10/18 PHP
window.onload 加载完毕的问题及解决方案(上)
2009/07/09 Javascript
JQuery实现倒计时按钮具体方法
2013/11/14 Javascript
jquery获取对象的方法足以应付常见的各种类型的对象
2014/05/14 Javascript
js图片模糊切换显示特效的方法
2015/02/17 Javascript
AngularJS控制器继承自另一控制器
2016/05/09 Javascript
javascript回到顶部特效
2016/07/30 Javascript
Bootstrap Table使用整理(四)之工具栏
2017/06/09 Javascript
JavaScript中in和hasOwnProperty区别详解
2017/08/04 Javascript
Vue路由守卫之路由独享守卫
2019/09/25 Javascript
Layui带搜索的下拉框的使用以及动态数据绑定方法
2019/09/28 Javascript
解决vue与node模版引擎的渲染标记{{}}(双花括号)冲突问题
2020/09/11 Javascript
python实现统计代码行数的方法
2015/05/22 Python
Python处理JSON数据并生成条形图
2016/08/05 Python
python函数的5种参数详解
2017/02/24 Python
python检测主机的连通性并记录到文件的实例
2018/06/21 Python
python制作填词游戏步骤详解
2019/05/05 Python
详解python中__name__的意义以及作用
2019/08/07 Python
简单的Python人脸识别系统
2020/07/14 Python
Python实现敏感词过滤的4种方法
2020/09/12 Python
python处理写入数据代码讲解
2020/10/22 Python
Python在线和离线安装第三方库的方法
2020/10/31 Python
css3 利用transform打造走动的2D时钟
2020/10/20 HTML / CSS
野兽派官方旗舰店:THE BEAST 野兽派
2016/08/05 全球购物
联想德国官网:Lenovo Germany
2018/07/04 全球购物
科颜氏法国官网:Kiehl’s法国
2019/08/20 全球购物
苏格兰领先的多渠道鞋店:Begg Shoes
2019/10/22 全球购物
开会迟到检讨书
2014/01/08 职场文书
社区十八大感言
2014/01/19 职场文书
卖车协议书范本4篇
2014/10/01 职场文书
肖申克救赎观后感
2015/06/02 职场文书
SpringBoot+Vue+JWT的前后端分离登录认证详细步骤
2021/09/25 Java/Android
MySQL 原理与优化之Update 优化
2022/08/14 MySQL