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的事件描述
Sep 08 Javascript
脚本吧 - 幻宇工作室用到js,超强推荐share.js
Dec 23 Javascript
锋利的jQuery 第三章章节总结的例子
Mar 23 Javascript
DIV+CSS+JS不间断横向滚动实现代码
Mar 19 Javascript
使用jquery中height()方法获取各种高度大全
Apr 02 Javascript
使用canvas实现仿新浪微博头像截取上传功能
Sep 02 Javascript
vue父子组件的数据传递示例
Mar 07 Javascript
React diff算法的实现示例
Apr 20 Javascript
vue-auto-focus: 控制自动聚焦行为的 vue 指令方法
Aug 25 Javascript
快速解决vue动态绑定多个class的官方实例语法无效的问题
Sep 05 Javascript
8 个有用的JS技巧(推荐)
Jul 03 Javascript
JS表单验证插件之数据与逻辑分离操作实例分析【策略模式】
May 01 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函数
2006/10/09 PHP
使用PHP实现二分查找算法代码分享
2011/06/24 PHP
php模拟post行为代码总结(POST方式不是绝对安全)
2012/02/22 PHP
基于PHP静态类的原罪详解
2013/05/06 PHP
php中$美元符号与Zen Coding冲突问题解决方法分享
2014/05/28 PHP
Laravel框架使用Seeder实现自动填充数据功能
2018/06/13 PHP
使用户点击后退按钮使效三行代码
2007/07/07 Javascript
基于jQuery的动态表格插件
2011/03/28 Javascript
这段js代码得节约你多少时间
2011/12/20 Javascript
JavaScript生成GUID的多种算法小结
2013/08/18 Javascript
几种设置表单元素中文本输入框不可编辑的方法总结
2013/11/25 Javascript
Angular.Js中过滤器filter与自定义过滤器filter实例详解
2017/05/08 Javascript
vue实现样式之间的切换及vue动态样式的实现方法
2017/12/19 Javascript
webpack实用小功能介绍
2018/01/02 Javascript
vue和webpack打包项目相对路径修改的方法
2018/06/15 Javascript
JavaScript直接调用函数与call调用的区别实例分析
2020/05/22 Javascript
微信小程序获取当前时间及星期几的实例代码
2020/09/20 Javascript
JavaScript用document.write()输出换行的示例代码
2020/11/26 Javascript
Python中处理字符串之endswith()方法的使用简介
2015/05/18 Python
PyQt5每天必学之日历控件QCalendarWidget
2018/04/19 Python
Python3实现的Mysql数据库操作封装类
2018/06/06 Python
Selenium元素的常用操作方法分析
2018/08/10 Python
Python Pywavelet 小波阈值实例
2019/01/09 Python
使用python的turtle绘画滑稽脸实例
2019/11/21 Python
美国知名的在线旅游服务网站:Priceline
2016/07/23 全球购物
英国领先的运动营养品牌:Protein Dynamix
2018/01/02 全球购物
土耳其新趋势女装购物网站:Addax
2020/01/07 全球购物
AJAX检测用户名是否存在的方法
2021/03/24 Javascript
天网工程实施方案
2014/03/26 职场文书
英语课前三分钟演讲稿
2014/08/19 职场文书
企业领导对照检查材料
2014/08/20 职场文书
党的群众路线教育实践活动通讯稿
2014/09/10 职场文书
颐和园导游词400字
2015/01/30 职场文书
基于Go语言构建RESTful API服务
2021/07/25 Golang
关于python爬虫应用urllib库作用分析
2021/09/04 Python
SpringCloud项目如何解决log4j2漏洞
2022/04/10 Java/Android