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小组件 原生table排序表格脚本(兼容ie firefox opera chrome)
Jul 25 Javascript
jquery实现弹出div,始终显示在屏幕正中间的简单实例
Mar 08 Javascript
jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果
Aug 25 Javascript
js方法数据验证的简单实例
Sep 17 Javascript
ajax的分页查询示例(不刷新页面)
Jan 11 Javascript
用JS编写一个函数,返回数组中重复出现过的元素(实例)
Sep 14 Javascript
vue中如何实现后台管理系统的权限控制的方法示例
Sep 19 Javascript
javascript中call,apply,callee,caller用法实例分析
Jul 24 Javascript
解决layer.open后laydate失效的问题
Sep 06 Javascript
微信小程序开发之转发分享功能
Oct 22 Javascript
jquery css实现流程进度条
Mar 26 jQuery
Vue自定义多选组件使用详解
Sep 08 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
调频问题解答
2021/03/01 无线电
PHP错误和异长常处理总结
2014/03/06 PHP
Avengerls vs Newbee BO3 第三场2.18
2021/03/10 DOTA
js倒计时小程序
2013/11/05 Javascript
javascript获取web应用根目录的方法
2014/02/12 Javascript
js中top的作用深入剖析
2014/03/04 Javascript
extjs 分页使用jsp传递数据示例
2014/07/29 Javascript
JS中的form.submit()不能提交表单的错误原因
2014/10/08 Javascript
IE8下jQuery改变png图片透明度时出现的黑边
2015/08/30 Javascript
AngularJS控制器详解及示例代码
2016/08/16 Javascript
jQ处理xml文件和xml字符串的方法(详解)
2016/11/22 Javascript
用jQuery.ajaxSetup实现对请求和响应数据的过滤
2016/12/20 Javascript
BootStrap Select清除选中的状态恢复默认状态
2017/06/20 Javascript
最后说说Vue2 SSR 的 Cookies 问题
2018/05/25 Javascript
vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作
2020/07/31 Javascript
用Python和MD5实现网站挂马检测程序
2014/03/13 Python
Python实现的tab文件操作类分享
2014/11/20 Python
深入理解Python中各种方法的运作原理
2015/06/15 Python
python好玩的项目—色情图片识别代码分享
2017/11/07 Python
python+pyqt5实现图片批量缩放工具
2019/03/18 Python
安装python及pycharm的教程图解
2019/10/10 Python
Python MySQLdb 执行sql语句时的参数传递方式
2020/03/04 Python
html5 canvas实现圆形时钟代码分享
2013/12/25 HTML / CSS
亚瑟士美国官网:ASICS美国
2017/02/01 全球购物
雅诗兰黛旗下专业男士保养领导品牌:Lab Series
2017/05/15 全球购物
计算机工程学院个人求职信
2013/10/05 职场文书
本科生的职业生涯规划范文
2014/01/09 职场文书
加拿大留学自荐信
2014/01/28 职场文书
违纪检讨书2000字
2014/02/08 职场文书
楼面部长岗位职责范本
2014/02/14 职场文书
闭幕式主持词
2014/04/02 职场文书
体育教师求职信
2014/05/24 职场文书
护理学院专科毕业生求职信
2014/06/28 职场文书
2014年度安全工作总结
2014/12/04 职场文书
李清照的诗词赏析(20首)
2019/08/22 职场文书
Python 第三方库 openpyxl 的安装过程
2022/12/24 Python