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 相关文章推荐
双击滚屏-常用推荐
Nov 29 Javascript
javascript 禁止复制网页
Jun 11 Javascript
jquery 选择器引擎sizzle浅析
Feb 06 Javascript
图片上传插件jquery.uploadify详解
Nov 15 Javascript
jquery通过visible来判断标签是否显示或隐藏
May 08 Javascript
原生js模拟淘宝购物车项目实战
Nov 18 Javascript
浅析angularJS中的ui-router和ng-grid模块
May 20 Javascript
详解在Angularjs中ui-sref和$state.go如何传递参数
Apr 24 Javascript
ES6学习教程之对象字面量详解
Oct 09 Javascript
AngularJS中table表格基本操作示例
Oct 10 Javascript
javascript function(函数类型)使用与注意事项小结
Jun 10 Javascript
JavaScript中的函数式编程详解
Aug 22 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
javascript 小型动画组件与实现代码
2010/06/02 PHP
php中一个有意思的日期逻辑处理
2012/03/25 PHP
destoon常用的安全设置概述
2014/06/21 PHP
PHP里8个鲜为人知的安全函数分析
2014/12/09 PHP
php将图片保存为不同尺寸图片的图片类实例
2015/03/30 PHP
Laravel 5 框架入门(一)
2015/04/09 PHP
nginx+thinkphp下解决不支持pathinfo模式
2015/07/01 PHP
YII CLinkPager分页类扩展增加显示共多少页
2016/01/29 PHP
详解no input file specified 三种解决方法
2019/11/29 PHP
syntaxhighlighter 使用方法
2007/07/02 Javascript
namespace.js Javascript的命名空间库
2011/10/11 Javascript
.net,js捕捉文本框回车键事件的小例子(兼容多浏览器)
2013/03/11 Javascript
IE8中动态创建script标签onload无效的解决方法
2014/12/22 Javascript
JavaScript中逗号运算符介绍及使用示例
2015/03/13 Javascript
js实现带按钮的上下滚动效果
2015/05/12 Javascript
前端jquery部分很精彩
2016/05/03 Javascript
AngularJS基础 ng-src 指令简单示例
2016/08/03 Javascript
JavaScript第一篇之实现按钮全选、功能
2016/08/21 Javascript
详解Web使用webpack构建前端项目
2017/09/23 Javascript
bing Map 在vue项目中的使用详解
2018/04/09 Javascript
vue 实现购物车总价计算
2019/11/06 Javascript
JS快速实现简单计算器
2020/04/08 Javascript
[01:01:52]完美世界DOTA2联赛PWL S2 GXR vs Magma 第二场 11.25
2020/11/26 DOTA
python函数的5种参数详解
2017/02/24 Python
详解Python:面向对象编程
2019/04/10 Python
matplotlib基础绘图命令之imshow的使用
2020/08/13 Python
菲律宾酒店预订网站:Hotels.com菲律宾
2017/07/12 全球购物
奥地利婴儿用品和玩具购物网站:baby-markt.at
2020/01/26 全球购物
应届生学校辅导员求职信
2013/11/07 职场文书
第一批党的群众路线教育实践活动工作总结
2014/03/03 职场文书
写求职信有哪些注意事项
2014/05/08 职场文书
博士导师推荐信
2015/03/25 职场文书
2015年保安个人工作总结
2015/04/02 职场文书
HTML5简单实现添加背景音乐的几种方法
2021/05/12 HTML / CSS
html实现弹窗的实例
2021/06/09 HTML / CSS
原生JS实现分页
2022/04/19 Javascript