龙空技术网

深度理解js中var let const 区别

一块学前端 208

前言:

眼前你们对“varjs变量”可能比较关心,你们都需要了解一些“varjs变量”的相关资讯。那么小编在网上网罗了一些关于“varjs变量””的相关内容,希望大家能喜欢,大家一起来学习一下吧!

首先要理解js中作用域的概念

作用域:指的是一个变量的作用范围

1.全局作用域

直接写在script中的js代码,在js中,万物皆对象,都在全局作用域,全局作用域在页面打开时创建,在全局作用域中有一个全局对象window,它代表是一个浏览器的窗口

它由浏览器创建可以直接使用,在全局作用域中,创建的对象都可以都可以作为window对象的属性保存,在任何地方都可以调用

2.函数作用域

调用函数时创建函数作用域,函数执行完毕后,函数作用域销毁,每调用一次函数会创建一个新的函数作用域他们之间是相互独立的,函数中可以访问到全局作用域的变量,反之不行。当在函数作用域中操作对象,如果有,则使用,如果没有则向其上一个作用域(不是指的是全局作用域)找,直到找到全局作用域无论在那个作用域,都有变量声明提前现象,在函数中不用var声明的变量都会设置为全局变量,形参相当于在函数作用域里声明变量

var定义的变量可被更改,如果不初始化而直接使用也不会报错,var声明的变量会得到提升,其余两个不存在这种情况,即必须先声明再赋值

let定义的变量和var类似,但作用域在当前声明的范围内

const定义的变量只可初始化一次且作用域内不可被更改,使用前必须初始化

1.var的变量提升

js和其他语言一样,都要经历编译和执行阶段。而js在编译阶段的时候,会搜集所有的变量声明并且提前声明变量,而不会改变其他语句的顺序,因此,在编译阶段的时候,第一步就已经执行了,而第二步则是在执行阶段执行到该语句的时候才执行

经典案例

var即可用于函数外,亦可用于函数内,这就涉及到全局变量与局部变量的问题,

全局变量如何声明:

在函数外声明的变量就是全局变量,反之,在函数内声明的变量就是局部变量,

作用域:全局变量无论在函数内,还是函数外,都可访问到;

局部变量只能在函数内有效,函数外部访问不到该变量及说对应的变量值

 <script> var a = 10; function change() { console.log(a); var a = 7; //变量提升原因 例子1 } change() //输出为undefine console.log(a);//输出为10 </script>
<script> var a = 10; function change() { a = 7; //改变了全局变量a的值 } change(); console.log(a);//输出为7 </script>--------------------- <script> var a = 10; function change() { var a = 7; //作用域的原因,a属于函数作用域。 } change(); console.log(a);//输出为10 输出的a是全局区域中的a,因为局部变量只能在函数内有效,函数外部访问不到该变量及说对应的变量值  </script> 

let是块级作用域,函数内部使用let定义后,对函数外部无影响

ES6 新增了let命令,用来声明变量。它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效。

{ let a = 10; var b = 1;}a // ReferenceError: a is not defined.b // 1不可以{let a = 1;let = 3;重复定义在一个块级作用域}

for循环的计数器,就很合适使用let命令

for (let i = 0; i < 10; i++) { // ...}console.log(i);// ReferenceError: i is not defined

暂时性死区

var tmp = 123;if (true) { tmp = 'abc'; // ReferenceError//下面定义了let tmp 上面只要这种操作就是暂时性死区,为了让我们编码严格 const也是 let tmp;}

为什么用块级作用域?

1.例子1的变量提升,2就是for循环中的i

块级作用域

function f1() { let n = 5; if (true) { let n = 10; } console.log(n); // 5 如果是var,的话会输出10}

const声明一个只读的常量。一旦声明,常量的值就不能改变。

对于const来说,只声明不赋值,就会报错。

const的作用域与let命令相同:只在声明所在的块级作用域内有效。

const命令声明的常量也是不提升,同样存在暂时性死区,只能在声明的位置后面使用。

const声明的常量,也与let一样不可重复声明。

本质

const实际上保证的,并不是变量的值不得改动,而是变量指向的那个内存地址所保存的数据不得改动。对于简单类型的数据(数值、字符串、布尔值),值就保存在变量指向的那个内存地址,因此等同于常量。但对于复合类型的数据(主要是对象和数组),变量指向的内存地址,保存的只是一个指向实际数据的指针,const只能保证这个指针是固定的(即总是指向另一个固定的地址),至于它指向的数据结构是不是可变的,就完全不能控制了。因此,将一个对象声明为常量必须非常小心。

const foo = {};// 为 foo 添加一个属性,可以成功foo.prop = 123;foo.prop // 123// 将 foo 指向另一个对象,就会报错foo = {}; // TypeError: "foo" is read-only

---------------------

觉得写的还可以的朋友,请点赞加关注哦

如果文章中有疏忽写错的或者你不理解的还请评论区内交流哦

标签: #varjs变量