你所知道的JS变量作用域

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

变量的作用域,指的是变量在脚本代码中的可读、可写的有效范围,也就是脚本代码中可以使用这个变量的区域。在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错误。


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



相关文章
|
20天前
|
JavaScript 前端开发
js变量的作用域、作用域链、数据类型和转换应用案例
【4月更文挑战第27天】JavaScript 中变量有全局和局部作用域,全局变量在所有地方可访问,局部变量只限其定义的代码块。作用域链允许变量在当前块未定义时向上搜索父级作用域。语言支持多种数据类型,如字符串、数字、布尔值,可通过 `typeof` 检查类型。转换数据类型用 `parseInt` 或 `parseFloat`,将字符串转为数值。
18 1
|
20天前
|
JavaScript
变量和函数提升(js的问题)
变量和函数提升(js的问题)
|
18天前
|
JavaScript 前端开发
JavaScript 闭包:让你更深入了解函数和作用域
JavaScript 闭包:让你更深入了解函数和作用域
|
20天前
|
前端开发 测试技术
测Nuxt.js入坑,配置dev、test、pro三种环境的变量env
先下载一个cross-env模块,比较好控制环境
32 5
|
20天前
|
存储 JavaScript 前端开发
【JavaScript技术专栏】JavaScript基础入门:变量、数据类型与运算符
【4月更文挑战第30天】本文介绍了JavaScript的基础知识,包括变量(var、let、const)、数据类型(Number、String、Boolean、Undefined、Null及Object、Array)和运算符(算术、赋值、比较、逻辑)。通过实例展示了如何声明变量、操作数据类型以及使用运算符执行数学和逻辑运算。了解这些基础知识对初学者至关重要,是进阶学习JavaScript的关键。
|
5天前
|
JavaScript
JS判断变量是不是数组?方法大全!
JS判断变量是不是数组?方法大全!
|
11天前
|
JavaScript 前端开发 Java
javascript是弱类型语言,一个函数参数可以接收不同类型的变量作为它的该参数
javascript是弱类型语言,一个函数参数可以接收不同类型的变量作为它的该参数
19 0
|
18天前
|
JavaScript 前端开发
JavaScript 作用域详解:如何影响变量生命周期
JavaScript 作用域详解:如何影响变量生命周期
|
20天前
|
JavaScript 前端开发
JavaScript闭包允许内部函数访问并保留外部函数的变量,即使外部函数执行结束
【5月更文挑战第13天】JavaScript闭包允许内部函数访问并保留外部函数的变量,即使外部函数执行结束。在游戏开发中,闭包常用于创建独立状态的角色实例。例如,`createCharacter`函数生成角色,内部函数(如`getHealth`、`setHealth`)形成闭包,保存角色的属性(如生命值)。这样,每个角色实例都有自己的变量副本,不互相影响,从而实现角色系统的独立性。
23 0
|
20天前
|
存储 JavaScript 前端开发
js的变量以及运算
js的变量以及运算
14 1