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 相关文章推荐
B/S开发中常用javaScript技术与代码
Mar 09 Javascript
服务器安全设置的几个注册表设置
Jul 28 Javascript
JavaScript 基础知识 被自己遗忘的
Oct 15 Javascript
用JavaScript修改CSS属性的代码
May 06 Javascript
jquery遍历select元素(实例讲解)
Dec 31 Javascript
如何高效率去掉js数组中的重复项
Apr 12 Javascript
jQuery解决浏览器兼容性问题案例分析
Apr 15 Javascript
AngularJs  Using $location详解及示例代码
Sep 02 Javascript
BootStrap轮播HTML代码(推荐)
Dec 10 Javascript
AngularJs 常用的过滤器
May 15 Javascript
JavaScript寄生组合式继承实例详解
Jan 06 Javascript
JavaScript大数相加相乘的实现方法实例
Oct 18 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
第1次亲密接触PHP5(2)
2006/10/09 PHP
PHP的autoload机制的实现解析
2012/09/15 PHP
php设置允许大文件上传示例代码
2014/03/10 PHP
php使用session二维数组实例
2014/11/06 PHP
php代码检查代理ip的有效性
2016/08/19 PHP
Linux平台PHP5.4设置FPM线程数量的方法
2016/11/09 PHP
PHP缩略图生成和图片水印制作
2017/01/07 PHP
JavaScript中null与undefined分析
2009/07/25 Javascript
JavaScript自定义等待wait函数实例分析
2015/03/23 Javascript
图片旋转、鼠标滚轮缩放、镜像、切换图片js代码
2020/12/13 Javascript
JavaScript中各种引用类型的常用操作方法小结
2016/05/05 Javascript
JS简单去除数组中重复项的方法
2016/09/13 Javascript
vuejs如何配置less
2017/04/25 Javascript
js实现前端图片上传即时预览功能
2017/08/02 Javascript
判断div滑动到底部的scroll实例代码
2017/11/15 Javascript
微信小程序身份证验证方法实现详解
2019/06/28 Javascript
JS JQuery获取data-*属性值方法解析
2020/09/01 jQuery
逐行分析鸿蒙系统的 JavaScript 框架(推荐)
2020/09/17 Javascript
vue element实现表格合并行数据
2020/11/30 Vue.js
[44:10]2018DOTA2亚洲邀请赛 4.5 淘汰赛 EG vs VP 第一场
2018/04/06 DOTA
python bottle框架支持jquery ajax的RESTful风格的PUT和DELETE方法
2017/05/24 Python
python 把文件中的每一行以数组的元素放入数组中的方法
2018/04/29 Python
python统计字母、空格、数字等字符个数的实例
2018/06/29 Python
实例讲解Python脚本成为Windows中运行的exe文件
2019/01/24 Python
python 将日期戳(五位数时间)转换为标准时间
2019/07/11 Python
CSS3 3D立方体效果示例-transform也不过如此
2016/12/05 HTML / CSS
使用CSS3和Checkbox实现JQuery的一些效果
2015/08/03 HTML / CSS
CSS3中Animation属性的使用详解
2015/08/06 HTML / CSS
海淘母婴商城:国际妈咪
2016/07/23 全球购物
全球性的在线时尚男装零售商:boohooMAN
2016/12/17 全球购物
新闻专业应届生求职信
2013/10/31 职场文书
实习单位接收函
2014/01/11 职场文书
勤俭节约倡议书
2014/04/14 职场文书
慈善晚会策划方案
2014/05/14 职场文书
2014幼儿园保育员工作总结
2014/11/10 职场文书
幼儿园教学反思范文
2016/03/02 职场文书