热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

JavaScript作用域详解

一、什么是作用域(Scope)[[scope]]:每个javascript函数都是一个对象,对象中有些属性我们可以访问(例

一、什么是作用域(Scope)

[[scope]]:每个Javascript函数都是一个对象,对象中有些属性我们可以访问(例如name属性),但有些不可以,这些属性仅供Javascript引擎存取,[[scope]]就是其中一个。[[scope]]指的就是我们所说的作用域,其中存储了运行期上下文的集合。即作用域决定了代码区块中变量和其他资源的可见性。

二、变量的作用域类型

1.全局作用域:全局作用域贯穿整个Javascript文档,在所有函数声明或者大括号之外定义的变量,都在全局作用域里。一旦你声明了一个全局变量,那么你在任何地方都可以使用它,包括函数内部。

2.局部作用域:局部作用域一般只在固定的代码片段内可访问到,而其外部是无法访问的,它分为函数作用域和块级作用域


  • 函数作用域: 当你在函数里定义一个变量时,它在函数内任何地方都可以使用。在函数之外,你就无法访问它了。
  • 块级作用域:你在使用大括号时,声明了一个const或者let的变量时,你就只能在大括号内部使用这一变量。

三、作用域链

作用域链:[[scope]]中所存储的执行期上下文对象的集合,这个集合呈链式链接,我们把这种链式链接叫做作用域链。

四、执行期上下文

当函数执行时,会创建一个称为执行期上下文的内部对象(即AO)。一个执行期上下文定义了一个函数执行时的环境,函数每次执行时对应的执行上下文都是独一无二的,所以多次调用一个函数会导致创建多个执行上下文,当函数执行完毕,执行上下文被销毁。

五、查找变量

在函数中查找变量,从其作用域链的顶端依次向下查找,从Scope chain 的0位依次查到最后一位。

通过一个例子具体了解上面的定义:

function a(){function b(){var b = 234;}var a = 123;b();
}
var glob = 100;
a()

1:a()定义时,其Scope里存放GO

在这里插入图片描述

2:a()执行时,形成作用域链,Scope chain[0] 存放AO, Scope chain[1] 存放GO

在这里插入图片描述

3:b()定义,因为它是a()内部的函数,因此其执行期上下文与a()执行时是一样的;

在这里插入图片描述

4:b()执行时,产生自己的AO,在作用域链中将a()的AO与GO储存位置下移,第0位存自己的AO

在这里插入图片描述

注意:b() Scope chain 储存的a() 的AO与a()中的AO一样,只是将其引用挂到里面,即通过b()中可以改变a()中变量的值

例:

<script>function a() {function b() {var bb = 234aa = 0}var aa = 123;b();console.log(a);}var glob = 100;a();
</script>

输出a的值为 0


推荐阅读
  • C++ 异步编程中获取线程执行结果的方法与技巧及其在前端开发中的应用探讨
    本文探讨了C++异步编程中获取线程执行结果的方法与技巧,并深入分析了这些技术在前端开发中的应用。通过对比不同的异步编程模型,本文详细介绍了如何高效地处理多线程任务,确保程序的稳定性和性能。同时,文章还结合实际案例,展示了这些方法在前端异步编程中的具体实现和优化策略。 ... [详细]
  • 在PHP中如何正确调用JavaScript变量及定义PHP变量的方法详解 ... [详细]
  • 技术分享:使用 Flask、AngularJS 和 Jinja2 构建高效前后端交互系统
    技术分享:使用 Flask、AngularJS 和 Jinja2 构建高效前后端交互系统 ... [详细]
  • 利用 JavaScript 和 Node.js 验证时间的有效性
    本文探讨了如何使用 JavaScript 和 Node.js 验证时间的有效性。通过编写一个 `isTime` 函数,我们可以确保输入的时间格式正确且有效。该函数利用正则表达式匹配时间字符串,检查其是否符合常见的日期时间格式,如 `YYYY-MM-DD` 或 `HH:MM:SS`。此外,我们还介绍了如何处理不同时间格式的转换和验证,以提高代码的健壮性和可靠性。 ... [详细]
  • 如何撰写适应变化的高效代码:策略与实践
    编写高质量且适应变化的代码是每位程序员的追求。优质代码的关键在于其可维护性和可扩展性。本文将从面向对象编程的角度出发,探讨实现这一目标的具体策略与实践方法,帮助开发者提升代码效率和灵活性。 ... [详细]
  • 本文介绍了如何使用 Node.js 和 Express(4.x 及以上版本)构建高效的文件上传功能。通过引入 `multer` 中间件,可以轻松实现文件上传。首先,需要通过 `npm install multer` 安装该中间件。接着,在 Express 应用中配置 `multer`,以处理多部分表单数据。本文详细讲解了 `multer` 的基本用法和高级配置,帮助开发者快速搭建稳定可靠的文件上传服务。 ... [详细]
  • 在 JavaScript 中,浮点数的除法运算常常会出现精度问题。本文介绍了一种方法,通过自定义函数来精确控制除法运算结果的小数位数,确保计算结果的准确性。该方法不仅适用于除法,还可以扩展到其他浮点数运算,有效避免了 JavaScript 在处理浮点数时常见的精度误差。 ... [详细]
  • 在尝试对 QQmlPropertyMap 类进行测试驱动开发时,发现其派生类中无法正常调用槽函数或 Q_INVOKABLE 方法。这可能是由于 QQmlPropertyMap 的内部实现机制导致的,需要进一步研究以找到解决方案。 ... [详细]
  • 2.2 组件间父子通信机制详解
    2.2 组件间父子通信机制详解 ... [详细]
  • 浏览器作为我们日常不可或缺的软件工具,其背后的运作机制却鲜为人知。本文将深入探讨浏览器内核及其版本的演变历程,帮助读者更好地理解这一关键技术组件,揭示其内部运作的奥秘。 ... [详细]
  • 全面解析JavaScript代码注释技巧与标准规范
    在Web前端开发中,JavaScript代码的可读性和维护性至关重要。本文将详细介绍如何有效地使用注释来提高代码的可读性,并探讨JavaScript代码注释的最佳实践和标准规范。通过合理的注释,开发者可以更好地理解和维护复杂的代码逻辑,提升团队协作效率。 ... [详细]
  • 本文介绍了一种将 JavaScript 中的数字转换为 Excel 列字母标识的方法。通过使用字符编码和数学运算,该方法能够高效地将数字映射到对应的 Excel 列名。具体实现中,利用了字符 'A' 和 'Z' 的 Unicode 编码值,并结合字符串拼接技术,确保生成的列名准确无误。这种方法不仅适用于常规的列索引转换,还能处理超过 26 列的情况,适用于各种复杂场景。 ... [详细]
  • 深入解析JavaScript柯里化的实现机制及其应用场景
    本文深入探讨了JavaScript中柯里化的实现机制及其应用场景。通过详细的示例代码,文章全面解析了柯里化的工作原理和实际应用,为读者提供了宝贵的学习资源,有助于提升编程技能和解决实际开发中的问题。 ... [详细]
  • 本指南介绍了如何在ASP.NET Web应用程序中利用C#和JavaScript实现基于指纹识别的登录系统。通过集成指纹识别技术,用户无需输入传统的登录ID即可完成身份验证,从而提升用户体验和安全性。我们将详细探讨如何配置和部署这一功能,确保系统的稳定性和可靠性。 ... [详细]
  • 题目要求维护一个数列,并支持两种操作:一是查询操作,语法为QL,用于查询数列末尾L个数中的最大值;二是更新操作,用于修改数列中的某个元素。本文通过ST表(Sparse Table)优化查询效率,确保在O(1)时间内完成查询,同时保持较低的预处理时间复杂度。 ... [详细]
author-avatar
詹詹洋zy_431
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有