作用域链的理解(超级详细)

文章目录

    • 一、作用域
      • 全局作用域
      • 函数作用域
      • 块级作用域
    • 二、词法作用域
    • 三、作用域链

一、作用域

作用域,即变量(变量作用域又称上下文)和函数生效(能被访问)的区域或集合

换句话说,作用域决定了代码区块中变量和其他资源的可见性

举个例子

function myFunction() {let inVariable = "函数内部变量";
}
myFunction();//要先执行这个函数,否则根本不知道里面是啥
console.log(inVariable); // Uncaught ReferenceError: inVariable is not defined

上述例子中,函数myFunction内部创建一个inVariable变量,当我们在全局访问这个变量的时候,系统会报错

这就说明我们在全局是无法获取到(闭包除外)函数内部的变量

我们一般将作用域分成:

  • 全局作用域

  • 函数作用域

  • 块级作用域

全局作用域

任何不在函数中或是大括号中声明的变量,都是在全局作用域下,全局作用域下声明的变量可以在程序的任意位置访问

// 全局变量
var greeting = 'Hello World!';
function greet() {console.log(greeting);
}
// 打印 'Hello World!'
greet();

函数作用域

函数作用域也叫局部作用域,如果一个变量是在函数内部声明的它就在一个函数作用域下面。这些变量只能在函数内部访问,不能在函数以外去访问

function greet() {var greeting = 'Hello World!';console.log(greeting);
}
// 打印 'Hello World!'
greet();
// 报错: Uncaught ReferenceError: greeting is not defined
console.log(greeting);

可见上述代码中在函数内部声明的变量或函数,在函数外部是无法访问的,这说明在函数内部定义的变量或者方法只是函数作用域

块级作用域

ES6引入了letconst关键字,和var关键字不同,在大括号中使用letconst声明的变量存在于块级作用域中。在大括号之外不能访问这些变量

{// 块级作用域中的变量let greeting = 'Hello World!';var lang = 'English';console.log(greeting); // Prints 'Hello World!'
}
// 变量 'English'
console.log(lang);
// 报错:Uncaught ReferenceError: greeting is not defined
console.log(greeting);

二、词法作用域

词法作用域,又叫静态作用域,变量被创建时就确定好了,而非执行阶段确定的。也就是说我们写好代码时它的作用域就确定了,JavaScript 遵循的就是词法作用域

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

上述代码改变成一张图

由于JavaScript遵循词法作用域,相同层级的 foobar 就没有办法访问到彼此块作用域中的变量,所以输出2

三、作用域链

当在Javascript中使用一个变量的时候,首先Javascript引擎会尝试在当前作用域下去寻找该变量,如果没找到,再到它的上层作用域寻找,以此类推直到找到该变量或是已经到了全局作用域

如果在全局作用域里仍然找不到该变量,它就会在全局范围内隐式声明该变量(非严格模式下)或是直接报错

这里拿《你不知道的Javascript(上)》中的一张图解释:

把作用域比喻成一个建筑,这份建筑代表程序中的嵌套作用域链,第一层代表当前的执行作用域,顶层代表全局作用域

变量的引用会顺着当前楼层进行查找,如果找不到,则会往上一层找,一旦到达顶层,查找的过程都会停止

下面代码演示下:

var sex = '男';
function person() {var name = '张三';function student() {var age = 18;console.log(name); // 张三console.log(sex); // 男 }student();console.log(age); // Uncaught ReferenceError: age is not defined
}
person();

上述代码主要主要做了以下工作:

  • student函数内部属于最内层作用域,找不到name,向上一层作用域person函数内部找,找到了输出“张三”
  • student内部输出sex时找不到,向上一层作用域person函数找,还找不到继续向上一层找,即全局作用域,找到了输出“男”
  • person函数内部输出age时找不到,向上一层作用域找,即全局作用域,还是找不到则报错

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

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

相关文章

Spring之注入模型

前言 之前我写过一篇关于BeanDefinition的文章,讲述了各个属性的作用,其中有一个属性我没有提到,因为这个属性比较重要,所以这里单独开一篇文章来说明 上一篇博文链接Spring之BeanDefinitionhttps://blog.csdn.net/qq_38257958/article/details/134823169?spm1001.2014.3001…

每天学习一个Linux命令之less

每天学习一个Linux命令之less 介绍 在Linux系统中,使用终端进行文件查看和编辑是常见的操作。less 是一款强大而灵活的终端文件查看命令,它可以显示大型文本文件的内容,并提供一些方便的特性。 本篇博客将详细介绍 less 命令的用法和常用选…

【Datawhale学习笔记】从大模型到AgentScope

从大模型到AgentScope AgentScope是一款全新的Multi-Agent框架,专为应用开发者打造,旨在提供高易用、高可靠的编程体验! 高易用:AgentScope支持纯Python编程,提供多种语法工具实现灵活的应用流程编排,内置…

科技革新的引擎-2024年AI辅助研发趋势

随着科技的飞速发展,人工智能(AI)已经在许多领域展现出了其强大的潜力和价值。特别是在研发领域,AI的辅助作用日益凸显,成为推动科技革新的重要引擎。在2024年,这种趋势将更加明显,我们可以从以…

pc端vue2项目使用uniapp组件

项目示例下载 运行实例: 这是我在pc端做移动端底代码时的需求,只能在vue2使用,vue3暂时不知道怎么兼容。 安装依赖包时可能会报:npm install Failed to set up Chromium r756035! Set “PUPPETEER_SKIP_DOWNLOAD” env variable …

高级语言讲义2016软专(仅高级语言部分)

1.假设有包含m个元素的整型数组a&#xff0c;该数组中存放了m个不重复的整数。编写函数求数组a中第k大的整数。 #include <stdio.h>void sort(int *arr,int m,int n) {for(int im; i<n-1; i)for(int jm; j<nm-i; j)if(arr[j]<arr[j1]) {int temparr[j];arr[j]…

数据治理实践——金融行业大数据治理的方向与实践

目录 一、证券数据治理服务化背景 1.1 金融数据治理发展趋势 1.2 证券行业数据治理建设背景 1.3 证券行业数据治理目标 1.4 证券行业数据治理痛点 二、证券数据治理服务化实践 2.1 国信证券数据治理建设框架 2.2 国信证券数据治理建设思路 2.3 数据模型管理 2.4 数据…

ChatGPT+MATLAB应用

MatGPT是一个由chatGPT类支持的MATLAB应用程序&#xff0c;由官方Toshiaki Takeuchi开发&#xff0c;允许您轻松访问OpenAI提供的chatGPT API。作为官方发布的内容&#xff0c;可靠性较高&#xff0c;而且也是完全免费开源的&#xff0c;全程自己配置&#xff0c;无需注册码或用…

SpecAugment: A Simple Data Augmentation Method for Automatic Speech Recognition

摘要 我们提出了SpecAugment&#xff0c;这是一种用于语音识别的简单数据增强方法。SpecAugment直接应用于神经网络的特征输入&#xff08;即滤波器组系数&#xff09;。增强策略包括对特征进行变形、遮蔽频道块和遮蔽时间步块。我们在端到端语音识别任务中将SpecAugment应用于…

【SQL】601. 体育馆的人流量(with as 临时表;id减去row_number()思路)

前述 知识点学习&#xff1a; with as 和临时表的使用12、关于临时表和with as子查询部分 题目描述 leetcode题目&#xff1a;601. 体育馆的人流量 思路 关键&#xff1a;如何确定id是连续的三行或更多行记录 方法一&#xff1a; 多次连表&#xff0c;筛选查询方法二&…

vulhub中Weblogic SSRF漏洞复现

Weblogic中存在一个SSRF漏洞&#xff0c;利用该漏洞可以发送任意HTTP请求&#xff0c;进而攻击内网中redis、fastcgi等脆弱组件。 访问http://your-ip:7001/uddiexplorer/&#xff0c;无需登录即可查看uddiexplorer应用。 SSRF漏洞测试 SSRF漏洞存在于http://your-ip:7001/ud…

Python分支结构

我们刚开始写的Python代码都是一条一条语句顺序执行&#xff0c;这种代码结构通常称之为顺序结构。 然而仅有顺序结构并不能解决所有的问题&#xff0c;比如我们设计一个游戏&#xff0c;游戏第一关的通关条件是玩家在一分钟内跑完全程&#xff0c;那么在完成本局游戏后&#x…

js实现导出/下载excel文件

js实现导出/下载excel文件 // response 为导出接口返回数据&#xff0c;如上图 const exportExcel (response, fileName:string) >{const blob new Blob([response.data], {type: response.headers[content-type] //使用获取的excel格式});const downloadElement documen…

hash(哈希)

在计算机科学中&#xff0c;hash&#xff08;哈希&#xff09;是一种将任意大小的数据映射到固定大小值&#xff08;通常较小&#xff09;的函数。哈希函数将输入数据转化为一串固定长度的字符串&#xff0c;这串字符通常被称为哈希码、哈希值或简称哈希。哈希函数的特点是对于…

mysql5.6---windows和linux安装教程和忘记密码怎么办

一、windows安装 1.完成解压 解压完成之后将其放到你喜欢的地址当中去&#xff0c;这里我默认放在了D盘&#xff0c;这是我的根目录 2.配置环境变量 我的电脑->属性->高级->环境变量->系统变量 选择PATH,在其后面添加: (注意自己的安装地址) D:\mysql-5.6.49…

数据结构:图的存储与遍历(待续)

图&#xff08;Graph&#xff09;是一种较线性表和树更为复杂的非线性结构。在图结构中&#xff0c;对结点&#xff08;图中常称为顶点&#xff09;的前驱和后继个数不加限制&#xff0c; 即结点之间的关系是任意的。 一、基本概念和一般结论 因为一条边关联两个顶点&#xff0…

12---风扇电路设计

视频链接 风扇硬件电路设计01_哔哩哔哩_bilibili 风扇电路设计 1、风扇简介 电脑风扇又称为散热风扇&#xff0c;一般用于散热。提供给散热器和机箱使用。市面上一般的散热风扇尺寸大小由直径2.5cm到30cm都有&#xff0c;厚度由6mm到76mm都有&#xff0c;而根据不同运作要求…

抽样算法——【数据科学与工程算法基础】

一、前言 这是课程的第二章节——抽样算法&#xff0c;主要分为三类。 详情可参考&#xff1a; 数据科学的算法基础——学习记录跳转中心 二、正篇 1.系统抽样 课本只介绍了最简单的——等距抽样。 直线等距抽样&#xff08;Nn*k&#xff09;&#xff1a;即总体个数可以被抽…

力扣爆刷第92天之hot100五连刷46-50

力扣爆刷第92天之hot100五连刷46-50 文章目录 力扣爆刷第92天之hot100五连刷46-50一、114. 二叉树展开为链表二、105. 从前序与中序遍历序列构造二叉树三、437. 路径总和 III四、236. 二叉树的最近公共祖先五、124. 二叉树中的最大路径和 一、114. 二叉树展开为链表 题目链接&…

JAVA实战开源项目:学生日常行为评分管理系统(Vue+SpringBoot)

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、系统设计2.1 功能模块设计2.2.1 登录注册模块2.2.2 用户管理模块2.2.3 评分项目模块2.2.4 评分数据模块2.2.5 数据字典模块 2.3 可行性设计2.4 用例设计2.5 数据库设计2.5.1 整体 E-R 图2.5.2 用户2.5.3 评分项目2.5.4 评分数据2.5.…