揭开 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.mzph.cn/news/600522.shtml

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

相关文章

简单vlan划分和dhcp中继(Cisco Packet Tracer模拟)

文章目录 1. 前言2. 功能实现2.1. dhcp服务器接入2.2. 学校web服务器2.3. 设置学校dns服务器2.4. 设置线路冗余2.5. 配置ac。 1. 前言 在这里我们的计网作业是使用思科的Cisco Packet Tracer进行对校园网的简单规划,这里我对校园网进行了简单的规划,功能…

前端页面的生命周期

性能问题呈现给用户的感受往往就是简单而直接的:加载资源缓慢、运行过程卡顿或响应交互延迟等。而在前端工程师的眼中,从域名解析、TCP建立连接到HTTP的请求与响应,以及从资源请求、文件解析到关键渲染路径等,每一个环节都有可能因…

django websocket实现聊天室功能

注意事项channel版本 django2.x 需要匹配安装 channels 2 django3.x 需要匹配安装 channels 3 Django3.2.4 channels3.0.3 Django3.2.* channels3.0.2 Django4.2 channles3.0.5 是因为最新版channels默认不带daphne服务器 直接用命令 python manage.py runsever 默认运行的是w…

K8S中的hostPort、NodePort 、targetPort、port、containerPort 的区别

Dockerfile的EXPOSE Dockerfile中端口的声明: EXPOSE <端口1> [<端口2>...] 所以:EXPOSE的 第一个作用:只是说明docker容器开放了哪些端口,并没有将这些端口实际开放了出来!更多的作用是告诉运维人员或容器操作人员我开放了容器的哪些端口,只是一种说明。 …

WEB前端知识点整理(JQUERY+Bootstrap+ECharts)

1.JQUERY的概述&#xff1a; jQuery 是一个 JavaScript 库。jQuery 极大地简化了JavaScript 编程&#xff0c;它很容易学习。 jQuery库包含以下功能&#xff1a;HTML 元素选取&#xff1b;HTML 元素操作&#xff1b;CSS 操作&#xff1b;HTML 事件函数&#xff1b;JavaScript …

技术学习|CDA level I 业务分析方法

业务分析方法有三个主要构成部分&#xff1a;业务指标分析、业务模型分析及业务分析方法。 业务指标分析是发现业务问题的核心方法&#xff1a;用于通用指标和场景指标的计算及分析方法&#xff0c;以及指标体系的设计与应用方法。业务模型是从一系列业务行为中抽象出来的信息…

250:vue+openlayers 加载geotiff文件,并在地图上显示

第250个 点击查看专栏目录 本示例的目的是介绍演示如何在vue+openlayers中加载geotiff文件,并在地图上显示。这里使用到了WebGLTile图层和GeoTIFF脚本模块。这里一定要注意GeoTIFF的数据加载方式,要数组的模式。 直接复制下面的 vue+openlayers源代码,操作2分钟即可运行实现…

机器视觉系统选型-环境配置:报错序列不包含任何元素 的解决方法

描述 环境&#xff1a;VM4.0.0VS2015 及以上 现象&#xff1a;配置环境后&#xff0c;获取线线测量模块结果&#xff0c;报错“序列不包含任何元素”。如下图所示&#xff1a; 解答 将“\VisionMaster4.0.0\Development\V4.0.0 \ComControls\bin\x64”下整体重新拷贝。

初识大数据,一文掌握大数据必备知识文集(12)

&#x1f3c6;作者简介&#xff0c;普修罗双战士&#xff0c;一直追求不断学习和成长&#xff0c;在技术的道路上持续探索和实践。 &#x1f3c6;多年互联网行业从业经验&#xff0c;历任核心研发工程师&#xff0c;项目技术负责人。 &#x1f389;欢迎 &#x1f44d;点赞✍评论…

大模型加速库flash-attention的安装教程

大家好,我是爱编程的喵喵。双985硕士毕业,现担任全栈工程师一职,热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。喜欢通过博客创作的方式对所学的…

CSS基础笔记-02动画

CSS基础笔记系列 《CSS基础笔记-01CSS概述》 什么是动画 动画是一种综合艺术&#xff0c;它集合了绘画、电影、数字媒体、摄影、音乐、文学等多种艺术门类于一身。具体来说&#xff0c;动画是通过在连续多格的胶片上拍摄一系列单个画面&#xff0c;然后连续播放&#xff0c;…

七牛云cdn图片加载错误:net::ERR_HTTP2_PROTOCOL_ERROR与HTTP2 检测工具

一、问题描述 今天运营的小伙伴提了个问题&#xff0c;她在后台上传图片的时候有时会遇到上传成功了&#xff0c;但实际回显图片却是一张“破图”&#xff1a; 二、原因调查 先了解一下ERR_HTTP2_PROTOCOL_ERROR是什么意思&#xff1a; ERR_HTTP2_PROTOCOL_ERROR是由HTTP/2协…

【AI视野·今日NLP 自然语言处理论文速览 第六十八期】Tue, 2 Jan 2024

AI视野今日CS.NLP 自然语言处理论文速览 Tue, 2 Jan 2024 Totally 48 papers &#x1f449;上期速览✈更多精彩请移步主页 Daily Computation and Language Papers A Computational Framework for Behavioral Assessment of LLM Therapists Authors Yu Ying Chiu, Ashish Shar…

HDU - 2063 过山车(Java JS Python C)

题目来源 Problem - 2063 (hdu.edu.cn) 题目描述 RPG girls今天和大家一起去游乐场玩&#xff0c;终于可以坐上梦寐以求的过山车了。 可是&#xff0c;过山车的每一排只有两个座位&#xff0c;而且还有条不成文的规矩&#xff0c;就是每个女生必须找个男生做partner和她同坐…

GPT3.5 改用 GPT4 价格翻了30倍 如何破局? GPT 对话成本推演

场景介绍 假设你搭建了一个平台&#xff0c;提供 ChatGPT 3.5 的聊天服务。目前已经有一批用户的使用数据&#xff0c;想要测算一下如果更换 GPT 4.0 服务需要多少成本&#xff1f; 方案阐述 如果是全切&#xff0c;最简单粗暴的方案就是根据提供 ChatGPT 3.5 消费的金额乘…

数据结构:STL:queue stack

目录 1.queue的头文件 2.queue的定义 3.queue的常用函数 3.1 push() 3.2 pop() 3.3 size() 3.4 empty() 3.5 front() 3.6 back() 4.stack的头文件 5.stack的定义 6.stack的常用函数 6.1 push() 6.2 top() 6.3 pop() 6.4 size() 6.6 empty() STLf封装的queue也是…

集合基础知识点

集合基础 1. 集合的由来 当 Java 程序中需要存放数据的时候&#xff0c;通常会定义变量来实现数据的存储&#xff0c;但是&#xff0c;当需要存储大量数据的时候该怎么办呢&#xff1f;这时首先想到的是数组&#xff0c;但是&#xff01;数组只能存放同一类型的数据&#xff…

16 Linux 内核定时器

一、Linux 时间管理和内核定时器简介 1. 内核时间管理简介 Linux 内核中有大量的函数需要时间管理&#xff0c;比如周期性的调度程序、延时程序、定时器等。 硬件定时器提供时钟源&#xff0c;时钟源的频率可以设置&#xff0c;设置好以后就周期性的产生定时中断&#xff0c;系…

连续学习(Continual Learning)或者增量学习的场景中,multiband和replay分别是什么?起到什么作用

multiband和replay是两种不同的训练策略&#xff0c;通常用在处理连续学习或者增量学习的场景中。这些策略旨在解决新知识学习导致旧知识遗忘的问题&#xff0c;即所谓的灾难性遗忘。以下是multiband和replay两种策略的基本区别&#xff1a; Multiband: 定义: multiband通常是…

C语言编译器(C语言编程软件)完全攻略(第十六部分:Dev C++下载地址和安装教程(图解))

介绍常用C语言编译器的安装、配置和使用。 十六、Dev C下载地址和安装教程&#xff08;图解&#xff09; Dev C是一款免费开源的 C/C IDE&#xff0c;内嵌GCC编译器&#xff08;GCC 编译器的 Windows 移植版&#xff09;&#xff0c;是 NOI、NOIP 等比赛的指定工具。Dev C 的…