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 数组学习资料收集
Apr 11 Javascript
JQuery自适应IFrame高度(支持嵌套 兼容IE,ff,safafi,chrome)
Mar 28 Javascript
jQuery+css3实现Ajax点击后动态删除功能的方法
Aug 10 Javascript
JavaScript常用标签和方法总结
Sep 01 Javascript
基于JavaScript实现简单的随机抽奖小程序
Jan 05 Javascript
浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入
Jan 19 Javascript
浅析jsopn跨域请求原理及cors(跨域资源共享)的完美解决方法
Feb 06 Javascript
js事件委托和事件代理案例分享
Jul 25 Javascript
JQuery 获取多个select标签option的text内容(实例)
Sep 07 jQuery
react实现菜单权限控制的方法
Dec 11 Javascript
vue的常用组件操作方法应用分析
Apr 13 Javascript
JavaScript 双向链表操作实例分析【创建、增加、查找、删除等】
Apr 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中防止恶意刷新页面的代码小结
2012/10/31 PHP
php实现文件与16进制相互转换的方法示例
2017/02/16 PHP
PHP getID3类的使用方法学习笔记【附getID3源码下载】
2019/10/18 PHP
splice slice区别
2006/10/09 Javascript
服务端 VBScript 与 JScript 几个相同特性的写法 By shawl.qiu
2007/03/06 Javascript
THREE.JS入门教程(1)THREE.JS使用前了解
2013/01/24 Javascript
用jquery统计子菜单的条数示例代码
2013/10/18 Javascript
Javascript设置对象的ReadOnly属性(示例代码)
2013/12/25 Javascript
js实现支持手机滑动切换的轮播图片效果实例
2015/04/29 Javascript
js实现两点之间画线的方法
2015/05/12 Javascript
jquery实现的3D旋转木马特效代码分享
2015/08/25 Javascript
详解JavaScript数组和字符串中去除重复值的方法
2016/03/07 Javascript
JS代码随机生成姓名、手机号、身份证号、银行卡号
2016/04/27 Javascript
深入理解JavaScript函数参数(推荐)
2016/07/26 Javascript
使用Math.max,Math.min获取数组中的最值实例
2017/04/25 Javascript
AngularJs定时器$interval 和 $timeout详解
2017/05/25 Javascript
jquery自定义显示消息数量
2017/12/19 jQuery
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
2018/01/18 jQuery
vue刷新和tab切换实例
2018/02/11 Javascript
JavaScript实现Excel表格效果
2020/02/07 Javascript
vue-preview动态获取图片宽高并增加旋转功能的实现
2020/07/29 Javascript
JavaScript实现世界各地时间显示
2020/09/07 Javascript
Python中itertools模块用法详解
2014/09/25 Python
Python用list或dict字段模式读取文件的方法
2017/01/10 Python
用Python实现大文本文件切割的方法
2019/01/12 Python
Python切片操作去除字符串首尾的空格
2019/04/22 Python
CSS3中各种颜色属性的使用教程
2016/05/17 HTML / CSS
GafasWorld哥伦比亚:网上购买眼镜
2017/11/28 全球购物
英国礼品和生活方式品牌:Treat Republic
2020/11/21 全球购物
大学新生欢迎词
2014/01/10 职场文书
《罗布泊,消逝的仙湖》教学反思
2014/03/01 职场文书
七夕情人节促销方案
2014/06/07 职场文书
完整版商业计划书
2014/09/15 职场文书
致地震灾区的慰问信
2015/03/23 职场文书
导游词之云南丽江-泸沽湖
2019/09/26 职场文书
学习师德师风的心得体会(2篇)
2019/10/08 职场文书