详解JS中var、let以及const作用域

在学习JS变量之后，初学者都避免不了都会一下子分不清这三个变量在代码块中的作用域范围，其实const简单理解它就是定义常量的，但是在实际开发中，我们却很常见它的身影。

说实话刚开始我也分不清他们的作用域范围，但是自己再去详细看一遍教程之后，其实发现还是挺简单的，只要自己上手去实操一遍过后，基本就已经牢记了，自己就是太懒了，哈哈，很多东西看一遍就过了，以至于到真正用起来，一问三不知。

所以，接下来我们通过代码片段去搞清楚它们三个的区别

用var关键字定义的变量：
情况一：

<script>//定义并赋值一个var变量var a = 1;      //此时我们定义的是全局变量//定义一个函数，用来代表作用域，只要函数懂了，其实对象也就懂了function myfunction(){var a = 2;a = 3;console.log("函数中的值为：",a);}//调用函数myfunction();console.log("函数外的值为：", a);
</script>

此时控制台输出的就是正常内容：

情况二：

<script>//定义并赋值一个var变量var a = 1;      //此时我们定义的是全局变量//定义一个函数，用来代表作用域，只要函数懂了，其实对象也就懂了function myfunction(){var a = 2;a = 3;console.log("函数中的值为：",a);}console.log("函数外的值为：", a);
</script>

此时输出a的值，显示结果为1，也就是说即使是在函数中重新定义，赋值 a ，它作用的范围都仅限于函数体内，函数体外是不会受影响的，这种情况我相信不用说大家都能理解。

用let关键字定义变量：
情况一：

<script>//定义并赋值一个var变量let a = 1;      //此时我们定义的是全局变量//定义一个函数，用来代表作用域，只要函数懂了，其实对象也就懂了function myfunction(){let a = 2;a = 3;console.log("函数中的值为：",a);}// 调用函数myfunction();console.log("函数外的值为：", a);
</script>

结果和var一样，函数体内和函数体外输出的内容都是对应的，互不影响，且也可以重新赋值

情况二：

<script>//定义并赋值一个var变量let a = 1;      //此时我们定义的是全局变量let a = 2;//定义一个函数，用来代表作用域，只要函数懂了，其实对象也就懂了function myfunction(){let a = 2;let a = 3;a = 3;console.log("函数中的值为：",a);}// 调用函数myfunction();console.log("函数外的值为：", a);
</script>

此时，就算程序还没运行，代码提示中就会出现报红，证明不论在全局作用域下还是在局部作用域，let关键字定义的变量是不允许重新定义的

用const关键字定义常量
其实听见常量都知道它的定义规则了，但是，我们还是不厌其烦的自己去再尝试以下
情况一：

<script>//定义并赋值一个var变量const a = 1;      //此时我们定义的是全局变量//定义一个函数，用来代表作用域，只要函数懂了，其实对象也就懂了function myfunction(){const a = 2;console.log("函数中的值为：",a);}// 调用函数myfunction();console.log("函数外的值为：", a);
</script>

此时，用const关键字定义的常量和上面的情况一一样，都是正常的

情况二：

<script>//定义并赋值一个var变量const a = 1;      //此时我们定义的是全局变量const a = 2;//定义一个函数，用来代表作用域，只要函数懂了，其实对象也就懂了function myfunction(){const a = 2;const a = 3;console.log("函数中的值为：",a);}// 调用函数myfunction();console.log("函数外的值为：", a);
</script>

此时，程序还没有被运行，代码提示就会报红，所以说，常量是不能被重复定义并赋值的

情况三：

<script>//定义并赋值一个var变量const a = 1;      //此时我们定义的是全局变量a = 2//定义一个函数，用来代表作用域，只要函数懂了，其实对象也就懂了function myfunction(){const a = 2;console.log("函数中的值为：",a);}// 调用函数myfunction();console.log("函数外的值为：", a);
</script>

此时我只是重新赋值了a，并没有重新定义，虽然代码提示没有报红，但在控制台中，就已经出现了错误，同样，即使是在函数中定义赋值常量并再次赋值，也是和上述一样，所以说，常量是不能被重新定义和赋值的

总结

var： 无论是在全局作用域或是局部作用域，用var关键字定义变量，都可以进行重新定义或赋值操作，这相信大家不用说都知道

let： 在全局作用域下定义赋值或重复赋值，或者是在局部作用于下定义赋值或赋值，都是可行的，但是，不能在同一定义域下重复赋值。

const： 无论在全局作用域下还是局部作用域下，都可以声明并赋值一个常量，但是常量是不可被再次定义或赋值的，即便是在全局作用域下声明赋值一个常量，在局部作用域下修改其值，虽然代码提示不会报错，但是也是不可行的。

JS中var、let以及const关键字到底怎么用？相关推荐

Js中var,let,const的区别
一:区别: 1.var声明的变量属于函数作用域,而let和const声明的变量属于块级作用域:(js作用域在上篇文章) 2.var声明的变量存在变量提升,而let和const没有 3.var声明的变量 ...
Vue.js-Day01-PM【事件绑定(事件传参、事件对象、传参+获取事件对象)、样式处理操作(模板、事件、属性绑定)、Tab切换(原生js实现、Vue.js实现)、js中的this详解关键字】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 目录 4.事件绑定 4.1.事件绑定(点击.双击.鼠标移动) 点击按钮-最简单的事件绑定(无参函数) 格式点击按钮 ...
认清js中var a=b=1和var a=1,b=1的区别
js中一次性定义多个变量的时候,可以用:var a=1,b=1这种中间用逗号隔开的方式,但有些时候为了省事,直接定义var a=b=1.那这两种写法方式最后效果是一样的吗?有没有什么区别呢?请大家看下 ...
JS中var与function
文章目录 var的理解 1.在HTML文档中添加script标签,使用var定义变量a,输出. 2.定义一个方法,demo函数,在函数中重新赋值并输出. 3. 不适用var定义变量使用var定义fu ...
JS中var和let的区别
var和let的区别: 区别: 1.使用var声明的变量,其作用域为该语句所在的函数内,且存在变量提升现象: 2.使用let声明的变量,其作用域为该语句所在的代码块内,不存在变量提升: 3.let不允 ...
注意判断js中使用正则表达式的转义字符，到底是对谁进行转义！！！
前言: 前一段时间,对如下一段特殊符号进行测试,js中有一段代码如下: [`~!@#$^&*()=|{};:'".,[\]./?~@#&*{}] 结果发现不能匹配\,于是没有 ...
js中 var a 和 a 的区别
先看一段代码: var name = 'Tom'; function say() {if (name == undefined) {var name = 'Jack'console.log('good ...
JS中var、let、const区别？用3句话概括
使用var声明的变量,其作用域为该语句所在的函数内,且存在变量提升现象: 使用let声明的变量,其作用域为该语句所在的代码块内,不存在变量提升: 使用const声明的是常量,在后面出现的代码中不能再修 ...
js中var、let、const区别
//1.var定义的变量可以修改,如果不初始化会输出undefined,不会报错. var a; console.log(a); //undefined//2.let是块级作用域,函数内部使用let定 ...
JS中VAR的用处（局部变量要用var来声明，全局变量不加var）
都不记得是什么时候看的JScript的语法教程了,里面说在声明变量时忽略var关键字是完全合法的.当时也因为觉得JavaScript是loosely-typed的语言,所以var可能真的就是个摆设.但 ...

JS中var、let以及const关键字到底怎么用？