起来了解一下JavaScript的变量作用域

这篇文章主要为大家详细介绍了JavaScript变量作用域，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助

1.变量作用域的分析

首先，我们先来研究JavaScript的变量作用域，研究作用域。我们不像常规文章那样解释概念，而是先做一个小演示，吊一下大家的胃口:

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循环、函数体、代码块。

在这些ldquo部分rdquo在中，局部变量的优先级高于全局变量。这是什么意思？让我们用一个小演示来解释一下:

var a = 1function pomp() { var a = 2 alert(a) }pomp()alert(a)

也就是说，我们在局部和全局都有一个变量A，所以在局部，脚本解释器会优先从最近的位置开始搜索，最近的位置当然会有一个局部gt；大于全局效果，所以第一个弹出窗口是2，第二个是1。

介绍完局部变量和全局变量，让我们回到第一个演示问题:

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打印为未定义的呢？这是JavaScript的另一个特点，即解释器在逐行解释代码之前先划定变量的范围:

起初，A和B都被声明和定义为全局变量，A的值为1，B的值为2；此时我们定义了一个函数pomp()，在函数内部又创建了一个局部变量A，这个时候根据刚才的分析，此时最接近的其实应该是局部变量A，这就解释了为什么alert(a)第一次没有弹出1，但仍然没有解释undefined。

未定义的原因如下:在解释器解释代码之前，根据其他编程语言的名称，我们把这段时间称为预编译期。在预编译期，由于变量A也是在函数体中声明和定义的，自然地，函数体中的变量A被归入局部变量A，也就是我们可以认为“var a”这句话已经执行了，但由于是预编译期，var a = 3还没有执行。所以在这一点上，我们可以理解为只执行var a，后面会执行a = 3，所以这就是undefined的原因。

最后，为第一个演示制作一张图片，帮助你理解JavaScript变量的作用域:

附有摘要:

当使用var关键字时，当一个变量被声明时，它可以在之前的任何地方使用，但会显示undefined。

2.var关键字

原来的JavaScript只有var这个关键字，所以上面的范围解释都是针对var关键字的，这里就不重复var关键字了，只是给一个小demo一个理解:

alert(a)var a = 3alert(a)

但是为了防止有些朋友在这里开始看，我再重复一遍:

一个用关键字var声明的变量，只要在任何一个局部/全局的地方声明，在其他地方都会存在，即使没有声明，因为在预编译阶段就已经声明了，但是会显示undefined，也就是未定义，然后执行到var a = 3的时候，就会用值3定义。

顺便简单说说变量的声明和定义的区别:

var a；这句话叫声明变量aa = 3；这句话叫定义变量avar a = 3；这句话叫声明变量a，并给a定义为3

说完var，其实作用域的难度基本结束了，不过既然是一篇完整的文章，这里新增两个JavaScript变量声明关键字:let和const，作用域和var略有不同。

3.let和const关键字

首先，我们从一个演示开始:

alert(a)let a = 3alert(a)

哎，你点了之后，是不是什么都没有了？不是我在恶作剧，是真的没什么。原因是报错了(哈哈哈):

好家伙，同样的写法，为什么var不报错，而让呢？(注意这里用const是一样的，const和let的作用域是一样的，就是用const会出错！)

原因是大家都受了很久的var之苦。这个字母关键字是声明变量的一种方式，更符合我们的思维逻辑。它在let的范围内:

变量只有在声明后才能使用，不像var。只要在任何地方声明，也可以用在前面的地方！

最后简单介绍一下const。在LET的基础上，const增加了一个独特的概念:

一旦定义了常量变量，就不能修改它的值。它适用于定义一些特定的常数，例如:

常数pi = 3.14

常数e = 2.7

Const和let的作用域相同！

4.var、let和const的对比

一口气看完三个关键词，最后简单梳理一下。在梳理之前，我们先来一个演示:

function demo() { for (var i = 1; i lt; 10; i++) { // } alert(i) for (let j = 1; j lt; 9; j++) { // } alert(j) } demo()

这里大家似乎有点疑惑，因为我们知道for循环是局部的，所以在for循环之外的局部变量I和J应该不存在。但是很明显，如果我们检查一下，会发现在弹出的窗口中弹出了一个10，也就是说此时I的值保持在10，J并不像我们想象的那样存在，它确实报错了:

那为什么会这样？原因是var关键字声明的局部变量只有在整个大部分退出时才会回收内存。也就是说，虽然for循环也是一部分，但是这部分属于function的大部分，所以还是会有I，但是let显然又符合我们的预期了！

关键字作用域值的特点var变量在局部/全局任何地方被声明，在对应的局部/全局的其他任何地方都可以直接使用(甚至在声明之前使用)，但是使用时若未定义，则出现undefined。可以反复修改let变量只能在被声明语句的后面才可以使用。可以反复修改const变量只能在被声明语句的后面才可以使用。不可修改

总结

本文到此为止。希望能帮到你