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 相关文章推荐
js的event详解。
Sep 06 Javascript
IE7提供XMLHttpRequest对象为兼容
Mar 08 Javascript
手把手教你自己写一个js表单验证框架的方法
Sep 14 Javascript
JavaScript实现仿网易通行证表单验证
May 25 Javascript
jQuery数组处理函数整理
Aug 03 Javascript
javascript 四十条常用技巧大全
Sep 09 Javascript
AngularJS 限定$scope的范围实例详解
Jun 23 Javascript
Koa代理Http请求的示例代码
Oct 10 Javascript
Vue开发环境跨域访问问题
Jan 22 Javascript
使用eslint和githooks统一前端风格的技巧
Jul 29 Javascript
浅谈javascript如何获取文件后缀名
Aug 07 Javascript
Vue Element校验validate的实例
Sep 21 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采用超长(超大)数字运算防止数字以科学计数法显示的方法
2016/04/01 PHP
PHP安全下载文件的方法
2016/04/07 PHP
php实现的mysqldb读写分离操作类示例
2017/02/07 PHP
thinkphp 框架数据库切换实现方法分析
2020/05/18 PHP
javascript实现面向对象类的功能书写技巧
2010/03/07 Javascript
基于jquery实现发送文章到手机的代码
2014/12/26 Javascript
jquery实现的简单二级菜单效果代码
2015/09/22 Javascript
jQuery实现监控页面所有ajax请求的方法
2015/12/10 Javascript
javascript用正则表达式过滤空格的实现代码
2016/06/14 Javascript
微信小程序  Mustache语法详细介绍
2016/10/27 Javascript
浅谈javascript中的数据类型转换
2016/12/27 Javascript
es6学习笔记之Async函数的使用示例
2017/05/11 Javascript
基于angular2 的 http服务封装的实例代码
2017/06/29 Javascript
详解webpack中的hash、chunkhash、contenthash区别
2018/01/05 Javascript
JS实现的JSON序列化操作简单示例
2018/07/02 Javascript
vue生成文件本地打开查看效果的实例
2018/09/06 Javascript
JavaScript数据结构与算法之二叉树遍历算法详解【先序、中序、后序】
2019/02/21 Javascript
Bootstrap实现模态框效果
2019/09/30 Javascript
利用JS如何获取form表单数据
2019/12/19 Javascript
python time模块用法实例详解
2014/09/11 Python
Python基于正则表达式实现文件内容替换的方法
2017/08/30 Python
Python文本处理之按行处理大文件的方法
2018/04/09 Python
Python 用matplotlib画以时间日期为x轴的图像
2019/08/06 Python
解决python replace函数替换无效问题
2020/01/18 Python
Python中常见的数制转换有哪些
2020/05/27 Python
Python中有几个关键字
2020/06/04 Python
Python调用.net动态库实现过程解析
2020/06/05 Python
乌克兰移动电子产品和相关配件的在线商店:iTMag
2020/03/16 全球购物
程序员求职信
2014/04/16 职场文书
小学教师个人先进事迹材料
2014/05/17 职场文书
2015年世界急救日宣传活动方案
2015/05/06 职场文书
教师节班会开场白
2015/06/01 职场文书
讲座新闻稿
2015/07/18 职场文书
家访教师心得体会
2016/01/23 职场文书
Python基础之赋值,浅拷贝,深拷贝的区别
2021/04/30 Python
一篇文章带你深入了解Mysql触发器
2021/08/02 MySQL