函数作用域和块级作用域:JavaScript中的变量作用域解析

news2024/11/21 10:35:37

在这里插入图片描述

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

文章目录

    • 摘要:
    • 引言:
    • 正文:
      • 1️⃣ 函数作用域
      • 2️⃣ 块级作用域
      • 3️⃣ 作用域链
    • 总结:
    • 参考资料:

摘要:

本文将介绍JavaScript中的函数作用域和块级作用域的概念、区别以及应用场景,帮助您了解如何在JavaScript中正确使用变量作用域,以提高代码的可读性和可维护性。

引言:

🌐 在JavaScript编程中,理解变量作用域对于编写清晰、高效的代码至关重要。JavaScript支持两种主要的作用域:函数作用域和块级作用域。接下来,让我们一起来探索这两种作用域的奥秘。

正文:

1️⃣ 函数作用域

  • 函数作用域:在JavaScript中,函数作用域指的是在函数内部定义的变量。这些变量在函数内部可以被访问,但在函数外部不可见。
  • 应用场景:函数作用域适用于在函数内部定义变量,以避免全局变量的污染,提高代码的可维护性。

函数作用域是指在函数内部定义的变量可以在函数内部被访问,但不能在函数外部被访问。以下是一个简单的函数作用域的代码案例:

function myFunction() {
  var myVar = "Hello, World!";
  console.log(myVar); // 输出 "Hello, World!"
}

console.log(myVar); // 报错:myVar is not defined

在这个示例中,我们在 myFunction 函数内部定义了一个变量 myVar,并将其输出到控制台。当我们尝试在函数外部访问 myVar 时,浏览器会报错,提示 myVar is not defined。这是因为函数内部的变量具有局部作用域,只能在函数内部被访问,不能在函数外部被访问。

2️⃣ 块级作用域

  • 块级作用域:在ES6(ECMAScript 2015)中引入了块级作用域的概念,通过let和const声明在代码块内部定义的变量。
  • 应用场景:块级作用域适用于在代码块内部定义变量,以提高代码的可读性和可维护性。

块级作用域是指在指定代码块(如循环、条件语句等)内部定义的变量只能在代码块内部被访问,不能在代码块外部被访问。以下是一个简单的块级作用域的代码案例:

for (var i = 0; i < 5; i++) {
  console.log("Block scope: " + i); // 输出 5 次 "Block scope: i"
}

console.log("Global scope: " + i); // 报错:i is not defined

在这个示例中,我们在 for 循环内部定义了一个变量 i,并将其输出到控制台。当我们尝试在循环外部访问 i 时,浏览器会报错,提示 i is not defined。这是因为循环内部的变量具有块级作用域,只能在循环内部被访问,不能在循环外部被访问。

3️⃣ 作用域链

  • 在JavaScript中,当访问一个变量时,首先在当前作用域中查找,如果没有找到,则继续在上级作用域中查找,直到找到全局作用域。这种机制称为作用域链。

作用域链是指当一个变量在当前作用域中找不到定义时,会依次向上级作用域查找,直到找到该变量或到达全局作用域。以下是一个简单的作用域链的代码案例:

var a = 10;

function myFunction() {
  var a = 20;
  console.log(a); // 输出 20
}

myFunction();
console.log(a); // 输出 10

在这个示例中,我们首先在全局作用域中定义了一个变量 a,并将其值设置为 10。然后,我们在 myFunction 函数内部重新定义了一个变量 a,并将其值设置为 20。当我们第一次在 myFunction 函数内部访问 a 时,由于函数内部变量具有局部作用域,所以会输出 20。当我们第二次在全局作用域中访问 a 时,由于全局作用域中的 a 在函数内部被重新定义了,所以会输出 10。

总结:

🎉 理解JavaScript中的函数作用域和块级作用域对于编写清晰、高效的代码至关重要。通过正确使用这两种作用域,我们可以提高代码的可读性和可维护性。

参考资料:

  • JavaScript作用域和作用域链教程
  • ES6块级作用域教程
  • JavaScript最佳实践:作用域和闭包

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

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

相关文章

OpenGL学习笔记【4】——创建窗口,给窗口添加渲染颜色

一、前三章节的前情回顾 章节一&#xff1a;上下文(Context) OpenGL学习笔记【1】——简介-CSDN博客 章节一讲述了OpenGL在渲染的时候需要一个Context来记录了OpenGL渲染需要的所有信息和状态&#xff0c;可以把上下文理解成一个大的结构体&#xff0c;它里面记录了当前绘制使…

【@changesets/cli】变更集实战教程

一、背景概述 前端目前基于Monorepo架构的npm包开发很普遍&#xff0c;在开发完毕后&#xff0c;我们需要对包进行版本号升级&#xff0c;并且部署&#xff0c;这些操作如果是手动来操作的话&#xff0c;很麻烦&#xff0c;而且容易出错。 例如有这样的场景&#xff1a; -ap…

【可用Claude Opus模型】Claude3国内镜像站,亲测完全超越GPT-4(可用Claude Opus,官网价值20刀)

#今天在知乎看到一个问题&#xff1a;“平民不参与内测的话没有账号还有机会使用Claude 3吗&#xff1f;” 从去年GPT大火到现在&#xff0c;关于GPT的消息铺天盖地&#xff0c;真要有心想要去用&#xff0c;途径很多&#xff0c;别的不说&#xff0c;国内GPT的镜像站到处都是…

C++ 扫描当前路径下文件并删除大文件

C 扫描当前路径下文件并删除大文件 C获取当前路径扫描文件路径下规定后缀名称的文件计算文件大小 1. 获取当前路径 使用<Windows.h>中的GetCurrentDirectory方法实现&#xff0c;单独编写验证程序如下&#xff1a; #include<iostream> #include<Windows.h&g…

YOLOv9改进策略:IoU优化 | Powerful-IoU更好、更快的收敛IoU,效果秒杀CIoU、GIoU等 | 2024年最新IoU

&#x1f4a1;&#x1f4a1;&#x1f4a1;本文独家改进&#xff1a;Powerful-IoU更好、更快的收敛IoU&#xff0c;是一种结合了目标尺寸自适应惩罚因子和基于锚框质量的梯度调节函数的损失函数 &#x1f4a1;&#x1f4a1;&#x1f4a1;MS COCO和PASCAL VOC数据集实现涨点 YO…

R语言基础入门

1.保存或加载工作空间 改变工作目录——进行文件读写&#xff0c;默认去指定文件进行操作。&#xff08;使用R时&#xff0c;最好先设定工作目录&#xff08;setwd(),getwd()&#xff09;&#xff09; setwd(“工作文件路径”)&#xff1a;建立工作目录 getwd&#xff08;&…

【Mysql数据库基础07】DDL 数据定义语言

Data Definition Language 1 库的操作1.1 create 创建1.2 alter 修改1.3 drop 删除 2 表的操作2.1 表的创建2.2 表的修改2.2.1 修改表名2.2.2 修改列名2.2.3 修改列的类型和约束2.2.4 添加列2.2.5 删除列 2.3 表的删除2.4 表的复制 3 练习 1 库的操作 1.1 create 创建 create…

jvm(虚拟机)运行时数据区域介绍

Java虚拟机&#xff08;JVM&#xff09;运行时数据区域是Java程序在运行过程中使用的内存区域&#xff0c;它主要包括以下几个部分&#xff1a; 程序计数器&#xff08;Program Counter Register&#xff09;&#xff1a; 程序计数器是一块较小的内存区域&#xff0c;是线程私有…

法律合规| AI产品法律风险应对措施全解析

在此前推文中我们全面分析了生成式人工智能算法模型可能遇到的法律风险&#xff0c;那么这些风险应该如何应对呢&#xff1f; 1、隐私泄漏风险&#xff1a;企业需要遵守数据安全法和个人信息保护法的规定&#xff0c;确保数据来源合法&#xff0c;使用时获得用户授权&…

citus的快速开始

准备 dockercitus最新版本&#xff08;docker pull citusdata/citus&#xff09; docker网络 docker network create --subnet172.72.9.0/24 citus-test docker network ls启动citus服务 启动协调节点 docker run -dit --name citus-cod -p 5433:5432 -e POSTGRES_PASSWOR…

【vue3学习之路(一)】

文章目录 前言一、vue3项目创建1.1环境准备1.1.1 基于 vue-cli 创建&#xff08;脚手架创建&#xff09;1.1.2 基于 vite 创建&#xff08;推荐&#xff09; 二、熟悉流程总结 前言 参考视频&#xff1a;https://www.bilibili.com/video/BV1Za4y1r7KE?p10&spm_id_frompag…

使用uniapp 的 plus.sqlite 操作本地数据库报错:::table xxx has no column named xxxx

背景&#xff1a; 1、使用uniapp 的 plus.sqlite 进行APP本地数据库操作 2、SQLite 模块用于操作本地数据库文件&#xff0c;可实现数据库文件的创建&#xff0c;执行SQL语句等功能。 遇到&#xff1a;在之前创建的表上进行新增字段的操作时候&#xff0c;出现问题&#xff1a…

MyEclipse打开文件跳转到notepad打开问题

问题描述 windows系统打开README.md文件&#xff0c;每次都需要右键选择notepad打开&#xff0c;感觉很麻烦&#xff0c;然后就把README.md文件打开方式默认选择了notepad&#xff0c;这样每次双击就能打开&#xff0c;感觉很方便。 然后某天使用MyEclipse时&#xff0c;双击RE…

java第一次作业(二)

先写思路&#xff0c;再写代码&#xff0c;思路清晰&#xff0c;才能写对代码 7-6 求12...n的和 思路&#xff1a; 运用expression的字符串输出 重点&#xff1a; expression输出 代码&#xff1a; import java.util.Scanner; public class Main {public static void main…

数据运营常用的8大模型

✅作者简介&#xff1a;《数据运营&#xff1a;数据分析模型撬动新零售实战》作者、《数据实践之美》作者、数据科技公司创始人、多次参加国家级大数据行业标准研讨及制定、高端企培合作讲师。 &#x1f338;公众号&#xff1a;风姑娘的数字视角&#xff0c;免费分享数据应用相…

为什么静态成员函数不能是虚函数

在面向对象编程中&#xff0c;静态成员函数和虚函数都是常见的概念&#xff0c;但它们之间存在着本质上的差异。由于其特性上的差异&#xff0c;静态成员函数不能声明为虚函数。下面我们来探讨一下为什么静态成员函数不能是虚函数。 我在网上查到最多的说法是静态函数没有this指…

数字化转型能给企业创造哪些价值?

企业数字化转型能创造哪些价值&#xff1f; 深耕TOB行业 9 年&#xff0c;下面来分享下自己的一些经验和看法。 &#xff08;看完要是觉得有用&#xff0c;记得点个赞哈~&#xff09; 1、从宏观上理解&#xff0c;我们可以分成4个大的方面&#xff1a; &#xff08;1&#x…

PTA L2-031 深入虎穴 dfs与bfs版

著名的王牌间谍 007 需要执行一次任务&#xff0c;获取敌方的机密情报。已知情报藏在一个地下迷宫里&#xff0c;迷宫只有一个入口&#xff0c;里面有很多条通路&#xff0c;每条路通向一扇门。每一扇门背后或者是一个房间&#xff0c;或者又有很多条路&#xff0c;同样是每条路…

机器学习-05-回归算法

总结 本系列是机器学习课程的系列课程&#xff0c;主要介绍机器学习中回归算法&#xff0c;包括线性回归&#xff0c;岭回归&#xff0c;逻辑回归等部分。 参考 fit_transform,fit,transform区别和作用详解&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&am…

结构体讲解

目录 一.结构体类型的声明 (1)结构体的声明 (2)结构体的创建和初始化 (3)匿名结构体 (4)结构体的自引用 二.结构体内存对齐 (1)对齐规则 (2)为什么存在内存对齐&#xff1f; (3)结构体传参 三.结构体实现位段 (1)什么是位段 (2)位段的内存分配 (3)位段的跨平…