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 相关文章推荐
激活 ActiveX 控件
Oct 09 Javascript
给moz-firefox下添加IE方法和属性
Apr 10 Javascript
js同时按下两个方向键
Dec 01 Javascript
获取div编辑框,textarea,input text的光标位置 兼容IE,FF和Chrome的方法介绍
Nov 08 Javascript
js导航菜单(自写)简单大方
Mar 28 Javascript
JQuery.Ajax之错误调试帮助信息介绍
Jul 04 Javascript
iframe子页面与父页面在同域或不同域下的js通信
May 07 Javascript
jQuery文本框得到与失去焦点动态改变样式效果
Sep 08 Javascript
Vue关于数据绑定出错解决办法
May 15 Javascript
Nginx 配置多站点vhost 的方法
Jan 07 Javascript
Vue常见面试题整理【值得收藏】
Sep 20 Javascript
通过JS判断网页是否为手机打开
Oct 28 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写的MySQL数据库用户认证系统代码
2007/03/22 PHP
PHP会员找回密码功能的简单实现
2016/09/05 PHP
LBS blog sql注射漏洞[All version]-官方已有补丁
2007/08/26 Javascript
jquery 插件学习(一)
2012/08/06 Javascript
用javascript模仿ie的自动完成类似自动完成功的表单
2012/12/12 Javascript
JS对select控件option选项的增删改查示例代码
2013/10/21 Javascript
Js参数值中含有单引号或双引号问题的解决方法
2013/11/06 Javascript
JavaScript的原型继承详解
2015/02/15 Javascript
js实现当前输入框高亮显示的方法
2015/08/19 Javascript
JS组件系列之使用HTML标签的data属性初始化JS组件
2016/09/14 Javascript
jQuery Validate 校验多个相同name的方法
2017/05/18 jQuery
Node.js自定义实现文件路由功能
2017/09/22 Javascript
基于mpvue小程序使用echarts画折线图的方法示例
2019/04/24 Javascript
vue3为什么要用proxy替代defineProperty
2020/10/19 Javascript
在vant中使用时间选择器和popup弹出层的操作
2020/11/04 Javascript
[04:42]5分钟带你了解什么是DOTA2(第一期)
2017/02/07 DOTA
[01:35]2018年度CS GO最佳战队-完美盛典
2018/12/17 DOTA
python实现telnet客户端的方法
2015/04/15 Python
python算法与数据结构之单链表的实现代码
2019/06/27 Python
处理Selenium3+python3定位鼠标悬停才显示的元素
2019/07/31 Python
关于Tensorflow使用CPU报错的解决方式
2020/02/05 Python
Python 日期时间datetime 加一天,减一天,加减一小时一分钟,加减一年
2020/04/16 Python
python Protobuf定义消息类型知识点讲解
2021/03/02 Python
美国嘻哈首饰购物网站:Hip Hop Bling
2016/12/30 全球购物
《母亲的恩情》教学反思
2014/02/13 职场文书
电台实习生求职信
2014/02/25 职场文书
讲座主持词
2014/03/20 职场文书
继承公证书样本
2014/04/04 职场文书
给校长的建议书200字
2014/05/16 职场文书
解除劳动合同协议书
2014/09/17 职场文书
2014年驾驶员工作总结
2014/11/18 职场文书
小学教师2014年度工作总结
2014/12/03 职场文书
活动新闻稿范文
2015/07/17 职场文书
nginx简单配置多个server的方法
2021/03/31 Servers
Pytorch 中net.train 和 net.eval的使用说明
2021/05/22 Python
sql字段解析器的实现示例
2021/06/23 SQL Server