当前位置:首页 > 开发教程 > js/jQuery教程 >

一起来知道JavaScript的变量作用域

时间:2022-03-15 19:09 来源:未知 作者:花似梦 收藏

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

1.变量作用域的分析

首先,我们先研究一下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变量作用域

一起来知道JavaScript的变量作用域

并附带一句总结:

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

2.var关键字

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

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

不过避免一些朋友从这里才开始看起,我还是再复述一下:

var关键字声明的变量,只要在局部/全局的任何一个地方被声明,那么在其他的地方,即使没有被声明,由于在预编译阶段该变量已经被声明,于是它也是存在的,只是会显示undefined,也就是未定义,而后当执行到var a = 3,它被定义了一个值3。

顺便简单唠一下变量的声明与定义的区别

  • var a;这句话叫声明变量a
  • a = 3;这句话叫定义变量a
  • var a = 3;这句话叫声明变量a,并给a定义为3

讲完了var,其实作用域的难点也基本上结束了,但是由于是一篇完整的文章,下面对两种新的JavaScript变量声明关键字进行介绍:let和const它们的作用域与var略有不同

3.let和const关键字

首先,我们还是先来一个demo:

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

哎嘿,大家点击之后,是不是啥也没有啊,这可不是我在恶作剧,而是确实是什么也没有,原因是,它报错了(hahaha):

一起来知道JavaScript的变量作用域

好家伙,同样的写法,为啥var不报错,let就报错了呢?(注意,这里用const是一样的,const和let的作用域是相同的,也即用const一样会报错!)

原因是,大家苦var久矣,这个let关键字,就是更符合我们的思维逻辑的一种变量的声明方式,在let的作用域中:

一个变量只会在它被声明之后才可以使用,而不是像var一样,在任何地方只要有声明,那么在前面的地方也可以用!

最后,我们简单介绍一下const,const在let的基础上,多了一个唯一性的概念:

const变量一经定义,就不能再修改它的值了,适合定义一些特定的常量,例如:

const pi = 3.14

const e = 2.7

const的作用域与let相同!

4.var、let和const的对比

一口气看完了三个关键字,我们最后再简单梳理一下吧,在梳理之前,先上一个demo:

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

大家看到这里似乎又有点小疑惑,因为我们知道for循环是一个局部,那么局部的变量i和j,在for循环的外面,理应不存在才对但是很显然,我们如果核对了会发现,弹窗弹出了一个10,也就是说i此时值仍然保留为10,而j确实和我们想的一样,是不存在的,它也确实报错了:

一起来知道JavaScript的变量作用域

那为啥会出现这种情况呢?原因是var关键字声明的局部变量,会在整个大的局部退出时,才会回收内存,也就是说for循环虽然也是一个局部,但是这个局部是属于function这个大局部,因此才会出现仍然存在i,但是let显然又一次达到了我们的预期!

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

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注源码搜藏网的更多内容!


js/jQuery教程阅读排行

最新文章