JavaScript-变量的作用域、let、const详解

最新推荐文章于 2024-11-08 16:09:18 发布
最新推荐文章于 2024-11-08 16:09:18 发布
阅读量208 收藏
点赞数
分类专栏： JavaScript 文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_61727355/article/details/126640886
版权

在 javascript 中，var 定义变量实际是有作用域的。

假设在函数体中声明，则在函数体外不可以使用（可以用"闭包"实现）

测试如下代码：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function biu(){
            var x=1;
            x=x+1;
        }
        x=x+2;
    </script>
</head>
<body>

</body>
</html>

此时浏览器会提示最后一个x缺少作用域：

如果两个函数使用了相同的变量名，只要在函数内部就不冲突

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function biu(){
            var x=1;
            x=x+1;
        }
        function biu2(){
            var x='A';
            x=x+1;
        }
    </script>
</head>
<body>

</body>
</html>

内部函数可以访问外部函数的成员，反之则不行，示例如下：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function biu(){
            var x=1;

            function biu2(){
                var y=x+1; //2
            }
            var z=y+1; //报错
        }
    </script>
</head>
<body>

</body>
</html>

假设，内部函数变量和外部函数的变量重名，在JavaScript中函数查找从自身函数开始，由'内'向'外'查找，假设外部存在这个同名的函数变量，则内部函数会屏蔽外部函数的变量

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function biu(){
            var x=1;

            function biu2(){
                var x='A';
                console.log('inner'+x);
            }
            console.log('outer'+x)
            biu2();
        }
        biu();
    </script>
</head>
<body>

</body>
</html>

js 会提升变量的作用域

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function biu(){
            var x='x'+y;
            console.log(x)
            var y='y';
        }
        //上述代码等价于
        function biu2(){
            var y;
            var x='x'+y;
            console.log(x);
            y='u'
        }
        biu();
    </script>
</head>
<body>

</body>
</html>

结果：xundefined

说明：js执行引擎，自动提升了y的声明，但是不会提升变量y的赋值，这个是在js建立之初就存在的特性，需要养成规范，所有的变量定义都放在函数的的头部，不要乱放，便于代码维护

//规范写法
        function biu2(){
            var x=1,
                y=x+1,
                z,i; //undefined
        }

全局函数

<script>
        //全局变量
        var x=1;
        function f(){
            console.log(x);
        }
        f();
        console.log(x);
    </script>

全局对象 window

<script>
        var x='xxx';
        alert(x);
        alert(window.x);//默认所有的全局变量都会自动绑定在window对象上
    </script>

alert() 这个函数本身也是一个window的变量；

<script>
        var x='xxx';
        window.alert(x);
        var old_alert=window.alert;
        window.alert=function () {
            
        }
        //此时alert()失效
        window.alert(123);
        //恢复alert
        window.alert=old_alert;
        window.alert(456);
    </script>

说明JavaScript只有一个全局作用域，任何变量（函数也可以视为变量），假设没有在函数作用范围内找到，就会向外查找，如果在全局作用域都没有找到，就会报错RefrenceError

规范：

由于我们所有的全局变量都会绑定到我们的window上，如果不同的js文件使用了相同的全局变量，如何能够减少冲突？ ---> 定义一个唯一全局变量

<script>
        //唯一全局变量
        var BiuApp={};
        //定义全局变量
        BiuApp.name='biubiu';
        BiuApp.add=function (a,b) {
            return a+b;
        }    
</script>

把自己的代码全部放在自己定义的唯一空间名字中，降低命名冲突的问题

jQuery中就是使用的该方法：jQuery.name，简便写法：$()

局部作用域 let：

<script>
        function aaa(){
            for (var i = 0; i < 100; i++) {
                console.log(i)
            }
            console.log(i+1)// 问题：i出了这个作用域还可以使用
        }
    </script>

ES6 let关键字，解决局部作用域冲突问题

<script>
        function aaa(){
            for (let i = 0; i < 100; i++) {
                console.log(i);
            }
            console.log(i+1);
        }
    </script>

建议都使用let去定义局部作用域的变量

常量const：

在ES6之前，怎么定义常量：只要用全部大写字母命名的变量就是常量，建议不要修改这样的值

<script>
        var PI='3.14';
        console.log(PI);
        PI='3.14125';//可以改变这个值
        console.log(PI);
    </script>

在ES6引入了常量关键字const：

1uuue
关注
专栏目录
JavaScript变量作用域，let与const（源码示例）
weixin_47556601的博客
02-12 538
大家好，今天我们分享JavaScript变量作用域 在JavaScript当中，var 定义的变量实际上是有作用域的 假如在函数体中声明，那么在函数体外就无法使用 举个例子： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试实例</title> <script> function wo() { var
javascript 中的 let 作用域
weixin_30336061的博客
11-09 1537
let声明了一个块级域的局部变量，并且可以给它一个初始化值。 语法EDIT let var1 [= value1] [, var2 [= value2]] [, ..., varN [= valueN]]; 参数 var1,var2, …,varN变量名。变量名可以定义为任何合法标识符。value1,value2, …,valueN变量的初始化值。该值可以为任何合法表达式。 描...
JavaScript面试题——作用域
weixin_47047317的博客
07-06 422
作用域 定义：作用域负责收集并维护由所有声明的标识符(变量)组成的一系列查询，并实施一套非常严格的规则，确定当前执行的代码对这些标识符的 访问权限。 通俗来说，作用域相当于一个管理员（有自己的一套规则），他负责管理所有声明的标识符的有序查询。 词法作用域 VS 动态作用域 大部分标准语言编译器的第一个工作阶段叫作词法化(也叫单词化)。 词法作用域就是定义在词法阶段的作用域。换句话说，词法作用域是由你在写代码时将变量和块作用域写在哪里来决定的， 作用域链 ...
Javascript没有块级作用域（let 和var）
大锤的专栏
07-03 1054
在java，c中，如果一个变量在一个代码块中声明定义，那么dia
JavaScript 作用域 与 var、let、const关键字
m0_65029152的博客
07-09 2149
本文主要记录JavaScript中的作用域，以及var、let、const关键字的特点和使用场景；
Javascript变量作用域详解
10-26
### Javascript变量作用域详解 Javascript变量作用域是编程中一个非常基础且重要的概念，理解它对于编写有效且可维护的代码至关重要。在Javascript中，变量的作用域主要分为两种：全局作用域和局部作用域。全局变量...
Javascript基础之-var，let和const深入解析（一）作用域、提升
LawssssCat的博客
02-04 569
文章目录# let和const## let## const## 真正的不可变# 变量的作用域## 全局变量和函数作用域变量## 提升## 编译变量## 提升 - 会出什么问题 # let和const es6 引入了两种方式来申明变量 我们仍然可以使用广为传诵的 var 变量（然而你不应该继续使用它了，继续阅读来了解其中原因） 因为，现在我们有了两种更牛的工具去使用： let 和 const 。 #...
javascript 作用于作用域链的详解
10-19
作用域链是理解JavaScript变量访问规则的关键，它决定了在函数内部访问变量时JavaScript引擎查找变量的顺序。 1. 当函数被创建时，它的内部属性[[Scope]]包含了函数被创建时的作用域链。作用域链本质上是一个对象...
javascript中的作用域和闭包详解
10-22
在JavaScript中，闭包提供了对变量作用域访问和数据持久化的能力。 在JavaScript中，作用域主要分为两种：全局作用域和局部作用域。全局作用域中的变量可在代码中任何地方被访问。局部作用域是指仅在函数内部声明的...
js变量、作用域及内存详解
10-25
JS变量、作用域及内存详解涉及到JavaScript编程语言中的几个核心概念。下面将详细分析这三个方面： 1. JavaScript变量 在JavaScript中，变量可以存储不同类型的数据值，包括基本类型和引用类型。 - 基本类型包括：...
JavaScript——变量的作用域、let、const详解
qq_52006379的博客
06-19 543
在JavaScript中，var定义的变量实际是有作用域的， 假设在函数体声明，则在函数体外不可以使用~（但可以研究闭包使用） 如果两个函数使用了相同的变量名，只要在函数内部，就不冲突 由于JavaScript的函数可以嵌套，此时，内部函数可以访问外部函数定义的变量，反过来则不行： JavaScript的函数在查找变量时从自身函数定义开始，从“内”向“外”查找。如果内部函数定义了与外部函数重名的变量，则内部函数的变量将“屏蔽”外部函数的变量。 虽然是strict模式，但语句var x = 'a, ’ +
JavaScript块级作用域, let, const介绍
翾的博客
05-18 2263
let块级作用域ES6里增加了let，const, 声明在{}, -> “function,if ,for等” 的变量作用域被限制在块级。（严格模式下 function 变量属于块级作用域）例:{ let i = 0; } console.log(i); //报错Uncaught ReferenceError: i is not defined同时还可以解决闭包问题, 例如我们为10个div
JS作用域之let和var
sinat_28839863的博客
03-05 3521
由于之前C和JAVA相关语言的学习，对于JS的作用域比较接收，但中间有一个注意点： JS中没有块级作用域，只有全局作用域和函数作用域；对于没有块级作用域，比如： 这里的i就是for中定义的i，如果在函数外，那么就是全局变量了，页面关闭才会销毁。 对于全局作用域和函数作用域：只用记住子域可以访问父域，而父域不能访问子域（全局作用域：参考C、java的全部变量）。 需要注意le...
JS中的块级作用域，var、let、const三者的区别
热门推荐
hot_cool的博客
10-21 4万+
首先，ECMAScript和JavaScript关系： ECMAScript是一个国际通过的标准化脚本语言。JavaScript由ECMAScript和DOM、BOM三者组成。可以简单理解为：ECMAScript是JavaScript的语言规范，JavaScript是ECMAScript的实现和扩展。1. 块作用域{ }JS中作用域有：全局作用域、函数作用域。没有块作用域的概念。ECM
ES6-变量let、const和块级作用域
qq_43812731的博客
08-12 369
ES5 中，使用 var 定义全局变量 ES6 中，新增了 let 和 const 来定义变量： let：定义局部变量，替代 var。 const：定义常量（定义后，不可修改）。 1、var：定义全局变量 看下面的代码： { var a = 1; } console.log(a); //这里的 a，指的是 区块 里的 a 上方代码是可以输出结果的，输出结果为 1。因为 var 是全局声明的，所以，即使是在区块里声明，但仍然在全局起作用。 也就是说：使用 var 声明的变量不具备块级作
一：JS作用域与let、const与作用域
qq_51980865的博客
04-24 653
Let命令 1：let作用类似于var，但是不同的是他们声明变量的作用域有区别。 let所声明变量的作用域只在let所在的代码块有效，出来这个块外界就没有用了。 for(let i=0;i<3;i++){ let i='abc'; console.log(i) } 在这几句代码中，for循环里面是一个独立的作用域，而循环体内又是一个独立的作用域。 var所声明的变量作用域确是全局都可以使用 而这一特性在特殊场合有很大的作用，建议let和var根据情况不同配合使用。 2：暂时性
vue2面试题5|[2024-11-08]
最新发布
m0_49474690的博客
11-08 367
关于vue2API的面试题
Echarts 折线图
weixin_44443380的博客
11-08 204
解决方法：设置emphasis.lineStyle和折线图本身lineStyle相同即可。问题：鼠标悬停在折线图上，折线变粗。3、去掉 hover 折线变粗方法。
每天10个vue面试题(九)
不熬夜的臭宝的博客
11-08 516
一天10个vue面试题喽！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值