揭开 JavaScript 作用域的神秘面纱(上)

在这里插入图片描述

🤍 前端开发工程师(主业)、技术博主(副业)、已过CET6
🍨 阿珊和她的猫_CSDN个人主页
🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》
🍚 蓝桥云课签约作者、已在蓝桥云课上架的前后端实战课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

文章目录

  • 引言
    • 介绍 JavaScript 作用域的重要性和基础概念
  • 作用域的分类
  • 变量的生命周期
    • 变量的创建、赋值和销毁
    • 作用域链的概念及解析过程

引言

介绍 JavaScript 作用域的重要性和基础概念

JavaScript 作用域是指在程序中定义变量和函数时可以访问和使用它们的范围
理解 JavaScript 作用域的重要性和基础概念对于编写可靠和可维护的代码至关重要。

以下是一些关于 JavaScript 作用域的重要性和基础概念的介绍:

  1. 作用域的重要性:
  • 避免命名冲突:通过使用作用域,可以确保在不同的范围内使用相同的变量名不会引起冲突。这有助于提高代码的可读性和可维护性。

  • 代码封装和隐私:作用域允许将相关的变量和函数组织在一起,形成一个独立的模块。这有助于实现代码的封装和隐私,防止外部代码直接访问和修改内部状态。

  • 错误避免:理解作用域可以帮助避免一些常见的错误,例如变量未声明就使用、函数内部使用外部变量等。

在这里插入图片描述

  1. 基础概念:
  • 全局作用域:全局作用域是指在整个 JavaScript 脚本中都可以访问和使用的变量和函数。在全局作用域中声明的变量可以在代码的任何地方访问。

  • 函数作用域:函数作用域是指在函数内部定义的变量和函数。这些变量和函数只能在函数内部访问,并且在函数执行完毕后会被销毁。

  • 块级作用域:块级作用域是由花括号 { } 所创建的范围。在块级作用域中声明的变量只能在该块内访问。

  • 作用域链:JavaScript 使用作用域链来确定变量的查找顺序。当查找一个变量时,会从当前作用域开始向上搜索,直到找到该变量或到达全局作用域。

在这里插入图片描述

理解 JavaScript 作用域的重要性和基础概念对于编写可靠和可维护的代码至关重要。通过正确使用作用域,可以更好地组织和管理变量,避免命名冲突,并提高代码的可读性和可扩展性。

作用域的分类

作用域根据其使用范围的不同,可以分为以下几种类型:

  1. 全局作用域(Global Scope):全局作用域是指在代码中任何地方都可以访问的作用域。在全局作用域中声明的变量和函数可以被代码中的任何其他部分访问。
let globalVariable = 'global value';
function globalFunction() {
  console.log('Global function');
}
  1. 函数作用域(Function Scope):函数作用域是指在函数内部声明的变量和函数只能在该函数内部访问,外部无法访问。这意味着在不同函数中可以使用相同名称的变量而互不干扰。
function functionScope() {
  let localVar = 'local value';
  function localFunction() {
    console.log('Local function');
  }
  localVar = 'modified value';
  localFunction(); // 输出:Local function
}
  1. 块级作用域(Block Scope):块级作用域是指由一对花括号({})包裹起来的代码块内部声明的变量和函数,只能在该代码块内部访问。

在ES6(ECMAScript 2015)之后引入了letconst关键字,使得JavaScript中可以使用块级作用域。

{
  let localVar = 'block value';
  function localFunction() {
    console.log('Block function');
  }
}

命名空间:命名空间是一种用于避免命名冲突的机制。在 JavaScript 中,可以使用namespace关键字来创建命名空间。命名空间中的变量和函数可以与其他命名空间中的变量和函数区分开来。

namespace MyNamespace {
  let localVar = 'namespace value';
  function localFunction() {
    console.log('Namespace function');
  }
}

变量的生命周期

变量的生命周期是**指变量从创建、赋值到最终销毁的过程。**在 JavaScript 中,变量的生命周期与作用域密切相关。下面详细说明变量的创建、赋值和销毁,以及作用域链的概念和解析过程:

变量的创建、赋值和销毁

  • 创建:当声明一个变量时,变量就被创建了。例如,使用letconstvar关键字声明变量。

  • 赋值:在变量创建后,可以对变量进行赋值。赋值操作将值赋给变量,使变量具有特定的值。例如,let x = 5;

  • 销毁:变量的销毁发生在变量的作用域结束时。当变量所在的块(例如函数、循环等)执行完毕后,变量就会被销毁。在 JavaScript 中,变量的生命周期通常与它们的作用域相关。

作用域链的概念及解析过程

  • 作用域链的概念:作用域链是 JavaScript 用来查找变量的机制。它是由一系列的嵌套作用域组成的链,从当前执行上下文的作用域开始,一直到全局作用域。

  • 解析过程:当 JavaScript 引擎需要查找一个变量时,它会从当前执行上下文的作用域开始查找。如果在当前作用域中找到了该变量,就使用该变量的值。如果在当前作用域中没有找到,就会继续向上查找父作用域。这个过程会一直持续,直到找到变量或到达全局作用域为止。如果最终没有找到变量,就会抛出ReferenceError异常。

通过理解变量的生命周期和作用域链的概念及解析过程,可以更好地管理变量的可见性和范围,避免命名冲突,并提高代码的可维护性。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/296085.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Mac 安装Nginx教程

Nginx官网 Nginx官网英文 1.在终端输入brew search nginx 命令检查nginx是否安装了 2. 安装命令:brew install nginx 3. 查看Nginx信息命令brew info nginx 4. 启动 nginx方式:在终端里输入 nginx 5.查看 nginx 是否启动成功 在浏览器中访问http://l…

通过使用别名让 SQL 更简短-数据库教程shulanxt.com-帆软软件有限公司

MySQL视频教程导航 https://www.shulanxt.com/database/mysqlvideo/p1 SQL 别名 SQL 别名 通过使用 SQL,可以为表名称或列名称指定别名。 基本上,创建别名是为了让列名称的可读性更强。 列的 SQL 别名语法 SELECT column_name AS alias_name FROM …

【java】期末复习知识点

简单不先于复杂,而是在复杂之后。 文章目录 填空题封装包主类开发过程的改变interfaceabstract class访问控制关键字继承多态object 类Java I/O(输入/输出)异常线程和进程创建线程的两种基本方法 编程题Hello World编写Swing程序,显示一个空白窗口 填空题…

Huggy Lingo: 利用机器学习改进 Hugging Face Hub 上的语言元数据

太长不看版: Hub 上有不少数据集没有语言元数据,我们用机器学习来检测其语言,并使用 librarian-bots 自动向这些数据集提 PR 以添加其语言元数据。 Hugging Face Hub 已成为社区共享机器学习模型、数据集以及应用的存储库。随着 Hub 上的数据集越来越多&…

【AI视野·今日Sound 声学论文速览 第三十八期】Mon, 1 Jan 2024

AI视野今日CS.Sound 声学论文速览 Mon, 1 Jan 2024 Totally 5 papers 👉上期速览✈更多精彩请移步主页 Daily Sound Papers The Arrow of Time in Music -- Revisiting the Temporal Structure of Music with Distinguishability and Unique Orientability as the …

案例093:基于微信小程序的南宁周边乡村游设计与实现

文末获取源码 开发语言:Java 框架:SSM JDK版本:JDK1.8 数据库:mysql 5.7 开发软件:eclipse/myeclipse/idea Maven包:Maven3.5.4 小程序框架:uniapp 小程序开发软件:HBuilder X 小程序…

【CMake】1. VSCode 开发环境安装与运行

CMake 示例工程代码 https://github.com/LABELNET/cmake-simple 插件 使用 VSCode 开发C项目,安装 CMake 插件 CMakeCMake ToolsCMake Language Support (建议,语法提示) 1. 配置 CMake Language Support , Windows 配置 donet 环境 这…

nginx连接数和性能优化

目录 一:介绍 二:优化配置 三:其他优化策略 一:介绍 Nginx是一个高性能的HTTP和反向代理服务器,具有许多用于优化连接数和性能的配置选项。以下是一些关键的配置和优化建议: 1:worker_proc…

Fast DDS 官方--C++ API Reference

Fast DDS 官方--C API Reference 1 介绍2 接口2.1 DDS DCPS PIM2.1.1 Core2.1.1.1 Entity 【基类】2.1.1.2 DomainEntity2.1.1.3 Policy 【枚举】2.1.1.3.1 DataRepresentationId2.1.1.3.2 DataRepresentationQosPolicy2.1.1.3.3 DataSharingQosPolicy2.1.1.3.4 DataSharingKin…

Spark MLlib简介与机器学习流程

在大数据领域,机器学习是一个关键的应用领域,可以用于从海量数据中提取有价值的信息和模式。Apache Spark MLlib是一个强大的机器学习库,可以在分布式大数据处理环境中进行机器学习任务。本文将深入介绍Spark MLlib的基本概念、机器学习流程以…

集合-及其各种特征详解

集合 概念:是提供一种存储空间 可变 的存储模型,存储的数据容量可以发生改变。(也就是集合容量不固定) 集合关系图 绿色的代表接口,蓝色的代表接口的实现类 单列集合 Collection(接口) 概述:单列集合的…

SSH 密钥身份验证和管理

安全外壳协议(Security Shell Protocol)是一种应用于计算机网络的安全通信协议,其提供的服务可用于保护网络上的连接和数据传输安全性,其核心思想是为网络上的两台计算机之间搭建一个安全的外壳,以保护数据传输的安全性…

企业微信开发:自建应用:接收消息(企业内部服务器)/回调配置

概述 在企业微信的自建应用中,用户触发了某些行为(发送消息、进行菜单操作或者外部联系人变更等),要发送相关信息给企业内部服务器。 备注:接收消息 和 回调,在本文中指代相同的行为,即企业微信…

多内层神经网络具有先天的不可解释性

多层神经网络的不可解释性是指其内部的决策过程很难被人类理解和解释。这主要是因为多层神经网络具有大量的神经元和多个层次的连接,使得网络的决策过程变得非常复杂。 具体而言,多层神经网络中每一层的神经元会根据输入的特征进行加权组合和非线性变换&…

【管理篇 / 恢复】❀ 08. 文件权限对macOS下用命令刷新固件的影响 ❀ FortiGate 防火墙

【简介】虽然上篇文章中成功的在macOS下刷新了固件,但是很多小伙伴在实际操作中碰到了无法成功的状况,我们来看看最常见的一种。 在/private/tftpboot目录拷贝另一个版本的固件文件,具体拷贝过程不再详述。 打开终端,输入命令 sud…

Java内存泄漏问题分析

内存泄漏也是一个老八股文了,下面来看看实际项目中内存泄漏的场景分析 时间回到9月某一天 分析阶段一 现象:在当时各种请求在那段时间响应很慢,特别是 kafka异步消费线程 不足点:当时主业务基本不可用,有点急&#…

线性代数 --- 为什么LU分解中L矩阵的行列式一定等于(+-)1?

以下是关于下三角矩阵L的行列式一定等于-1的一些说明 证明:在LU分解中,下三角矩阵L的行列式一定是. 在证明之前,我这里先补充几条关于行列式的性质: 性质1:对于三角矩阵而言,不论是上三角矩阵还是下三角矩…

分布式之任务调度学习一

1 任务调度 1.1 什么时候需要任务调度? 1.1.1 任务调度的背景 在业务系统中有很多这样的场景: 1、账单日或者还款日上午 10 点,给每个信用卡客户发送账单通知,还款通知。如何判断客户的账单日、还款日,完成通知的发…

【数据库系统概论】数据库并发控制机制——并发操作带来的数据不一致性问题有哪些

系统文章目录 数据库的四个基本概念:数据、数据库、数据库管理系统和数据库系统 数据库系统的三级模式和二级映射 数据库系统外部的体系结构 数据模型 关系数据库中的关系操作 SQL是什么?它有什么特点? 数据定义之基本表的定义/创建、修改和…

扩展 apiserver 连接认证 ip, apiserver证书更新

本文来自我的博客地址 文章目录 问题场景:问题分析:问题解决:查看 apiserver 证书支持的 ip 或 host使用 openssl 生成证书:再次查看 apiserver 证书支持的 ip 或 host 再次尝试将 master 加点加入参考 问题场景: k8s 1.28.1 集群后期新增 vip apiserver 证书不支持 vip 引入…