作用域和作用域链

前端面试大全·JavaScript作用域和作用域链

🌟经典真题

🌟作用域(Scope)

什么是作用域

全局作用域和函数作用域

块级作用域

🌟作用域链

什么是自由变量

什么是作用域链

关于自由变量的取值

🌟作用域与执行上下文

🌟真题解答

🌟总结 


🌟经典真题

  • 谈谈你对作用域和作用域链的理解?

🌟作用域(Scope

什么是作用域

作用域是在运行时代码中的某些特定部分中变量,函数和对象的可访问性。

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

可能这两句话并不好理解,我们先来看个例子:

function outFun2() {var inVariable = "内层变量2";
}
outFun2();
console.log(inVariable); // Uncaught ReferenceError: inVariable is not defined

从上面的例子可以体会到作用域的概念,变量 inVariable 在全局作用域没有声明,所以在全局作用域下取值会报错。

我们可以这样理解:作用域就是一个独立的地盘,让变量不会外泄、暴露出去。也就是说作用域最大的用处就是隔离变量,不同作用域下同名变量不会有冲突。

ES6 之前 JavaScript 没有块级作用域,只有全局作用域和函数作用域

ES6 的到来,为我们提供了“块级作用域”,可通过新增命令 let 和 const 来体现。

全局作用域和函数作用域

(1)全局作用域

在代码中任何地方都能访问到的对象拥有全局作用域,一般来说以下几种情形拥有全局作用域:

  • 最外层函数和在最外层函数外面定义的变量拥有全局作用域                                                       
    var outVariable = "我是最外层变量"; //最外层变量
    function outFun() { //最外层函数var inVariable = "内层变量";function innerFun() { //内层函数console.log(inVariable);}innerFun();
    }
    console.log(outVariable); // 我是最外层变量
    outFun(); // 内层变量
    console.log(inVariable); // inVariable is not defined
    innerFun(); // innerFun is not defined
  • 所有未定义直接赋值的变量自动声明为拥有全局作用域                                                              
    function outFun2() {variable = "未定义直接赋值的变量";var inVariable2 = "内层变量2";
    }
    outFun2();//要先执行这个函数,否则根本不知道里面是啥
    console.log(variable); //未定义直接赋值的变量
    console.log(inVariable2); //inVariable2 is not defined
  • 所有 window 对象的属性拥有全局作用域

一般情况下,window 对象的内置属性都拥有全局作用域,例如 window.name、window.location、window.top 等等。

全局作用域有个弊端:如果我们写了很多行 JS 代码,变量定义都没有用函数包括,那么它们就全部都在全局作用域中。这样就会污染全局命名空间, 容易引起命名冲突。

// 张三写的代码中
var data = {a: 100}// 李四写的代码中
var data = {x: true}

这就是为何 jQuery、Zepto 等库的源码,所有的代码都会放在 (function(){....})( ) 中。

因为放在里面的所有变量,都不会被外泄和暴露,不会污染到外面,不会对其他的库或者 JS 脚本造成影响。这是函数作用域的一个体现。

(2)函数作用域

函数作用域,是指声明在函数内部的变量,和全局作用域相反,局部作用域一般只在固定的代码片段内可访问到,最常见的例如函数内部。

function doSomething(){var stuName="zhangsan";function innerSay(){console.log(stuName);}innerSay();
}
console.log(stuName); // 脚本错误
innerSay(); // 脚本错误

作用域是分层的,内层作用域可以访问外层作用域的变量,反之则不行

我们看个例子,用泡泡来比喻作用域可能好理解一点:

最后输出的结果为 2、4、12

  • 泡泡 1 是全局作用域,有标识符 foo
  • 泡泡 2 是作用域 foo,有标识符 a、bar、b
  • 泡泡 3 是作用域 bar,仅有标识符 c

值得注意的是:块语句(大括号“{ }”中间的语句),如 if 和 switch 条件语句或 for 和 while 循环语句,不像函数,它们不会创建一个新的作用域。在块语句中定义的变量将保留在它们已经存在的作用域中。

if (true) {// 'if' 条件语句块不会创建一个新的作用域var name = 'Hammad'; // name 依然在全局作用域中
}
console.log(name); // logs 'Hammad'

JS 的初学者经常需要花点时间才能习惯变量提升,而如果不理解这种特有行为,就可能导致 bug 。

正因为如此, ES6 引入了块级作用域,让变量的生命周期更加可控。

块级作用域

块级作用域可通过新增命令 let 和 const 声明,所声明的变量在指定块的作用域外无法被访问。

块级作用域在如下情况被创建:

  1. 在一个函数内部
  2. 在一个代码块(由一对花括号包裹)内部

let 声明的语法与 var 的语法一致。你基本上可以用 let 来代替 var 进行变量声明,但会将变量的作用域限制在当前代码块中。块级作用域有以下几个特点:

  • 声明变量不会提升到代码块顶部

let、const 声明并不会被提升到当前代码块的顶部,因此你需要手动将 let、const 声明放置到顶部,以便让变量在整个代码块内部可用。

function getValue(condition) {if (condition) {let value = "blue";return value;} else {// value 在此处不可用return null;}// value 在此处不可用
}
  • 禁止重复声明

如果一个标识符已经在代码块内部被定义,那么在此代码块内使用同一个标识符进行 let 声明就会导致抛出错误。例如:

var count = 30;
let count = 40; // Uncaught SyntaxError: Identifier 'count' has already been declared

在本例中, count 变量被声明了两次:一次使用 var ,另一次使用 let

因为 let 不能在同一作用域内重复声明一个已有标识符,此处的 let 声明就会抛出错误。但如果在嵌套的作用域内使用 let 声明一个同名的新变量,则不会抛出错误。

var count = 30;
// 不会抛出错误
if (condition) {let count = 40;// 其他代码
}
  • 循环中的绑定块作用域的妙用

开发者可能最希望实现 for 循环的块级作用域了,因为可以把声明的计数器变量限制在循环内。

例如,以下代码在 JS 经常见到:

<button>测试1</button>
<button>测试2</button>
<button>测试3</button>
var btns = document.getElementsByTagName('button')
for (var i = 0; i < btns.length; i++) {btns[i].onclick = function () {console.log('第' + (i + 1) + '个')}
}

我们要实现这样的一个需求: 点击某个按钮, 提示"点击的是第 n 个按钮"。

此处我们先不考虑事件代理,万万没想到,点击任意一个按钮,后台都是弹出“第四个”。

这是因为 i 是全局变量,执行到点击事件时,此时 i 的值为 3

那该如何修改,最简单的是用 let 声明 i

for (let i = 0; i < btns.length; i++) {btns[i].onclick = function () {console.log('第' + (i + 1) + '个')}
}

🌟作用域链

什么是自由变量

首先认识一下什么叫做自由变量 。

如下代码中,console.log(a) 要得到 a 变量,但是在当前的作用域中没有定义 a(可对比一下 b)。当前作用域没有定义的变量,这成为自由变量 。

自由变量的值如何得到 ?

需要向父级作用域寻找(注意:这种说法并不严谨,下文会重点解释)。

var a = 100
function fn() {var b = 200console.log(a) // 这里的 a 在这里就是一个自由变量console.log(b)
}
fn()

什么是作用域链

如果父级也没呢?

再一层一层向上寻找,直到找到全局作用域还是没找到,就宣布放弃。这种一层一层的关系,就是作用域链 。

var a = 100
function f1() {var b = 200function f2() {var c = 300console.log(a) // 100 自由变量,顺作用域链向父作用域找console.log(b) // 200 自由变量,顺作用域链向父作用域找console.log(c) // 300 本作用域的变量}f2()
}
f1()

关于自由变量的取值

关于自由变量的值,上文提到要到父作用域中取,其实有时候这种解释会产生歧义。

var x = 10
function fn() {console.log(x)
}
function show(f) {var x = 20;(function () {f() // 10,而不是 20})()
}
show(fn)

在 fn 函数中,取自由变量 x 的值时,要到哪个作用域中取 ?

要到创建 fn 函数的那个作用域中取,无论 fn 函数将在哪里调用

所以,不要在用以上说法了。相比而言,用这句话描述会更加贴切:要到创建这个函数的那个域”。作用域中取值,这里强调的是“创建”,而不是“调用”,切记切记,其实这就是所谓的"静态作用域"。

再来看一个例子:

const food = "rice";
const eat = function () {console.log(`eat ${food}`);
};
(function () {const food = "noodle";eat(); // eat rice
})();

在本示例中,最终打印的结果为 eat rice。因为对于 eat( ) 函数来说,创建该函数时它的父级上下文为全局上下文,所以 food 的值为 rice

如果我们将代码稍作修改,改成如下:

const food = "rice";
(function () {const food = "noodle";const eat = function () {console.log(`eat ${food}`);};eat(); // eat noodle
})();

这个时候,打印出来的值就为 eat noodle。因为对于 eat( ) 函数来讲,创建它的时候父级上下文为 IIFE,所以 food 的值为 noodle

🌟作用域与执行上下文

许多开发人员经常混淆作用域和执行上下文的概念,误认为它们是相同的概念,但事实并非如此。

我们知道 JavaScript 属于解释型语言,JavaScript 的执行分为:解释和执行两个阶段,这两个阶段所做的事并不一样。

解释阶段

  • 词法分析
  • 语法分析
  • 作用域规则确定

执行阶段

  • 创建执行上下文
  • 执行函数代码
  • 垃圾回收

JavaScript 解释阶段便会确定作用域规则,因此作用域在函数定义时就已经确定了,而不是在函数调用时确定,但是执行上下文是函数执行之前创建的。

执行上下文最明显的就是 this 的指向是执行时确定的。而作用域访问的变量是编写代码的结构确定的。

作用域和执行上下文之间最大的区别是:

执行上下文在运行时确定,随时可能改变,作用域在定义时就确定,并且不会改变

🌟真题解答

  • 谈谈你对作用域和作用域链的理解?

参考答案:

什么是作业域 ?

ES5 中只存在两种作用域:全局作用域和函数作用域。

在 JavaScript 中,我们将作用域定义为一套规则,这套规则用来管理引擎如何在当前作用域以及嵌套子作用域中根据标识符名称进行变量(变量名或者函数名)查找。ES6 新增了块级作用域。

什么是作用域链 ?

当访问一个变量时,编译器在执行这段代码时,会首先从当前的作用域中查找是否有这个标识符,如果没有找到,就会去父作用域查找,如果父作用域还没找到继续向上查找,直到全局作用域为止。

而作用域链,就是有当前作用域与上层作用域的一系列变量对象组成,它保证了当前执行的作用域对符合访问权限的变量和函数的有序访问。

作用域链有一个非常重要的特性,那就是作用域中的值是在函数创建的时候,就已经被存储了,是静态的

所谓静态,就是说作用域中的值一旦被确定了,永远不会变。**函数可以永远不被调用,但是作用域中的值在函数创建的时候就已经被写入了,**并且存储在函数作用域链对象里面。

🌟总结 

本篇文章是关于JavaScript的一道面试题,后续还会持续更新HTML、CSS、JavaScript、Node.js、Vue.js、网络等前端相关面试题。如果文中出现有瑕疵的地方各位通过评论或者私信联系我,我们一起进步,有兴趣的伙伴可以关注订阅: 前端面试题大全 

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

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

相关文章

ffmpeg学习日记619-指令-透明通道视频相关指令

将单张png图片序列转换为透明视频 ffmpeg -i %d.png -vcodec qtrle movie_with_alpha.mov ffmpeg -i %d.png -vcodec ffvhuff movie_with_alpha.avi ffmpeg -i %d.png -vcodec huffyuv movie_with_alpha.avi带alpha透明层的视频编码 png编码 可以封装为 mp4、mov等 ffmpeg -…

斯皮尔曼相关系(Spearman‘s rank correlation coefficient)数理论及python代码

contents 1. 引言 2. 什么是斯皮尔曼相关系数基本原理计算方法值的范围和解释应用场景 3. python应用案例案例&#xff1a;阅读习惯与写作技能评分的相关性分析数据构造Python代码 结果解释 1. 引言 让我用一个简单的方式来解释斯皮尔曼相关系数的计算方法。 想象你和你的朋友…

java后端技术演变杂谈(未完结)

1.0版本javaWeb&#xff1a;原始servletjspjsbc 早期的jsp&#xff1a;htmljava&#xff0c;页面先在后端被解析&#xff0c;里面的java代码动态渲染完成后&#xff0c;成为纯html&#xff0c;再通过服务器发送给浏览器显示。 缺点&#xff1a; 服务器压力很大&#xff0c;因为…

python socket编程6 - 使用PyQt6 开发UI界面实现TCP server和TCP client单机通讯的例子

使用PyQt6 开发UI界面实现TCP server和TCP client单机通讯的示例。 一、PyQt6 实现的界面 二、TCP server代码的修改示意 界面提供网络参数的配置&#xff0c;以及提供人机交互过程中的数据获取和显示。 1、把上面的server代码封装成两个部分 A、class Server 负责接受UI界面…

公司来了个00后,我愿称之为王中王,让人崩溃

前几天我们公司一下子也来了几个新人&#xff0c;这些年前人是真能熬啊&#xff0c;本来我们几个老油子都是每天稍微加会班就打算走了&#xff0c;这几个新人一直不走&#xff0c;搞得我们也不好走。 2023年春招就要开始了&#xff0c;最近内卷严重&#xff0c;各种跳槽裁员&a…

生产制造中4种导致产品成本、库存核算差错的问题!(化工/化妆品/生物制剂/混凝土等行业ODOO)

在化工/化妆品/生物制剂/混凝土等行业&#xff0c;因为其生产物料及产成品大都以液体&#xff08;或散颗粒&#xff09;形态为主&#xff0c;多以重量为计数方式&#xff1b;且液体&#xff08;或散颗粒&#xff09;相较于固体的较大区别就是产品计数上变数较大&#xff0c;固体…

DSShop移动商城网店系统 反序列化RCE漏洞复现

0x01 产品简介 DSShop是长沙德尚网络科技有限公司推出的一款单店铺移动商城网店系统,能够帮助企业和个人快速构建手机移动商城,并减少二次开发带来的成本。 以其丰富的营销功能,精细化的用户运营,解决电商引流、推广难题,帮助企业打造生态级B2C盈利模式商业平台。完备的电商…

Clean 架构下的现代 Android 架构指南

Clean 架构下的现代 Android 架构指南 Clean 架构是 Uncle Bob 提出的一种软件架构&#xff0c;Bob 大叔同时也是 SOLID 原则的命名者。 Clean 架构图如下&#xff1a; 这张图描述的是整个软件系统的架构&#xff0c;而不是单体软件&#xff0c;其中至少包括服务端以及客户端…

从声纹模型到语音合成:音频处理 AI 技术前沿 | 开源专题 No.45

facebookresearch/audiocraft Stars: 16.6k License: MIT AudioCraft 是一个用于音频生成的 PyTorch 库。它包含了两个最先进的 AI 生成模型 (AudioGen 和 MusicGen) 的推理和训练代码&#xff0c;可以产生高质量音频。该项目还提供了其他功能&#xff1a; MusicGen&#xf…

MySQL笔记-第02章_MySQL环境搭建

视频链接&#xff1a;【MySQL数据库入门到大牛&#xff0c;mysql安装到优化&#xff0c;百科全书级&#xff0c;全网天花板】 文章目录 第02章_MySQL环境搭建1. MySQL的卸载步骤1&#xff1a;停止MySQL服务步骤2&#xff1a;软件的卸载步骤3&#xff1a;残余文件的清理步骤4&am…

Appium:iOS部署

iOS部署 要部署Appium进行iOS自动化测试&#xff0c;需要遵循以下步骤&#xff1a; 1. 安装Node.js&#xff1a; 访问Node.js官网&#xff08;https://nodejs.org/download/&#xff09;&#xff0c;根据您的操作系统和需求下载合适的版本。在Windows系统上&#xff0c;安装…

原生横向滚动条 吸附 页面底部

效果图 /** 横向滚动条 吸附 页面底部 */ export class StickyHorizontalScrollBar {constructor(options {}) {const { el, style } optionsthis.createScrollbar(style)this.insertScrollbar(el)this.setScrollbarSize()this.onEvent()}/** 创建滚轴组件元素 */createS…

WEB渗透—反序列化(十一)

Web渗透—反序列化 课程学习分享&#xff08;课程非本人制作&#xff0c;仅提供学习分享&#xff09; 靶场下载地址&#xff1a;GitHub - mcc0624/php_ser_Class: php反序列化靶场课程&#xff0c;基于课程制作的靶场 课程地址&#xff1a;PHP反序列化漏洞学习_哔哩哔_…

问题集锦(一)

一、字符串常量池是什么&#xff1f;不同的JDK版本都分别位于哪个区域&#xff1f; 字符串常量池是Java语言中的一个特性&#xff0c;它是一个存储字符串常量的池子。字符串常量池的设计目的是为了减少重复的字符串对象&#xff0c;从而节约内存空间和提高程序性能。 在JDK1.…

Hadoop YARN组件

1. 请解释Yarn的基本架构和工作原理。 YARN&#xff0c;也被称为"Yet Another Resource Negotiator"&#xff0c;是Apache HadoopYARN&#xff0c;也被称为"Yet Another Resource Negotiator"&#xff0c;是Apache Hadoop的一部分&#xff0c;它被设计为一…

OWASP Web 安全测试指南-Web 应用程序安全测试

Web 应用程序安全测试 4.0 简介和目标 4.1 信息收集 4.2 配置和部署管理测试 4.3 身份管理测试 4.4 身份验证测试 4.5 授权测试 4.6 会话管理测试 4.7 输入验证测试 4.8 错误处理测试 4.9 弱密码测试 4.10 业务逻辑测试 4.11 客户端测试 4.0 简介和目标 本节介绍 O…

Python自动化测试web常见框架汇总

1、前言 目前&#xff0c;有非常多的Python框架&#xff0c;用来帮助你更轻松的创建web应用。这些框架把相应的模块组织起来&#xff0c;使得构建应用的时候可以更快捷&#xff0c;也不用去关注一些细节&#xff08;例如socket和协议&#xff09;&#xff0c;所以需要的都在框…

金融帝国实验室(Capitalism Lab)V10版本新增崭新企业总部大楼

金融帝国实验室&#xff08;Capitalism Lab&#xff09;V10版本新增崭新企业总部大楼 ————————————— 【全新V10版本开发播报】 即将推出的V10版本将引入两座崭新的企业总部大楼&#xff01;新大楼采用先进的现代化建筑设计&#xff0c;以取代旧的总部大楼。 ———…

[SHCTF 2023]——week1-week3 Web方向详细Writeup

Week1 babyRCE 源码如下 <?php$rce $_GET[rce]; if (isset($rce)) {if (!preg_match("/cat|more|less|head|tac|tail|nl|od|vi|vim|sort|flag| |\;|[0-9]|\*|\|\%|\>|\<|\|\"/i", $rce)) {system($rce);}else {echo "hhhhhhacker!!!".&…

代码随想录二刷 | 字符串 |重复的子字符串

代码随想录二刷 &#xff5c; 字符串 &#xff5c;重复的子字符串 题目描述解题思路 & 代码实现移动匹配KMP算法 题目描述 459.重复的子字符串 给定一个非空的字符串 s &#xff0c;检查是否可以通过由它的一个子串重复多次构成。 示例 1: 输入: s “abab” 输出: tru…