深入理解 JavaScript 三大作用域:全局作用域、函数作用域、块级作用域

news2024/12/24 9:32:05

fileOf7174.png

一. 作用域

对于多数编程语言,最基本的功能就是能够存储变量当中的值、并且允许我们对这个变量的值进行访问和修改。那么有了变量之后,应该把它放在哪里、程序如何找到它们?是否需要提前约定好一套存储变量、访问变量的规则?答案是肯定的,这套规则就是作用域

说到作用域那就不得不先说一说编译原理(由于编译原理是一个比较底层的内容,这里只简单介绍,后面会有一篇文章专门介绍 JS 编译原理)。

JavaScript 引擎进行编译的步骤和传统的编译语言非常相似,在传统的编译语言中,程序中的代码在执行之后会经历三个步骤:词法分析、语法分析、代码生成:

  1. 词法分析:这个阶段会将源代码拆成最小的、不可再分的词法单元(token)。比如代码 var name = 'hello';通常会被分解成 var 、name、=、hello、; 这五个词法单元。代码中的空格在 JavaScript 中是被直接忽略的。

  2. 语法分析:这个过程是将上一步生成的 token 数据,根据语法规则转为 AST。如果源码符合语法规则,这一步就会顺利完成。如果源码存在语法错误,这一步就会终止,并抛出一个“语法错误”。

  3. 代码生成:这一步就是将 AST 转化为可执行代码,简单来说就是将 var name = 'hello'; 的 AST 转化为一组机器指令,用来创建一个 name 变量(需要给 name 分配内存),并将一个值储存在 name 中。

比起那些编译过程只有三个步骤的语言的编译器,JavaScript 引擎要复杂的多,这里不再细说。总之,任何 JavaScript 代码片段在执行前都要进行编译,因此在 JS 引擎眼里,var name = 'hello'; 语句包含了两个声明:

  • var name (编译时处理)

  • name = 'hello' (运行时处理)

你可能会问,JS 不是不存在编译阶段的“动态语言”吗?事实上,JS 也是有编译阶段的,它和传统语言的区别在于,JS 不会早早地把编译工作做完,而是一边编译一边执行。简单来说,所有的 JS 代码片段在执行之前都会被编译,只是这个编译的过程非常短暂(可能就只有几微妙、或者更短的时间),紧接着这段代码就会被执行。

在编译阶段和执行阶段阶段的过程如下:

  • 编译阶段:   编译器会找遍当前作用域,看看是不是已经有一个叫 name 的变量。如果有,那么就忽略 var name 这个声明,继续编译下去;如果没有,则在当前作用域里新增一个 name。然后,编译器会为引擎生成运行时所需要的代码,程序就进入了执行阶段。

  • 执行阶段:  JS 引擎在执行代码的时候,仍然会查找当前作用域,看看是不是有一个叫 name 的变量。如果能找到,就给它赋值。如果找不到,就会从当前作用域里向上层作用域逐级查找。如果最终仍然找不到 name 变量,引擎就会抛出一个异常。

这里,JS 引擎的查找过程就是作用域链,作用域指的是变量能够被访问到的范围。   在 JavaScript 中,作用域也分为好几种,ES6 之前只有全局作用域和函数作用域两种。ES6 出现之后,又新增了块级作用域,下面这来看看这几个概念。

二. 全局作用域

在编程语言中,变量一般会分为全局变量和局部变量。在 JavaScript 中,全局变量是挂载在 window 对象下的变量,所以在网页中的任何位置都可以使用并且访问到这个全局变量。下面来看一下全局作用域:

var globalName = 'global';
function getName() { 
  console.log(globalName) // global
  var name = 'inner'
  console.log(name) // inner
} 
getName();
console.log(name); 
console.log(globalName); //global

fileOf7174.png

可以看到,globalName 变量在任何地方都是可以被访问到的,所以它就是全局变量。而在 getName 函数中作为局部变量的 name 变量是不具备这种能力的。

在 JavaScript 中,所有没有经过定义而直接被赋值的变量默认就是一个全局变量,比如下面代码中 setName 函数里面的 vName:

function setName(){ 
  vName = 'setName';
}
setName();
console.log(vName); // setName
console.log(window.vName) // setName

fileOf7174.png

可以发现,全局变量是拥有全局的作用域,无论在何处都可以使用它,在浏览器控制台输入 window.vName 时,就可以访问到 window 上的全局变量。当然全局作用域有相应的缺点,当定义很多全局变量时,可能会引起变量命名的冲突,所以在定义变量时应该注意作用域的问题。

三. 函数作用域

在 JavaScript 中,函数中定义的变量叫作函数变量,这种变量只能在函数内部才能访问到,所以它的作用域也就是函数的内部,称为函数作用域:

function getName () {
  var name = 'inner';
  console.log(name); //inner
}
getName();
console.log(name);

fileOf7174.png

可以看到,name 变量是在 getName 函数中进行定义的,所以 name 是一个局部的变量,它的作用域就在 getName 函数里,也称作函数作用域。

除了这个函数内部,其他地方都是不能访问到它的。同时,当这个函数被执行完之后,这个局部变量也相应会被销毁。所以会看到在 getName 函数外面的 name 是访问不到的。

四. 块级作用域

ES6 中新增了块级作用域,最直接的表现就是新增的 let 和 const 关键词,使用这两个关键词定义的变量只能在块级作用域中被访问,有“暂时性死区”的特点,也就是说这个变量在定义之前是不能被使用的。

说到暂时性死区,还要从“变量提升”说起,来看下面代码:

function foo() { 
  console.log(bar) 
  var bar = 3 
} 
foo()

fileOf7174.png

上面代码会输出:undefined,原因是变量 bar 在函数内进行了提升。相当于:

function foo() { 
  var bar 
  console.log(bar) 
  bar = 3 
} 
foo()

但在使用 let 声明时,会报错:

function foo() { 
  console.log(bar) 
  let bar = 3 
} 
foo() // Uncaught ReferenceError: bar is not defined。

fileOf7174.png

使用 let 或 const 声明变量,会针对这个变量形成一个封闭的块级作用域,在这个块级作用域当中,如果在声明变量前访问该变量,就会报 referenceError 错误;如果在声明变量后访问,则可以正常获取变量值:

function foo() { 
  let bar = 3 
  console.log(bar) 
} 
foo()

fileOf7174.png

这段代码正常输出 3。因此在相应花括号形成的作用域中,存在一个“死区”,起始于函数开头,终止于相关变量声明的一行。在这个范围内无法访问 let 或 const 声明的变量。

说完暂时性死区,下面来看看块级作用域。在 JavaScript 编码过程中, if 语句及 for 语句后面 {} 这里面所包括的就是块级作用域:

console.log(a) //a is not defined
if(true){
  let a = '123';
  console.log(a); // 123
}
console.log(a) //a is not defined

可以看到,变量 a 是在 if 语句{} 中由 let 关键词进行定义的变量,所以它的作用域是 if 语句括号中的那部分,而在外面进行访问 a 变量是会报错的,因为这里不是它的作用域。所以在 if 代码块的前后输出 a 这个变量的结果,控制台会显示 a 并没有定义。

fileOf7174.png

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

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

相关文章

Teams会议侧边栏应用开发-会议转写

Teams应用开发,主要是权限比较麻烦,大量阅读和实践,摸索了几周,才搞明白。现将经验总结如下: 一、目标:开发一个Teams会议的侧边栏应用,实现会议的实时转写。 二、前提: 1&#x…

株洲芦淞大桥事故的深刻反思

株洲芦淞大桥事故的深刻反思 2024年9月23日清晨,株洲芦淞大桥上发生了一起令人痛心的交通事故,一辆白色小汽车被出租车追尾后失控,冲向对向车道,最终酿成6人死亡、多人受伤的惨剧。 这起事故不仅给受害者家庭带来了无法弥补的伤…

【Python机器学习系列】开发Streamlit应用程序并部署机器学习模型(案例+源码)

这是我的第357篇原创文章。 一、引言 近年来,随着机器学习和人工智能技术的迅猛发展,越来越多的研究者选择将他们的模型以应用程序(App)的形式进行部署,从而使审稿人和其他研究者可以通过简单的界面,输入相…

9月23日

头文件 // My_string.h #ifndef MY_STRING_H #define MY_STRING_H#include <cstring> #include <algorithm>class My_string { private:char* data;size_t length;void resize(size_t new_length) {size_t new_capacity std::max(new_length 1, length);char* n…

一种求解城市场景下无人机三维路径规划的高维多目标优化算法,MATLAB代码

在城市环境下进行无人机三维路径规划时&#xff0c;需要考虑的因素包括高楼、障碍物、飞行安全和效率等。为了解决这些问题&#xff0c;研究者们提出了多种算法&#xff0c;包括基于智能优化算法的方法。 首先&#xff0c;无人机航迹规划问题的数学模型需要考虑无人机的基本约…

用Flowise+OneAPI+Ollama做一个在线翻译工作流

用FlowiseOneAPIOllama做一个在线翻译工作流&#xff0c;输入一种语言&#xff0c;马上翻译成另外一种语言&#xff0c;使用到的结点主要有&#xff0c;ChatLLM、提示词模板还有LLM Chain。 一、设置OneAPI和Ollama 1、Ollama的安装及配置&#xff0c;请参考&#xff1a;在ub…

三种委派 非约束委派 约束委派 基于资源的约束委派 概念

前言 简单记录下委派攻击的概念。具体的攻击演示/复现这里没有。 强烈建议反复通读《域渗透攻防指南》P242开始的4.5&#xff01;&#xff01;&#xff01; 以前看gitbook那个学的&#xff0c;yysy&#xff0c;真的不怎么适合零基础的看。 趁课上认真看了看4.5章&#xff0c…

如何快速免费搭建自己的Docker私有镜像源来解决Docker无法拉取镜像的问题(搭建私有镜像源解决群晖Docker获取注册表失败的问题)

文章目录 📖 介绍 📖🏡 演示环境 🏡📒 Docker无法拉取镜像 📒📒 解决方案 📒🔖 方法一:免费快速搭建自己的Docker镜像源🎈 部署🎈 使用🔖 备用方案⚓️ 相关链接 🚓️📖 介绍 📖 在当前的网络环境下,Docker镜像的拉取问题屡见不鲜(各类Nas查询…

【编程基础知识】MySQL中什么叫做聚簇索引、非聚簇索引、回表、覆盖索引

一、引言 在数据库的奇妙世界里&#xff0c;索引是提升查询速度的超级英雄。就像图书馔的目录帮助我们快速找到书籍一样&#xff0c;MySQL中的索引加速了数据检索的过程。本文将带你深入了解MySQL中的聚簇索引、非聚簇索引、回表操作以及覆盖索引&#xff0c;探索它们如何影响…

机器人顶刊IEEE T-RO发布无人机动态环境高效表征成果:基于粒子的动态环境连续占有地图

摘要&#xff1a;本研究有效提高了动态环境中障碍物建模的精度和效率。NOKOV度量动作捕捉系统助力评估动态占用地图在速度估计方面的性能。 近日&#xff0c;上海交通大学、荷兰代尔夫特理工研究团队在机器人顶刊IEEE T-RO上发表题为Continuous Occupancy Mapping in Dynamic …

Keysight 下载信源 Visa 指令

用于传输原始的IQ数据 file.wiq 或者 file.bin wave_bin:bytes with open("./WaveForm.wfm","rb") as f:wave_bin f.read()log.info("File:WaveForm.wfm Size:%d Bytes"%len(wave_bin)) IMPL.sendCommand(":MEM:DATA \"WFM1:FILE1\&q…

每日OJ题_牛客_杨辉三角(动态规划)

目录 牛客_杨辉三角&#xff08;动态规划&#xff09; 解析代码 牛客_杨辉三角&#xff08;动态规划&#xff09; 杨辉三角_牛客题霸_牛客网 解析代码 最基础的 dp 模型&#xff0c;按照规律模拟出来杨辉三角即可。 #include <iostream> using namespace std;int dp…

企业上云不迷茫,香港电讯助力企业上云全攻略

在全球政策和市场双重驱动下&#xff0c;云计算产业正迎来前所未有的增长浪潮。据中国信通院《云计算白皮书&#xff08;2023年&#xff09;》1显示&#xff0c;2022年全球云计算市场规模已达到4,910亿美元&#xff0c;同比增长率高达百分之十九。而在中国市场&#xff0c;这一…

带线无人机现身俄罗斯抗干扰技术详解

带线无人机在俄罗斯的出现&#xff0c;特别是其光纤制导技术的应用&#xff0c;标志着无人机抗干扰技术的一大进步。以下是对俄罗斯带线无人机抗干扰技术的详细解析&#xff1a; 一、带线无人机抗干扰技术背景 技术突破&#xff1a;俄军成功研发了光纤制导无人机&#xff0c;…

数据链路层协议 —— 以太网协议

目录 1.数据链路层解决的问题 2.局域网通信方式 以太网 令牌环网 无线局域网 3.以太网协议 以太网帧格式 对比理解Mac地址和IP地址 认识MTU MTU对IP协议的影响 MTU对UDP的影响 MTU对TCP的影响 基于以太网协议的报文转发流程 交换机的工作原理 4.ARP协议 ARP协议…

springboot+vue高校两校区通勤校车预约系统的设计与实现

目录 用户功能管理员功能系统实现截图技术介绍核心代码部分展示使用说明详细视频演示源码获取 用户功能 登录注册&#xff1a;允许用户创建账户并登录系统。 首页&#xff1a;展示系统主要功能和通勤车相关的重要信息。 个人中心&#xff1a;用户可以查看和编辑自己的个人信息…

ios swift5 UITextView占位字符,记录限制字数

文章目录 截图代码&#xff1a;具体使用代码&#xff1a;CustomTextView 截图 代码&#xff1a;具体使用 scrollView.addSubview(contentTextView)contentTextView.placeholderLabel.text LocalizableManager.localValue("write_comment")contentTextView.maxCharac…

分享两个虚拟试衣工具,一个在线,一个离线,还有ComfyUI插件

SAM &#xff0c;对不住了&#xff01; 我没记错的话&#xff0c;OpenAI CEO&#xff0c;性别男&#xff0c;取向男&#xff0c;配偶男。 这又让我联想到了苹果CEO库克... 所以OpenAI和Apple可以一啪即合。 钢铁直男老马就和他们都不对付~~ 开个玩笑&#xff0c;聊…

以数赋能实景三维创新“科技+文旅”

在数字化时代&#xff0c;科技与文化的融合为我们带来了无限可能。今天&#xff0c;我们将探讨如何利用实景三维技术&#xff0c;推动“科技文旅”的创新发展。 1. 实景三维技术概述 实景三维技术&#xff0c;是一种集成了遥感、地理信息系统&#xff08;GIS&#xff09;、三…

量子计算如何引发第四次工业革命——解读加来道雄的量子物理观

在科技的历史长河中&#xff0c;人类经历了多次重大的技术变革&#xff1a;从第一次工业革命的蒸汽机到第三次计算机革命的互联网与半导体技术&#xff0c;每次技术革命都彻底改变了我们的生活。而如今&#xff0c;我们正处在第四次工业革命的前夕&#xff0c;其核心驱动力是量…