浅谈JS中var、let、const变量定义的不同之处。

在JS开发中,有三种变量定义方式:var、let、const,他们是有很大区别的!

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

例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,因为在let和const中引入了一个暂存该类变量的区域Temporal Dead Zone,简称TDZ。就是我们所说的临时死区。

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

问题:let和const申明的变量真的不被提升吗?

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率小。

展开阅读全文

页面更新:2024-03-09

标签:变量   死区   被覆   定义   常量   暂时性   赋值   括号   全局   对象   声明   作用   域内   代码   数据   数码

1 2 3 4 5

上滑加载更多 ↓
推荐阅读:
友情链接:
更多:

本站资料均由网友自行发布提供,仅用于学习交流。如有版权问题,请与我联系,QQ:4156828  

© CopyRight 2020-2024 All Rights Reserved. Powered By 71396.com 闽ICP备11008920号-4
闽公网安备35020302034903号

Top