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 Event学习第十章 一些可替换的事件对
Feb 10 Javascript
JavaScript学习笔记(一) js基本语法
Oct 25 Javascript
Kibo 用于处理键盘事件的Javascript工具库
Oct 28 Javascript
在Python中使用glob模块查找文件路径的方法
Jun 17 Javascript
js+canvas绘制五角星的方法
Jan 28 Javascript
JS组件Bootstrap Table使用方法详解
Feb 02 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【二】
May 10 Javascript
Bootstrap面板(Panels)的简单实现代码
Mar 17 Javascript
Vue.js实现一个todo-list的上移下移删除功能
Jun 26 Javascript
JS FormData上传文件的设置方法
Jul 05 Javascript
Element Table的row-class-name无效与动态高亮显示选中行背景色
Nov 30 Javascript
原生JavaScript写出Tabs标签页的实例代码
Jul 20 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
Zend Studio 实用快捷键一览表(精心整理)
2013/08/10 PHP
一个经典的PHP验证码类分享
2014/11/18 PHP
php中array_column函数简单实现方法
2016/07/11 PHP
Yii2中DropDownList简单用法示例
2016/07/18 PHP
PHP获取文件扩展名的方法实例总结
2017/06/10 PHP
PHP实现mysqli批量执行多条语句的方法示例
2017/07/22 PHP
php+js实现裁剪任意形状图片
2018/10/31 PHP
分享十五个最佳jQuery 幻灯插件和教程
2010/03/27 Javascript
javascript下对于事件、事件流、事件触发的顺序随便说说
2010/07/17 Javascript
利用CSS、JavaScript及Ajax实现高效的图片预加载
2013/10/16 Javascript
jQuery事件之键盘事件(ctrl+Enter回车键提交表单等)
2014/05/11 Javascript
js阻止事件追加的具体实现
2014/10/15 Javascript
Markdown与Bootstrap相结合实现图片自适应属性
2016/05/04 Javascript
package.json文件配置详解
2017/06/15 Javascript
vue2中filter()的实现代码
2017/07/09 Javascript
nodejs express配置自签名https服务器的方法
2018/05/22 NodeJs
学习node.js 断言的使用详解
2019/03/18 Javascript
python爬取网站数据保存使用的方法
2013/11/20 Python
详解Python的单元测试
2015/04/28 Python
视觉直观感受若干常用排序算法
2017/04/13 Python
python assert的用处示例详解
2019/04/01 Python
Python中使用logging和traceback模块记录日志和跟踪异常
2019/04/09 Python
CentOS7安装Python3的教程详解
2019/04/10 Python
Python爬虫实现使用beautifulSoup4爬取名言网功能案例
2019/09/15 Python
python集合常见运算案例解析
2019/10/17 Python
tf.concat中axis的含义与使用详解
2020/02/07 Python
TensorFlow2.0使用keras训练模型的实现
2021/02/20 Python
HTML+CSS3+JS 实现的下拉菜单
2020/11/25 HTML / CSS
如何向接受结构参数的函数传入常数值
2016/02/17 面试题
介绍一下代理模式(Proxy)
2014/10/17 面试题
经贸日语专业个人求职信
2013/12/13 职场文书
客户服务经理岗位职责
2014/01/29 职场文书
2014年公务员退休工资改革方案
2014/10/01 职场文书
2014年医院个人工作总结
2014/12/09 职场文书
详解Javascript实践中的命令模式
2021/05/05 Javascript
vue中的可拖拽宽度div的实现示例
2022/04/08 Vue.js