欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

浅谈JS中 var let const 变量声明

程序员文章站 2022-05-31 20:54:29
每天学习每日进步,不断累积。大佬们说过,只会api的前端不是一个好的工程师。 ......

浅谈js中 var let const 变量声明

var来声明变量会出现的问题:

 

1. 允许重复的变量声明:导致数据被覆盖

2. 变量提升:怪异的数据访问、闭包问题

3. 全局变量挂载到全局对象:全局对象成员污染问题

 

1

 浅谈JS中 var let const 变量声明浅谈JS中 var let const 变量声明

 

 

 

var声明的变量会默认被提升到当前作用域的顶部

 

2

浅谈JS中 var let const 变量声明浅谈JS中 var let const 变量声明

 

 

 

 

 

 

 

for循环内的i变量当前所处的环境是全局作用域(函数局部作用域同理,只不过声明之后不绑定在window上)。

所以在最后点击事件触发的时候打印的i都是当前作用域上的同一个i,也即是最后的11

,这就产生了闭包,如下图

 浅谈JS中 var let const 变量声明

 

 

 

 

 

es6 中引入let const,以及块级作用域来解决这个问题

 

什么是块级作用域

块级作用域:代码执行时遇到花括号,会创建一个块级作用域,花括号结束,销毁块级作用域

 

let在全局作用域下定义变量不会挂在到顶层对象window

let声明的变量,不允许当前作用域范围内重复声明,在块级作用域中用let定义的变量,在作用域外不能访问

let不会有变量提升,因此,不能在定义let变量之前使用它

 

1(对比):

 浅谈JS中 var let const 变量声明浅谈JS中 var let const 变量声明

 

 

 

 

 

为什么会出现error,因为在letconst中引入了一个暂存该类变量的区域temporal dead zone,简称tdz。就是我们所说的临时死区。

tdz中的变量不能被访问,不然就会报错,只有在给该变量赋值的时候才会从死区内接触。

 

问题:letconst申明的变量真的不被提升吗?

let声明的变量实际上也会有提升,但是,提升后会将其放入到暂时性死区,如果访问的变量位于暂时性死区,则会报错:“cannot access 'a' before initialization”。当代码运行到该变量的声明语句时,会将其从暂时性死区中移除。

 

2(对比):

 浅谈JS中 var let const 变量声明浅谈JS中 var let const 变量声明

 

 

 

轻松解决闭包问题

 

但是我们看到,此时for循环内()中的let i并不在块级作用域内,讲道理应该最后点击时,打印的应该是这个全局上的i。这个i最后是11,可是从结果上来看却不是这样。

 

在全局上打印这个i

 浅谈JS中 var let const 变量声明浅谈JS中 var let const 变量声明

 

 

 

说明这个for循环()内的i并不是定义在全局作用域上的

 

原因:

对于for循环()内let定义的变量,做了特殊的处理。此变量相当于默认声明在后面块级作用域内

 

const

const let特性相同,唯一不同的是,const一般指的都是常量,常量的定义是不可改变的变量,所以用const 申明的变量是不可变的,且只能在定义是进行赋值。

 

 

值得注意的是const声明的常量是指存入内存的内存空间不可变。这也就意味着,如果存的是引用值,改变引用值内的属性,const所对应的值就会改变

 

 浅谈JS中 var let const 变量声明

 

通常在开发中能写const就用const,不行就用let,这样出bug率小

 

 

每天学习每日进步,不断累积。大佬们说过,只会api的前端不是一个好的工程师。

浅谈JS中 var let const 变量声明