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 相关文章推荐
aspx中利用js实现确认删除代码
Jul 22 Javascript
jQuery搜索同辈元素方法
Feb 10 Javascript
javascript数组排序汇总
Jul 07 Javascript
信息页文内画中画广告js实现代码(文中加载广告方式)
Jan 03 Javascript
详解js的异步编程技术的方法
Feb 09 Javascript
Angular 4依赖注入学习教程之InjectToken的使用(八)
Jun 04 Javascript
简单的Vue SSR的示例代码
Jan 12 Javascript
element-ui 限制日期选择的方法(datepicker)
May 16 Javascript
JS的Ajax与后端交互数据的实例
Aug 08 Javascript
layui 给数据表格加序号的方法
Aug 20 Javascript
解决vuecli3.0热更新失效的问题
Sep 19 Javascript
vue+vuex+json-seiver实现数据展示+分页功能
Apr 11 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/09/11 PHP
不依赖Flash和任何JS库实现文本复制与剪切附源码下载
2015/10/09 Javascript
DIV随滚动条滚动而滚动的实现代码【推荐】
2016/04/12 Javascript
jquery点击改变class并toggle的实现代码
2016/05/15 Javascript
Ionic如何实现下拉刷新与上拉加载功能
2016/06/03 Javascript
JS & JQuery 动态添加 select option
2016/06/08 Javascript
浅谈Vue.js
2017/03/02 Javascript
详解angular2封装material2对话框组件
2017/03/03 Javascript
整理关于Bootstrap过渡动画的慕课笔记
2017/03/29 Javascript
微信小程序scroll-view组件实现滚动动画
2018/01/31 Javascript
关于Angularjs中自定义指令一些有价值的细节和技巧小结
2018/04/22 Javascript
Redux实现组合计数器的示例代码
2018/07/04 Javascript
jQuery实现侧边栏隐藏与显示的方法详解
2018/12/22 jQuery
实例分析编写vue组件方法
2019/02/12 Javascript
微信小程序下拉菜单效果的实例代码
2019/05/14 Javascript
vue axios post发送复杂对象问题
2019/06/04 Javascript
基于Python的文件类型和字符串详解
2017/12/21 Python
Python贪心算法实例小结
2018/04/22 Python
Python统计一个字符串中每个字符出现了多少次的方法【字符串转换为列表再统计】
2019/05/05 Python
windows下安装Python虚拟环境virtualenvwrapper-win
2019/06/14 Python
Python列表删除元素del、pop()和remove()的区别小结
2019/09/11 Python
美国百货齐全的精品网站,提供美式风格的产品:Overstock.com
2016/07/22 全球购物
COACH德国官方网站:纽约现代奢侈品牌,1941年
2018/06/09 全球购物
ECCO俄罗斯官网:北欧丹麦鞋履及皮具品牌
2020/06/26 全球购物
绩效专员岗位职责
2013/12/02 职场文书
双十佳事迹材料
2014/01/29 职场文书
夜不归宿检讨书
2014/02/25 职场文书
小小商店教学反思
2014/04/27 职场文书
个性车贴标语
2014/06/24 职场文书
交通安全责任书范本
2014/07/24 职场文书
2014年乡镇领导个人整改措施
2014/09/19 职场文书
社会实践活动报告
2015/02/05 职场文书
办公室主任岗位职责范本
2015/03/31 职场文书
新学期感想
2015/08/10 职场文书
webpack的移动端适配方案小结
2021/07/25 Javascript
WebWorker 封装 JavaScript 沙箱详情
2021/11/02 Javascript