揭开 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.hqwc.cn/news/325231.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

欧科云链研究院:奔赴2024,Web3与AI共振引爆数字时代潘多拉魔盒

出品|欧科云链研究院 2024年,Web3与AI两个数字科技的巅峰碰撞,欧科云链研究院探索AI与Web3的技术融合,与澎湃科技联合发布2024年展望,原标题为《2024年展望:Web3与AI共振引爆可信数字社会》,共…

【本科生通信原理】【实验报告】【北京航空航天大学】实验一:通信原理初步

一、实验目的: 熟悉 MATLAB开发环境、掌握 MATLAB基本运算操作;熟悉和了解 MATLAB图形绘制基本指令;熟悉使用 MATLAB分析信号频谱的过程;掌握加性白高斯噪声信道模型 二、实验内容: 三、实验程序: 1、 f…

Ubuntu 安装Nginx服务

文章目录 前言一、Nginx安装1. Nginx默认安装2. Nginx指定版本安装3. Nginx验证4. Nginx服务控制4.1 查看服务状态4.2 停止服务4.3 启动服务4.4 重启服务 5. Nginx文件存放目录 二、自己编译Nginx1. 下载源码2. 依赖配置3. 编译 三、Nginx卸载总结 前言 Nginx(发音为…

flutter版本升级后,解决真机和模拟器运行错误问题

flutter从3.3.2升级到3.16.0,项目运行到真机和模拟器报同样的错,错误如下: 解决办法:在android目录下的build.gradle加入下面这行,如下图: 重新运行,正常把apk安装到真机上或者运行到模拟器上

Leetcode2965. 找出缺失和重复的数字

Every day a Leetcode 题目来源:2965. 找出缺失和重复的数字 解法1:哈希 用哈希表统计数组 grid 中各元素的出现次数,其中出现次数为 2 的记为 a。 统计数组 grid 的元素之和为 sum。 数组 grid 其中的值在 [1, n2] 范围内,…

【ONE·MySQL || 基本查询(CRUD)】

总言 主要内容:表的增删查改(DML操作)。insert插入(包含插入更新、插入查询),replace替换。select查询(包含列别名、distinct去重、where条件筛选、order排序、limit子句、group by子句、having…

使用 Python 进行贝叶斯优化

一、介绍 贝叶斯优化是一种先进的技术,用于优化评估成本高昂的函数。该策略为全局优化提供了原则性策略,强调探索(尝试新领域)和开发(尝试看起来有前途的领域)之间的平衡。 二、什么是贝叶斯优化&#xff1…

【AI视野·今日Sound 声学论文速览 第三十七期】Tue, 31 Oct 2023

AI视野今日CS.Sound 声学论文速览 Tue, 31 Oct 2023 Totally 11 papers 👉上期速览✈更多精彩请移步主页 Daily Sound Papers DCHT: Deep Complex Hybrid Transformer for Speech Enhancement Authors Jialu Li, Junhui Li, Pu Wang, Youshan Zhang当前大多数基于深…

云卷云舒:【实战篇】Redis迁移

1. 简介 Remote Dictionary Server(Redis)是一个由Salvatore Sanfilippo写的key-value存储系统,是一个开源的使用ANSIC语言编写、遵守BSD协议、支持网络、可基于内存亦可持久化的日志型、Key-Value数据库,并提供多种语言的API。 2. 迁移原理 redis-sh…

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

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

JVM加载class文件的原理机制

1、JVM 简介 JVM 是我们Javaer 的最基本功底了,刚开始学Java 的时候,一般都是从“Hello World ”开始的,然后会写个复杂点class ,然后再找一些开源框架,比如Spring ,Hibernate 等等,再然后就开发…

Unity添加所有场景到BuildSettings

Unity添加所有场景到BuildSettings using UnityEngine; using UnityEditor; using System.Collections.Generic; using System.IO; public class Tools : Editor {[MenuItem("Tools/添加所有场景到BuildSettings")]static void CheckSceneSetting(){List<string&…