JavaScript之变量作用域的介绍，2024年阿里+头条+腾讯大厂前端笔试真题

---

高质量博主，点个关注不迷路🌸🌸​​​​​​​🌸**！**

I.变量作用域的分析

---

首先，我们先研究一下JavaScript的变量作用域，研究作用域，我们不按照常规的文章那样解释概念，而是先给一个小demo，吊一下大家的胃口：

var a = 1;

var b = 2;

function pomp(){

alert(a);

alert(b);

b = 2;

alert(b);

var a = 3;

alert(a);

}

pomp();

如果运行这段代码，我们会看到怎样的结果呢？如果想思考一下的朋友，建议可以先简单思考一下，并点击这里验证答案：【点我揭晓】

如果你的答案是对的，那么你对JavaScript的作用域的理解已经是中等偏上了，可能有一些复杂的作用域你没有掌握，但是简单的开发已经没有问题了；如果你不知道答案，那么下面我就以这个例子为引，介绍一下JavaScript的变量作用域问题。

首先，如果有编程基础的同学，一定知道对于任何的编程语言，都有局部变量和全局变量的概念：全局变量的作用范围是全局的；而局部变量往往在一个部分被定义和使用，在这个部分之外，它的空间就会被回收，我们就无法再使用它。常见的局部变量出现的地方有：for循环、函数体、代码块。

在这些“局部”里，局部变量的优先级是大于全局变量的，这是什么意思呢？我们再用一个小demo来解释一下：

var a = 1

function pomp() {

var a = 2

alert(a)

}

pomp()

alert(a)

上面的代码运行之后，效果是这样的：【点我揭晓】

也就是说，我们在局部和全局都有一个变量a，那么在局部，脚本解释器会优先从最近的位置开始寻找，最近的位置，当然会有局部>大于全局的效果，于是第一个弹窗弹出的是2，第二个才是1。

介绍完了局部变量和全局变量，我们再回到最开始的那个demo的问题：

var a = 1;

var b = 2;

function pomp(){

alert(a);

alert(b);

b = 2;

alert(b);

var a = 3;

alert(a);

}

pomp();

显然，这里的问题是，我们明明已经给a声明为全局变量，并同时给a赋值了，那为什么会打印a为undefined呢？这就是JavaScript的另一个特点，就是解释器在一行一行解释代码之前，会给变量划好它们的作用域：

最开始，a和b都被声明并定义为全局变量，a有值1，b有值2；此时，我们定义了一个函数pomp(),在函数内部，我们又创建了一个局部变量a，这时候，按照刚才的分析，此时离得最近的其实应该是局部变量a，这就解释了为什么第一次alert(a)不是弹出1，但是还是没有解释undefined。

undefined的原因是这样的：在解释器解释代码之前，按照其他编程语言的叫法，我们称这个时期是预编译时期，在预编译时期，由于函数体内也声明和定义了变量a，于是自然地函数体内的a被划归到了局部变量a，即我们可以认为已经执行了一句：var a，但是由于这是预编译时期，并没有执行var a = 3，因此此时我们可以理解为，只是执行了 var a，而a = 3是在后面才会执行，因此这是undefined的原因。

最后针对第一开始的demo做一个图片，帮助大家理解JavaScript变量作用域：

并附带一句总结：

当使用var关键字时，在局部或者全局中的任何位置，当某个变量被声明后，无论是之前的哪个地方，都可以使用这个变量，只是会显示undefined。

---

II.var关键字

---

最初的JavaScript，只有var这个关键字，因此上面的作用域讲解，说白了是针对的var关键字，那么对于var关键字，这里就不再多做赘述，而是给一个小demo理解一下：

alert(a)

var a = 3

alert(a)

相信如果从上面一路看下来，这道题应该很容易作对，我们可以核对一下答案：【点我揭晓】

小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频

如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）

JavaScript 和 ES6

在这个过程你会发现，有很多 JS 知识点你并不能更好的理解为什么这么设计，以及这样设计的好处是什么，这就逼着让你去学习这单个知识点的来龙去脉，去哪学？第一，书籍，我知道你不喜欢看，我最近通过刷大厂面试题整理了一份前端核心知识笔记，比较书籍更精简，一句废话都没有，这份笔记也让我通过跳槽从8k涨成20k。

么，这就逼着让你去学习这单个知识点的来龙去脉，去哪学？第一，书籍，我知道你不喜欢看，我最近通过刷大厂面试题整理了一份前端核心知识笔记，比较书籍更精简，一句废话都没有，这份笔记也让我通过跳槽从8k涨成20k。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】