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 相关文章推荐
一个判断email合法性的函数[非正则]
Dec 09 Javascript
js相册效果代码(点击创建即可)
Apr 16 Javascript
JS实现随机乱撞彩色圆球特效的方法
May 05 Javascript
js阻止默认浏览器行为与冒泡行为的实现代码
May 15 Javascript
JS修改地址栏参数实例代码
Jun 14 Javascript
jQuery插件echarts去掉垂直网格线用法示例
Mar 03 Javascript
JS判断数组那点事
Oct 10 Javascript
详解开源的JavaScript插件化框架MinimaJS
Oct 26 Javascript
React从react-router路由上做登陆验证控制的方法
May 10 Javascript
Cookbook组件形式:优化 Vue 组件的运行时性能
Nov 25 Javascript
微信小程序bindinput与bindsubmit的区别实例分析
Apr 17 Javascript
vue实现虚拟列表功能的代码
Jul 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 删除一个目录及目录下的所有文件的函数代码
2010/05/26 PHP
WordPress中转义HTML与过滤链接的相关PHP函数使用解析
2015/12/22 PHP
phpStudy vscode 搭建debug调试的教程详解
2020/07/28 PHP
通过Jscript中@cc_on 语句识别IE浏览器及版本的代码
2011/05/07 Javascript
JQuery触发radio或checkbox的change事件
2012/12/18 Javascript
jQuery中操控hidden、disable等无值属性的方法
2014/01/06 Javascript
JavaScript仿flash遮罩动画效果
2016/06/15 Javascript
AngularJS基础 ng-repeat 指令简单示例
2016/08/03 Javascript
Javascript中Promise的四种常用方法总结
2017/07/14 Javascript
详解Vue中使用Echarts的两种方式
2018/07/03 Javascript
Node.js如何优雅的封装一个实用函数的npm包的方法
2019/04/29 Javascript
nodejs文件夹深层复制功能
2019/09/03 NodeJs
浅谈vue中$bus的使用和涉及到的问题
2020/07/28 Javascript
tornado框架blog模块分析与使用
2013/11/21 Python
Python中实现从目录中过滤出指定文件类型的文件
2015/02/02 Python
python实现求最长回文子串长度
2018/01/22 Python
使用Python更换外网IP的方法
2018/07/09 Python
python 以16进制打印输出的方法
2018/07/09 Python
解决yum对python依赖版本问题
2019/07/05 Python
python hough变换检测直线的实现方法
2019/07/12 Python
浅谈python中频繁的print到底能浪费多长时间
2020/02/21 Python
python实现打砖块游戏
2020/02/25 Python
配置python的编程环境之Anaconda + VSCode的教程
2020/03/29 Python
判断Threading.start新线程是否执行完毕的实例
2020/05/02 Python
解析HTML5中的新功能本地存储localStorage
2016/03/01 HTML / CSS
香港最大的洋酒零售连锁店:屈臣氏酒窖(Watson’s Wine)
2018/12/10 全球购物
英国的潮牌鞋履服饰商店:size?
2019/03/26 全球购物
vue+django实现下载文件的示例
2021/03/24 Vue.js
销售顾问的岗位职责
2013/11/13 职场文书
餐饮采购员岗位职责
2014/03/15 职场文书
士力架广告词
2014/03/20 职场文书
酒店管理专业自荐信
2014/05/23 职场文书
旷工检讨书1000字
2015/01/01 职场文书
在Windows下安装配置CPU版的PyTorch的方法
2021/04/02 Python
阿里云服务器部署mongodb的详细过程
2021/09/04 MongoDB
JavaScript中isPrototypeOf函数
2021/11/07 Javascript