JavaScript作用域深度剖析之动态作用域

 更新时间:2023年05月23日 10:13:48   作者:控心crazy  
这篇文章主要为大家介绍了 JavaScript作用域学习之动态作用域深度剖析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

前言

在之前的文章中, 我们说了作用域一共分为两种:词法作用域和动态作用域,而这篇文章我们一起来学习 动态作用域。

动态作用域

  • 动态作用域似乎有着很好的理由让作用域作为一个在运行时就被动态确定的形式,而不是在写代码时进行静态确定的形式。

考虑一下代码:

function foo() {
console.log(a); // 2
}
function bar() {
var a = 3;
foo();
}
var a = 2;
bar();
  • 在上述代码中,词法作用域让 foo() 中的 a 通过 RHS 引用到了全局作用域中的 a, 因此输出 2;
  • 在动态作用域中,它并不关心函数和作用域是如何声明以及在何处声明的,只关心他们从何处调用的。换句话说,作用域链是基于调用栈的,而不是代码中的作用域嵌套的。
  • 如果 JavaScript 具有动态作用域,理论上,上述代码 foo() 中的 a 输出 3; 因为 foo() 是在 bar() 中调用的,

为什么会这样?

  • 因为当 foo() 无法找到 a 的变量引用是,会顺着调用栈在调用 foo() 的地方查找 a,而不是在嵌套的词法作用域链中向上查找。由于 foo() 是在 bar() 中调用的,引擎会检查 bar() 的作用域,并找到值为 3 的变量 a。
  • 是不是很奇怪?

    • 但这其实是因为你可能只写过基于词法作用域的代码,因此对动态作用域感到陌生。如果你只用基于动态作用域的语言写过代码,就会觉得很自然的,而词法作用域看上去才怪怪的。
  • 事实上 JavaScript 并不具有动态作用域,它只有词法作用域。但 this 机制的存在在某种程度上很像动态作用域。

词法作用域与动态作用域的区别?

  • 动态作用域其实是 JavaScript 另一个重要机制 this 的表亲
  • 词法作用域是在书写代码或定义时确定的
  • 动态作用域是在运行时确定的。(this 也是)
  • 词法作用域关注函数在何处声明
  • 动态作用域关注函数从何处调用
  • 其实在 JavaScript 中的作用域大多为词法作用域。
  • 作用域链是基于调用栈的,而不是代码中的作用域嵌套的

特殊字符描述:

  • 问题标注 Q:(question)
  • 答案标注 R:(result)
  • 注意事项标准:A:(attention matters)
  • 详情描述标注:D:(detail info)
  • 总结标注:S:(summary)
  • 分析标注:Ana:(analysis)
  • 提示标注:T:(tips)

以上就是 JavaScript作用域深度剖析之动态作用域的详细内容,更多关于JavaScript动态作用域的资料请关注脚本之家其它相关文章!

相关文章

  • zepto中使用swipe.js制作轮播图附swipeUp,swipeDown不起效果问题

    zepto中使用swipe.js制作轮播图附swipeUp,swipeDown不起效果问题

    Swipe JS 是一个轻量级的移动滑动组件,支持 1:1 的触摸移动,阻力以及防滑性能都不错,可以让移动web应用展现更多的内容,能解决我们对于移动Web对滑动的需求。下面小编给大家介绍zepto中使用swipe.js制作轮播图附swipeUp,swipeDown不起效果问题,需要朋友可以参考下
    2015-08-08
  • 鼠标滚轮控制网页横向移动实现思路

    鼠标滚轮控制网页横向移动实现思路

    设置window的scrollLeft值,这里一定要是window不能是body否则滚动有问题,绑定事件mousewhell 也必须是在body上,感兴趣的各位可以了解下哈,希望可以帮助到你
    2013-03-03
  • 前端快速获取cookie的2种简单方式

    前端快速获取cookie的2种简单方式

    这篇文章主要给大家介绍了关于前端快速获取cookie的2种简单方式,Cookie是在HTTP协议下,服务器或脚本可以维护客户工作站上信息的一种方式,需要的朋友可以参考下
    2023-08-08
  • JavaScript BOM详解

    JavaScript BOM详解

    这篇文章主要为大家介绍了JavaScript BOM,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2021-12-12
  • el-date-picker组件隐藏时间组件底部清空按钮的操作步骤

    el-date-picker组件隐藏时间组件底部清空按钮的操作步骤

    工作中可能会遇到el-date-picker组件隐藏时间组件底部清空按钮,接下来通过本文给大家分享el-date-picker组件如何隐藏时间组件底部清空按钮,需要的朋友可以参考下
    2024-06-06
  • 微信小程序bindinput与bindsubmit的区别实例分析

    微信小程序bindinput与bindsubmit的区别实例分析

    这篇文章主要介绍了微信小程序bindinput与bindsubmit的区别,结合实例形式分析了微信小程序bindinput与bindsubmit的具体功能、用法及相关使用区别,需要的朋友可以参考下
    2019-04-04
  • axios的简单封装以及使用实例代码

    axios的简单封装以及使用实例代码

    一般我们在做一个大型项目的时候,需要用到很多接口时,我们为了方便使用,就把接口封装起来,这篇文章主要给大家介绍了关于axios简单封装以及使用的相关资料,需要的朋友可以参考下
    2021-06-06
  • 用apply让javascript函数仅执行一次的代码

    用apply让javascript函数仅执行一次的代码

    有时候我们只想要让某些脚步函数执行一次就算完成任务了。如何实现这种功能呢?简单模仿下面这段就可以轻松搞定了
    2010-06-06
  • 浅谈layer的iframe弹窗给里面的标签赋值的问题

    浅谈layer的iframe弹窗给里面的标签赋值的问题

    下面小编就为大家带来一篇浅谈layer的iframe弹窗给里面的标签赋值的问题。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • js拼接字符串时如何在中间加上空格

    js拼接字符串时如何在中间加上空格

    这篇文章主要介绍了js拼接字符串时如何在中间加上空格的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09

最新评论