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

news2024/9/24 3:18:54

在这里插入图片描述

🤍 前端开发工程师(主业)、技术博主(副业)、已过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.coloradmin.cn/o/1360379.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

第11章 GUI Page462~476 步骤二十三 步骤二十四 Undo/Redo ②“添加操作”支持“Undo/Redo”

工程二 1.为AddAction类添加Undo() Redo() GetName()成员函数 2.实现AddAction类的Undo() Redo()函数 3.运行效果,但是日志窗口没有记录 原因:AddAction(EditAction* newAction)函数没有实现,另外参数是EditAction类型 所以我们还需要在基…

C# .Net学习笔记—— 异步和多线程(await/async)

一、介绍 1、控制台测试await/async 2、C# 5.0 .Net framework4.5 CLR4.0 以后才有,本身是一种语法糖 二、基本测试 1、不加await测试。 private async static Task TestAsync() {Log.Info($"当前主线程id{Thread.CurrentThread.ManagedThreadId}"…

简易视频播放器(案例)

介绍 本篇Codelab使用ArkTS语言实现视频播放器,主要包括主界面和视频播放界面,我们将一起完成以下功能: 主界面顶部使用Swiper组件实现视频海报轮播。主界面下方使用List组件实现视频列表。播放界面使用Video组件实现视频播放。在不使用视频组…

在Uniapp中使用Echarts创建可视化图表

在uniapp中可以引入echarts创建数据可视化图表。 1. 安装Echarts 使用npm安装echarts插件,命令如下: npm install echarts --save2. 引入Eharts 在需要使用Echarts的页面引入: import *as echarts from echarts3. 创建实例 创建画布元素…

基于单片机的农田灌溉系统(论文+源码)

1.系统设计 本系统主要实现如下目标: 1.可以实时监测土壤湿度; 2.土壤湿度太低时,进行浇水操作; 3.可以按键设置湿度的触发阈值; 4. 可以实现远程操控 5.可以实现手…

基于 ESP32-C3 开启 Flash 加密和安全启动并进行 OTA 测试

软件: esp-idf v5.1.2 硬件: ESP32-C3 board 1. 首先,准备一个明文固件 hello-world.bin 基于 esp-idf-v5.1.2\examples\get-started\hello_world 例程,使用如下指令,直接编译,获取明文固件 hello-worl…

【软考中级-软件设计师】day1:CPU、数据的表示、校验码

考点分布目录 中央处理单元CPU 练习题 数据的表示 二进制转十进制 练习题 十进制转二进制 练习题 原码 练习题 反码 练习题 补码 练习题 练习题 移码 浮点数 练习题 奇偶校验 练习题 校验码 模2除法 循环冗余校验CRC 练习题 练习题 练习题 奇偶校验码 只…

【读书】《白帽子讲web安全》个人笔记Ⅰ-1

目录 前言: 第1章 我的安全世界观 1.1 Web安全简史 1.1.1中国黑客简史 1.1.2黑客技术的发展历程 1.1.3web安全的兴起 1.2黑帽子,白帽子 1.3返璞归真,揭秘安全的本质 1.4破除迷信,没有银弹 1.5安全三要素 1.6如何实施安…

​结构体数组

1. 结构体的声明 1.1 结构体的基础知识 结构是一些值的集合,这些值被称为成员变量。结构的每个成员可以是不同类型的变量。 1.2 结构的声明 struct tag {member - list; }variable-list; 例:描述一个人的信息:名字电话性别身高 //声明的…

Vue2 - computed 和 method 的原理区别

目录 1,简单对比2,原理的不同1,method 的处理2,computed 的处理实现缓存触发更新 3,触发更新时的问题 1,简单对比 computed 当做属性使用,method 当做方法使用。computed 可以提供 getter 和 s…

DS|图(连通与生成树)

题目一:DS图 -- 图的连通分量 题目描述: 输入无向图顶点信息和边信息,创建图的邻接矩阵存储结构,计算图的连通分量个数。 输入要求: 测试次数t 每组测试数据格式如下: 第一行:顶点数 顶点…

【激活函数】GELU 激活函数

1、介绍 GELU (Gaussian Error Linear Units) 是一种基于高斯误差函数的激活函数,相较于 ReLU 等激活函数,GELU 更加平滑,有助于提高训练过程的收敛速度和性能。 # GELU激活函数的定义 def gelu(x):return 0.5 * x * (1 torch.tanh(np.sqrt…

了解统计分析中的岭回归

一、介绍 在统计建模和机器学习领域,回归分析是用于理解变量之间关系的基本工具。在各种类型的回归技术中,岭回归是一种特别有用的方法,尤其是在处理多重共线性和过拟合时。本文深入探讨了岭回归的概念、其数学基础、应用、优点和局限性。 在…

OpenHarmony从入门到放弃(四)

设计一款使用Harmony开发的App 接下来我会通过设计并开发一款资讯类的App来入门OpenHarmony; 以下是我对App的设计想法; 一、模块划分 内容模块:App的核心模块,负责管理和展示资讯内容,具体包括内容获取与处理&…

云化XR技术于农业领域中的表现

随着科技的不断发展和应用的深入,农业领域也在逐渐引入新技术来优化生产效率和成本、改进管理和监控等。云化XR(CloudXR)作为一种融合了云计算、虚拟现实(VR)和增强现实(AR)等技术的解决方案&am…

AntV-G6 -- 将G6图表应用到项目中

1. 效果图 2. 安装依赖 npm install --save antv/g6 3. 代码 import { useEffect } from alipay/bigfish/react; import G6 from antv/g6;const data {id: root,label: 利息收入,subLabel: 3,283.456,ratio: 3,children: [{id: child-a,label: 平均利息,subLabel: 9%,ratio:…

机器视觉兄弟们,没有项目订单,机器视觉项目行业难题来了

产品没一个正形,光源像是打了几十年的光棍一样,偏偏配不上,n次“相亲”之后图像硬是“阴晴圆缺”,老板阴阳怪气你这打不出来,给客户看之后说,这都打不出来,你们不行啊。 我听了后真想&#xff…

字节填充与0比特填充以及数据链路的基本问题

目录 字节填充: 比特填充: 数据链路有三个基本问题 1.封装成帧 2.透明传输 3.差错检测 首先介绍一下PPP的帧结构: 首部的第一个字段和尾部的第二个字段都是标志字段F(Flag),规定为0x7E (符号“0x”表示它后面的字符是用十六…

Android低功耗蓝牙开发总结

基础使用 权限申请 蓝牙权限在各个版本中略有不同 Android 12 及以上版本,如果不需要通过蓝牙来推断位置的话,蓝牙扫描不需要开启位置权Android 11 及以下版本,蓝牙扫描必须开启位置权限Android 9 及以下版本,蓝牙扫描可开启粗…

弧形导轨和直线导轨的区别

弧形导轨和直线导轨是两种常见的导轨类型,都具有支撑和引导功能,都可以将运动的能量传递到接收端,实现稳定的运动。那么这两者有什么区别呢? 从结构上来看,直线导轨呈现直线的形状,在机器设备的运动中起到了…