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 相关文章推荐
fireworks菜单生成器mm_menu.js在 IE 7.0 显示问题的解决方法
Oct 20 Javascript
文本框获得焦点和失去焦点的判断代码
Mar 18 Javascript
js的.innerHTML = ""IE9下显示有错误的解决方法
Sep 16 Javascript
jquery弹窗插件colorbox绑定动态生成元素的方法
Jun 20 Javascript
JavaScript中getUTCMinutes()方法的使用详解
Jun 10 Javascript
AngularJS表单和输入验证实例
Nov 02 Javascript
详解Node.js:events事件模块
Nov 24 Javascript
使用bootstrap实现下拉框搜索功能的实例讲解
Aug 10 Javascript
详解关于JSON.parse()和JSON.stringify()的性能小测试
Mar 14 Javascript
Vue.js实现大屏数字滚动翻转效果
Nov 29 Javascript
利用 JavaScript 实现并发控制的示例代码
Dec 31 Javascript
React 并发功能体验(前端的并发模式)
Jul 01 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事务实例
2014/11/05 PHP
Zend Framework使用Zend_Loader组件动态加载文件和类用法详解
2016/12/09 PHP
laravel5.6框架操作数据curd写法(查询构建器)实例分析
2020/01/26 PHP
javascript限制文本框只允许输入数字(曾经与现在的方法对比)
2013/01/18 Javascript
JS中Iframe之间传值及子页面与父页面应用
2013/03/11 Javascript
你必须知道的JavaScript 变量命名规则详解
2013/05/07 Javascript
Js实现滚动变色的文字效果
2014/06/16 Javascript
js实现select跳转功能代码
2014/10/22 Javascript
静态页面html中跳转传值的JS处理技巧
2016/06/22 Javascript
babel基本使用详解
2017/02/17 Javascript
vue2笔记 — vue-router路由懒加载的实现
2017/03/03 Javascript
详解微信小程序 相对定位和绝对定位
2017/05/11 Javascript
详解Angular-Cli中引用第三方库
2017/05/21 Javascript
JS实现简单拖拽效果
2017/06/21 Javascript
Node.js爬取豆瓣数据实例分析
2018/03/05 Javascript
vue-socket.io跨域问题有效解决方法
2020/02/11 Javascript
浅析Vue 中的 render 函数
2020/02/28 Javascript
Python基础教程之正则表达式基本语法以及re模块
2016/03/25 Python
用Python实现命令行闹钟脚本实例
2016/09/05 Python
python getopt详解及简单实例
2016/12/30 Python
解析Python中的eval()、exec()及其相关函数
2017/12/20 Python
Python将多个excel文件合并为一个文件
2018/01/03 Python
Mac下Anaconda的安装和使用教程
2018/11/29 Python
详解使用PyInstaller将Pygame库编写的小游戏程序打包为exe文件
2019/08/23 Python
python多进程 主进程和子进程间共享和不共享全局变量实例
2020/04/25 Python
python 实用工具状态机transitions
2020/11/21 Python
CSS3 Flexbox中flex-shrink属性的用法示例介绍
2013/12/30 HTML / CSS
如何让IE9以下版本(ie6/7/8)认识html5元素
2013/04/01 HTML / CSS
创业计划书如何吸引他人眼球
2014/01/10 职场文书
银行办理业务介绍信
2014/01/18 职场文书
网吧最新创业计划书范文
2014/03/27 职场文书
通知的格式范文
2015/04/27 职场文书
医院志愿者活动总结
2015/05/06 职场文书
《文化苦旅》读后感:阅读,让人诗意地栖居在大地上
2019/12/24 职场文书
AudioContext 实现音频可视化(web技术分享)
2022/02/24 Javascript
面试提问mysql一张表到底能存多少数据
2022/03/13 MySQL