【温故而知新】JavaScript作用域

文章目录

  • 前言
  • 一、作用域
  • 二、案例
  • 三、作用域链
  • 四、常见问题
  • 五、热门文章

前言

JavaScript是一种广泛使用的编程语言,主要用于Web开发。它是一种脚本语言,这意味着它不需要像编译语言那样预先编译,而是在运行时解释和执行。JavaScript可以直接在浏览器中运行,这使得它在前端开发中特别重要,可以用于动态生成和更改网页内容、响应用户交互、发送和接收数据等。

JavaScript的主要特点包括:

  1. 动态类型:变量可以在运行时更改其数据类型。
  2. 面向对象:JavaScript是一种面向对象的编程语言,支持类和继承。
  3. 异步编程:JavaScript支持异步编程,这使得它可以处理如用户交互和网络请求等异步事件。
  4. 浏览器兼容性:大多数现代浏览器都支持JavaScript。

一、作用域

JavaScript的作用域是指变量的可访问范围。在JavaScript中,有两种主要的作用域:全局作用域和局部作用域。

全局作用域是在整个JavaScript程序中都可访问的变量的作用域。在全局作用域中声明的变量可以在程序的任何地方被访问。

局部作用域是在函数内部声明的变量的作用域。在局部作用域中声明的变量只能在函数内部被访问。

JavaScript还具有块级作用域,也称为词法作用域。块级作用域是在代码块(例如if语句或for循环)内部声明的变量的作用域。块级作用域中声明的变量只能在代码块内部被访问。

当JavaScript代码在运行时遇到一个变量时,它会按照作用域链去查找该变量。作用域链是一个存储所有可访问变量的列表。当一个变量在局部作用域中找不到时,JavaScript会继续在外层作用域中查找,直到找到该变量或者到达全局作用域为止。

在函数内部声明的变量默认是局部变量,而在函数外部声明的变量则是全局变量。如果在函数内部使用var、let或const来声明一个与外部作用域中已有变量同名的变量,那么该变量将会是一个新的局部变量,而不是更改外部作用域中的变量。

JavaScript的作用域对于变量的访问和修改非常重要,因此了解作用域的概念和原理对于编写高质量的JavaScript代码非常重要。

二、案例

一个JavaScript作用域的案例代码:

// 全局作用域
var globalVariable = "I am a global variable";function foo() {// 函数内部作用域var localVariable = "I am a local variable";console.log(localVariable); // 输出:I am a local variableconsole.log(globalVariable); // 输出:I am a global variable
}foo();console.log(globalVariable); // 输出:I am a global variable
console.log(localVariable); // 报错:localVariable is not defined

在这个案例中,我们有一个全局变量globalVariable,它可以在整个程序中访问。我们还有一个函数foo,它有一个局部变量localVariable,它只能在函数内部被访问。在函数foo内部,我们可以访问并输出localVariableglobalVariable。在函数外部,我们只能访问和输出globalVariable,而尝试访问localVariable将导致报错,因为它不在当前作用域内。

这个案例演示了变量作用域的概念:全局变量在整个程序中都可访问,而局部变量只能在其所在函数内部访问。

三、作用域链

JavaScript作用域链描述了在执行代码时变量的访问规则。当访问一个变量时,JavaScript引擎会按照作用域链的顺序查找变量的值,直到找到该变量或者到达全局作用域为止。

以下是一个简单的例子来演示JavaScript作用域链的概念:

var globalVariable = "I am a global variable";function foo() {var localVariable = "I am a local variable";function innerFoo() {var innerVariable = "I am an inner variable";console.log(innerVariable); // 输出:I am an inner variableconsole.log(localVariable); // 输出:I am a local variableconsole.log(globalVariable); // 输出:I am a global variable}innerFoo();
}foo();console.log(globalVariable); // 输出:I am a global variable
console.log(localVariable); // 报错:localVariable is not defined
console.log(innerVariable); // 报错:innerVariable is not defined

在这个例子中,我们有三个嵌套的函数:fooinnerFoo和一个全局作用域。当内部函数innerFoo访问变量时,它首先查找自己的作用域,如果找不到,它会沿着作用域链向上查找。在这个例子中,innerFoo首先查找自己的作用域,找到了变量innerVariable,然后查找父级作用域(foo函数),找到了变量localVariable,最后查找全局作用域,找到了变量globalVariable

当我们在全局作用域之外尝试访问localVariableinnerVariable时,会报错,因为它们不在范围内。

这个例子说明了作用域链是如何工作的:当访问一个变量时,JavaScript引擎会按照作用域链的顺序查找该变量的值,直到找到或者到达全局作用域为止。

四、常见问题

在JavaScript中,作用域是一个常见的问题,特别是涉及到变量的访问和生命周期。以下是一些常见的JavaScript作用域问题:

  1. 全局作用域问题:在全局作用域中声明的变量可以在代码的任何地方访问。这可能导致变量被意外修改或覆盖,从而影响整个代码的执行。
  2. 函数作用域问题:在函数内部声明的变量只能在函数内部访问。如果在函数内部没有使用var、let或const关键字声明变量,变量会被提升到函数的顶部,可能导致意外的行为。
  3. 块级作用域问题:在ES6之前,JavaScript没有块级作用域。因此,在if语句、for循环和其他块中声明的变量可能会泄漏到外部作用域,导致意外的命名冲突或变量覆盖。
  4. 闭包问题:闭包是指一个函数可以访问其父级函数的变量。如果不小心处理闭包,可能导致内存泄漏或不必要的变量保持活动状态。
  5. 变量声明问题:在相同作用域中重复声明变量可能会导致变量覆盖或意外的行为。因此,务必注意变量的声明和命名规范,以避免命名冲突和不必要的错误。
  6. 异步作用域问题:当涉及到异步操作(如定时器、事件处理程序和Ajax调用)时,作用域可能变得复杂。在异步回调函数内部访问外部作用域的变量可能导致意外的结果。

了解这些常见作用域问题,并采取适当的措施,例如使用块级作用域的let和const关键字、避免全局变量污染、正确处理闭包等,可以提高代码的可维护性和可靠性。

五、热门文章

【温故而知新】JavaScript数字精度丢失问题
【温故而知新】JavaScript的继承方式有那些
【温故而知新】JavaScript中内存泄露有那几种
【温故而知新】JavaScript函数式编程
【温故而知新】JavaScript的防抖与节流
【温故而知新】JavaScript事件循环

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

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

相关文章

65.Spring 框架中都用到了哪些设计模式?

Spring 设计模式总结 1.简单工厂 - BeanFactory 2.工厂方法 - FactoryBean 3.单例模式 - Bean实例 在我们的系统中,有一些对象其实我们只需要一个,比如说:线程池、缓存、对话框、注册表、日志对象、充当打印机、显卡等设备驱动程序的对象。事实上,这一类对象只能有一个…

redis优化系列(六)

本期分享redis内存过期策略:过期key的处理 Redis之所以性能强,最主要的原因就是基于内存存储。然而单节点的Redis其内存大小不宜过大,会影响持久化或主从同步性能。 可以通过修改配置文件来设置Redis的最大内存: maxmemory 1gb …

[数据结构 - C++] 红黑树RBTree

文章目录 1、前言2、红黑树的概念3、红黑树的性质4、红黑树节点的定义5、红黑树的插入Insert6、红黑树的验证7、红黑树与AVL树的比较附录: 1、前言 我们在学习了二叉搜索树后,在它的基础上又学习了AVL树,知道了AVL树是靠平衡因子来调节左右高…

《设计模式的艺术》笔记 - 外观模式

介绍 外观模式中外部与一个子系统的通信通过一个统一的外观角色进行,为子系统中的一组接口提供一个一致的入口。外观模式定义了一个高层接口,这个接口使得子系统更加容易使用。外观模式又称为门面模式,它是一种对象结构型模式。 实现 myclas…

linux挂载磁盘

Linux系统: 注明:如果您已经分好区数据盘有数据,请直接执行第3步 第1步,进行数据盘分区 fdisk /dev/vdb依次按顺序输入 n p 1 w 第2步,分区成功后输入命令格式化磁盘 mkfs.ext4 /dev/vdb1 第3步,创…

【C++ | 数据结构】从哈希的概念 到封装C++STL中的unordered系列容器

文章目录 一、unordered系列容器的底层结构 - 哈希1. 哈希概念2. 哈希冲突 二、解决哈希冲突方法一:合理设计哈希函数🚩哈希函数设计原则🚩常见哈希函数 方法二:开闭散列🚩闭散列线性探测法(实现&#xff0…

如何在CentOS使用docker部署青龙面板并实现无公网ip远程访问

文章目录 一、前期准备本教程环境为:Centos7,可以跑Docker的系统都可以使用。本教程使用Docker部署青龙,如何安装Docker详见: 二、安装青龙面板三、映射本地部署的青龙面板至公网四、使用固定公网地址访问本地部署的青龙面板 青龙…

Spring与Spring Boot:区别与Spring Boot的实战示例

引言: 在现代Java企业级开发中,Spring和Spring Boot已经成为不可或缺的技术。Spring是一个开源的企业级Java应用程序框架,它简化了企业级应用的开发过程。而Spring Boot则是基于Spring的,它旨在简化Spring应用的创建和部署过程&am…

谷歌裁员与中国工程师夫妻的悲剧:技术变革下的职业危机

谷歌裁员与中国工程师夫妻的悲剧:技术变革下的职业危机 在科技行业的快速发展下,职业危机成为了许多人关注的焦点。最近,谷歌裁员事件引起了广泛的讨论,尤其是对中国工程师夫妻的影响更是引发了人们的深思。这起事件不仅令人惋惜…

服务限流实现方案

服务限流怎么做 限流算法 计数器 每个单位时间能通过的请求数固定,超过阈值直接拒绝。 通过维护一个单位时间内的计数器,每次请求计数器加1,当单位时间内计数器累加到大于设定的阈值,则之后的请求都被绝,直到单位时…

cool 中的node.js 实现一个处理第三方Api 数据的处理

1.需求 你现在是一个后端 前端跟你要一个接口 ,但是你发现 你这个接口 除了调用第三方Api的接口 有的数据还是没有 你直接返回 前端使用不了 因为都没有关于那样的数据 但是三方Api 中有其他的接口和现在的接口 经过处理 是可以实现这个前端需要的数据。遇到这样的情…

Quarkus 2.8.0引入了细粒度的Transaction API

升级概览 Quarkus 2.8.0.Final发布,特性包括:将RESTEasy Reactive作为默认 REST 层;将 GraalVM 22.0 作为默认版本;新的QuarkusTransaction API;以及 Elasticsearch Dev Services(可以自动启动dev和test模…

Python输入输出流学习笔记

Python的输入与输出 一、输入 (一)输入函数input() 函数用途: 函数input()主要用于接收单个输入 函数参数: 函数括号中可以填写输入的提示语(非必要),提示语与输入内容位于同一行 a input(…

03 OSPF 学习大纲

参考文章 1 初步认识OSPF的大致内容(第三课)-CSDN博客 2

【管理篇 / 登录】❀ 07. FortiOS 7.4 初始登录提示 ❀ FortiGate 防火墙

【简介】FortiOS 7.4在初始登录时显示的内容和以前的版本有很大的相同,很多人不熟悉英文和功能,不清楚应该怎么操作,这里就详细的介绍一下。 恢复出厂设置 为了完整的查看到启动配置内容,这里我们先将防火墙恢复出厂。 ① FortiGa…

Chat2DB:AI赋能的多数据库客户端工具,开源领航未来数据库管理

Chat2DB:开源多数据库客户端的AI革新 Chat2DB使用教程:Chat2DB使用教程_哔哩哔哩_bilibili 引言: 随着企业数据的快速膨胀,数据库管理的复杂性也在增加。此时,一个能够跨越数据库边界、并且集成先进的AI功能的工具,不…

从 `go build` 到 `go test`:Go 语言命令行工具全解析

从 go build 到 go test:Go 语言命令行工具全解析 引言go build 命令详解go test 的运用其他重要的 Go 命令结论 引言 在当今的软件开发领域,Go 语言以其简洁、高效和强大的并发处理能力受到广泛的欢迎。作为一门现代编程语言,Go 不仅拥有丰…

多标签节点分类

Multi-Label Node Classification on Graph-Structured Data,TMLR’23 Code 学习笔记 图结构数据的多标签分类 节点表示或嵌入方法 通常会生成查找表,以便将相似的节点嵌入的更近。学习到的表示用作各种下游预测模块的输入特征。 表现突出的方法是基于随机游走(ran…

书籍 - 华杉讲透孙子兵法 - 5

第四章 军形第四 赢了再打 原文 形篇 孙子曰:昔之善战者,先为不可胜,以待敌之可胜。不可胜在己,可胜在敌。故善战者,能为不可胜,不能使敌之可胜。故曰:胜可知,而不可为。 华杉详解 …

moon‘s 博客网站部署维护项目说明

项目概述 背景 博客系统致力为广大用户提供优质的互动交流平台,实现对博客发表文章、评论、图片、好友等数据的管理,同时实现了博客内容及时、快速更新的功能,系统不仅保留了传统博客系统的功能,还加上了一些人性化的界面设计,使…