JavaScript静态作用域和动态作用域实例详解

 更新时间:2019年06月17日 09:41:29   作者:萌面大虾  
这篇文章主要介绍了JavaScript静态作用域和动态作用域的实例代码,本文通过文字实例代码相结合的形式给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

静态作用域指的是一段代码,在它执行之前就已经确定了它的作用域,简单来说就是在执行之前就确定了它可以应用哪些地方的作用域(变量)。

动态作用域–函数的作用域是在函数调用的时候才决定的

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。

相关文章

  • Bootstrap3 input输入框插入glyphicon图标的方法

    Bootstrap3 input输入框插入glyphicon图标的方法

    这篇文章主要介绍了Bootstrap3 input输入框插入glyphicon图标的方法的相关资料,需要的朋友可以参考下
    2016-05-05
  • JS如何将秒数转化为时分秒的形式

    JS如何将秒数转化为时分秒的形式

    在实际工作中经常会遇见把秒数转化为时分秒的问题,如何处理呢?下面这篇文章主要给大家介绍了关于JS如何将秒数转化为时分秒形式的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-12-12
  • js中值引用和地址引用实例分析

    js中值引用和地址引用实例分析

    这篇文章主要介绍了js中值引用和地址引用,结合实例形式分析了javascript值引用和地址引用相关原理、用法及操作注意事项,需要的朋友可以参考下
    2019-06-06
  • 基于JavaScript FileReader上传图片显示本地链接

    基于JavaScript FileReader上传图片显示本地链接

    这篇文章主要为大家详细介绍了基于JavaScript FileReader上传图片显示本地链接的相关资料,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-05-05
  • JavaScript获取表单enctype属性的方法

    JavaScript获取表单enctype属性的方法

    这篇文章主要介绍了JavaScript获取表单enctype属性的方法,涉及javascript操作表单属性的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-04-04
  • js获取系统的根路径实现介绍

    js获取系统的根路径实现介绍

    js如何获取系统的根路径,在本文给出了详细的方法,感兴趣的朋友可以参考下,希望对大家有所帮助
    2013-09-09
  • JavaScript键盘事件常见用法实例分析

    JavaScript键盘事件常见用法实例分析

    这篇文章主要介绍了JavaScript键盘事件常见用法,简单描述了javascript键盘事件的分类、功能,并结合实例形式给出了javascript响应键盘事件相关使用技巧,需要的朋友可以参考下
    2019-01-01
  • JS实现清除指定cookies的方法

    JS实现清除指定cookies的方法

    这篇文章主要介绍了JS实现清除指定cookies的方法,在web程序设计中非常实用,需要的朋友可以参考下
    2014-09-09
  • js中创建对象的几种方式示例介绍

    js中创建对象的几种方式示例介绍

    JavaScript中的所有事物都是对象,本文为大家介绍下JS中创建对象的几种方式,如原始方法、工厂方法等等
    2014-01-01
  • js实现二级菜单点击显示当前内容效果

    js实现二级菜单点击显示当前内容效果

    这篇文章主要介绍了js实现二级菜单点击显示当前内容效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-04-04

最新评论