你所知道的JS变量作用域

Jacquelyn38
• 阅读 1599

变量的作用域,指的是变量在脚本代码中的可读、可写的有效范围,也就是脚本代码中可以使用这个变量的区域。在ES6之前,变量的作用域主要分为全局作用域、局部作用域(也称函数作用域)两种;在ES6及其之后,变量的作用域主要分为全局作用域、局部作用域、块级作用域这3种。相应作用域变量分别称为全局变量、局部变量、块级变量。全局变量声明在所有函数之外;局部变量是在函数体内声明的变量或者是函数的命名参数;块级变量是在块中声明的变量,只在块中有效。

变量的作用域跟声明方式有密切的关系。使用var声明的变量的作用域有全局作用域和局部作用域,没有块级作用域;使用let和const声明的变量有全局作用域、局部作用域和块级作用域。

注:严格意义的全局变量都属于Window对象的属性,但let和const声明的变量并不属于Windows对象,所以它们并不是严格意义上的全局变量,在此仅仅从它们的作用域这个角度来说它们是全局变量的。

由于var支持变量提升,所以var变量的全局作用域是对整个页面的脚本代码有效;而let和const不支持变量提升,所以let和const变量的全局作用域指的是从声明语句开始到整个页面的脚本代码结束之间的整个区域,而声明语句之前的区域是没有效的。同样,因为var支持变量提升,而let和const不支持变量提升,所以使用var声明的局部变量是在整个函数有效,而使用let和const声明的局部变量从声明语句开始到函数结束之间的区域有效。需要注意的是,如果局部变量和全局变量同名,则在函数作用域中,局部变量会覆盖全局变量,即在函数体中起作用的是局部变量;在函数体外,全局变量起作用,局部变量无效,此时引用局部变量将出现语法错误。在块开始到块级变量声明语句之间区域为暂时性死区,在这个区域,块级变量没有效。

另外,在非严格运行模式中,变量可以不需要声明,这些没有声明的变量,不管在哪里使用都属于全局变量。通常不建议变量不声明而直接使用,因为这样有可能会产生一些不易发现的错误。

<!DOCTYPE html>  
<html>  
<head>  
 <title></title>  
</head>  
<body>  
<script> var v1 = "JavaScript"; // 全局变量  
   let v2 = "JScript"; // 全局变量  
   let v3 = "Script"; // 全局变量  

   scopeTest(); // 调用函数  
   function scopeTest(){  
    var lv = "aaa";//局部变量  
        var v1 = "bbb";//局部变量  
        let v2 = "ccc";//局部变量  
        if(true){  
            let lv = "123";  
            console.log("块级输出的lv= " + lv); // 123  
        }  

        console.log("函数体内输出的lv = " +lv); //aaa  
        console.log("函数体内输出的v1 = " +v1); //bbb  
        console.log("函数体内输出的v2 = " +v2); //ccc  
        console.log("函数体内输出的v3 = " +v3); //Script  
        console.log("函数体内输出的v4 = " +v4); // undefined, v4为全局变量,赋值在后面,var存在变量提升,因而值为undefined  
   }  
   var v4 = "VB"; //全局变量  
   console.log("函数体外输出的lv = " +lv); // 报ReferenceError错误  
   console.log("函数体内输出的v1 = " +v1); //JavaScript  
   console.log("函数体内输出的v2 = " +v2); //JScript  
   console.log("函数体内输出的v3 = " +v3); //Script  
   console.log("函数体内输出的v4 = " +v4); // VB</script>  
</body>  
</html>  

上述脚本代码分别声明了4个全局变量、3个局部变量和1个块级变量。在scopeTest函数体外,变量v1、v2、v3和v4为全局变量;在scopeTest函数体内,lv、v2是全局变量;在if判断块中,lv是块级变量。我们看到,局部变量v1和v2与全局变量v1和v2同名,在scopeTest函数体内,局部变量v1和v2有效,因而在函数体这2个变量的输出结果分别为bbbccc;在函数体外全局变量v1和v2有效,因而在函数体外,这2个变量的输出结果分别为JavaScriptJScript。另外,块级变量lv和局部变量lv同名,在if判断块中,块级变量lv有效,因而在块中输出的结果为123,而在块外,局部变量lv有效,lv变量的输出结果为aaa。另外,全局变量v3和v4在函数体中没有被覆盖,因而输出的是全局变量的值,所以v3在函数体外和体内输出结果都是Script,而v4变量的赋值在函数调用的后面,因而在函数体中的v4输出结果为undefined,而在函数体外的输出是在声明之后,所以结果为VB。lv是局部变量,因而在函数体外访问会报ReferenceError错误。

总结:块级变量在块内覆盖局部变量,局部变量在函数体内覆盖全局变量,没有被覆盖的全局变量在函数体内、外都有效。


欢迎关注我的公众号前端历劫之路

回复关键词电子书,即可获取12本前端热门电子书。

回复关键词红宝书第4版,即可获取最新《JavaScript高级程序设计》(第四版)电子书。

关注公众号后,点击下方菜单即可加我微信,我拉拢了很多IT大佬,创建了一个技术交流、文章分享群,期待你的加入。

你所知道的JS变量作用域

本文转转自微信公众号前端历劫之路原创https://mp.weixin.qq.com/s/ypfKD0mfaaHWNnS54Z67DA,如有侵权,请联系删除。

点赞
收藏
评论区
推荐文章
Souleigh ✨ Souleigh ✨
3年前
JS - 作用域
一、作用域作用域,即变量(变量作用域又称上下文)和函数生效(能被访问)的区域或集合换句话说,作用域决定了代码区块中变量和其他资源的可见性举个例子function myFunction(){    let inVariable  "函数内部变量";}myFunction();//要先执行这个函数,否则根本不知
Dax Dax
3年前
JS核心原理理解闭包
前置概念在正式看闭包之前,我们先来学习一下前置知识,那就是JS中的作用域,我们知道,在ES5之中,作用域分为两种:全局作用域和函数作用域,随着ES6的到来,新增了块级作用域,想更好的理解闭包,那么搞清楚作用域是首要条件全局作用域我们知道,对于变量而言,我们一般会分成两类:全局变量和局部变量,一般定义在最外围环境的为全局变量,定义在函数当中的为局部变量,在we
Karen110 Karen110
3年前
一篇文章带你了解JavaScript作用域
在JavaScript中,对象和函数也是变量。在JavaScript中,作用域是你可以访问的变量、对象和函数的集合。JavaScript有函数作用域:这个作用域在函数内变化。一、本地JavaScript变量一个变量声明在JavaScript函数内部,成为函数的局部变量。局部变量有局部作用域:它们只能在函数中访问。JS://codeherecann
菜园前端 菜园前端
1年前
为你解惑JS作用域和作用域链知识
原文链接:变量作用域一个变量的作用域(scope)是程序源代码中定义这个变量的区域。全局变量拥有全局作用域,在JavaScript代码中的任何地方都是可以访问的。然而在函数内声明的变量只能在函数体内访问,它们是局部变量,作用域是局部性的。函数参数也是局部变
Stella981 Stella981
3年前
Javascript 变量 var与不var的区别
1.在函数作用域内加var定义的变量是局部变量,不加var定义的就成了全局变量。使用var定义var a  'hello World';function bb(){    var a  'hello Bill';    console.log(a);   }bb()   // 'hello Bill'conso
Stella981 Stella981
3年前
Python的四种作用域及调用顺序
↑关注星标 ~从此不迷路,后台回复【礼包】送你Python自学资料作用域又可以被称为命名空间,指变量起作用的范围。Python变量作用域可以分为四种,分别为局部作用域、嵌套作用域、全局作用域、内置作用域。作用域英文简写局部作用域LocalL嵌套作用域EnclosedE全局作用域Global
Wesley13 Wesley13
3年前
ES6 简单整理
1.变量声明let和constlet与const都是块级作用域,letfunctionname(){letage12;//age只在name()函数中存在}constconstname'tom'name'jack'//
Wesley13 Wesley13
3年前
ES6的语法
一,定义变量let(类似var)在js一直有一个bug是var:1、var声明的变量会有变量提升console.log(name);//jhonvarname'jhon';2、var没有块级作用域varname2'jjjon';{varname2'tom';
Wesley13 Wesley13
3年前
Java连载7
一、变量1.注意点:在同一个“作用域”中,变量名不能重名,但是变量可以重新赋值。2.什么是作用域?答:描述的是变量的有效范围,在范围之内是可以被访问的,只要出了作用域就无法访问(也就是在大括号里面才行)3.关于变量的分类(1)局部变量:在方法体中声明的变量;(2)成员变量:在方法体外声明的变量。4.在不同的作用域中,变量名是可
小万哥 小万哥
1年前
Python 作用域:局部作用域、全局作用域和使用 global 关键字
变量只在创建它的区域内可用。这被称为作用域。局部作用域在函数内部创建的变量属于该函数的局部作用域,并且只能在该函数内部使用。示例:在函数内部创建的变量在该函数内部可用:pythondefmyfunc():x300print(x)myfunc()函数内部的函