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。

相关文章

  • 微信小程序判断用户是否需要再次授权获取个人信息

    微信小程序判断用户是否需要再次授权获取个人信息

    这篇文章主要介绍了微信小程序判断用户是否需要再次授权获取个人信息,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-07-07
  • JS实现随机数生成算法示例代码

    JS实现随机数生成算法示例代码

    JS实现随机数生成算法的方法有很多,本文为大家介绍一个比较不错的方法,代码如下,感兴趣的朋友可以参考下,希望对大家有所帮助
    2013-08-08
  • JS实现简单的天数计算器完整实例

    JS实现简单的天数计算器完整实例

    这篇文章主要介绍了JS实现简单的天数计算器,结合完整实例形式分析了javascript针对日期的获取及天数运算相关操作技巧,需要的朋友可以参考下
    2017-04-04
  • Bootstrap下拉菜单效果实例代码分享

    Bootstrap下拉菜单效果实例代码分享

    这篇文章主要为大家详细介绍了Bootstrap下拉菜单效果实例代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-06-06
  • JavaScript遍历查找数组中最大值与最小值的方法示例

    JavaScript遍历查找数组中最大值与最小值的方法示例

    这篇文章主要介绍了JavaScript遍历查找数组中最大值与最小值的方法,结合实例形式分析了javascript基于数组遍历、判断实现最大值与最小值计算的相关操作技巧,需要的朋友可以参考下
    2019-05-05
  • js删除所有的cookie的代码

    js删除所有的cookie的代码

    有时候需要删除网站的cookies,一个一个太麻烦,这个可以批量的删除所有的cookies,需要的朋友可以参考下。
    2010-11-11
  • js中的面向对象之对象常见创建方法详解

    js中的面向对象之对象常见创建方法详解

    这篇文章主要介绍了js中的面向对象之对象常见创建方法,结合实例形式较为详细的分析了JavaScript创建对象的四种常用方式,需要的朋友可以参考下
    2019-12-12
  • js Array对象的扩展函数代码

    js Array对象的扩展函数代码

    有时候我们需要对js的array对象扩展一些功能,这里简单介绍下,方便需要的朋友
    2013-04-04
  • Three.js利用dat.GUI如何简化试验流程详解

    Three.js利用dat.GUI如何简化试验流程详解

    dat.gui可以方便地向场景中添加控制条,随时调整参数。下面这篇文章主要给大家介绍了关于Three.js利用dat.GUI如何简化试验流程的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-09-09
  • 浅析JavaScript中的特殊数据类型

    浅析JavaScript中的特殊数据类型

    在JavaScript中,有6大数据类型,分别包括string,number,boolean,undefined,null 和 object。下面通过通过本文给大家介绍JavaScript中的特殊数据类型,需要的朋友参考下吧
    2017-12-12

最新评论