登录
原创

ES6-新的声明方式let

发布于 2021-09-28 阅读 73
  • 前端
  • ECMAScript 6
原创

ES6(ECMAScript2015)新增了let声明方式,用来解决旧的ES5中var声明变量方式的缺陷

旧的声明方式var特点:

  1. 属于顶层对象window
  2. 允许重复声明变量
  3. 有变量提升
  4. 不存在暂时性死区
  5. 没有块级作用域

属于顶层对象window- - -
有var声明的是变量
没有声明,直接赋值的是对象的属性

验证上述书法可以使用delete,delete只能删除对象的属性,不能删除变量- - -

image.png

使用delete后,没有使用 var 的 b 被删除掉了, 使用了 var 的 a 没有还在没有被删除

eg:

<script>
  // 这里的 a 是变量
  var a = 222;
  console.log(window.a);

  // 这里的 b 是属性
  b = 8;
  console.log(window.b);            
</script>

此处,a 有 var声明,是全局变量;b 没有声明,是顶层对象window的属性

使用- - -对象名.属性名 的方式可以读取对应属性值,但是变量值不能按这种方式获取

按理说用该- - -window.a 是获取不到变量a的值,但是实际运行代码却发现获取到了变量a的值

image.png

因为- - -ES5中,将全局变量和window顶层对象进行了挂钩。但是这种挂钩设计不太好,ES6的新声明方式let解决了这个问题

允许重复声明变量- - -

var a = 222;
var b = 333;
console.log(window.a);

var这样重复声明变量不会报错,可以正常输出结果

image.png

有变量提升- - -

var a = 222;
console.log(a);

// 相当于
var a;
console.log(a);
a = 222;

不存在暂时性死区- - -
在一个封闭的区内,变量可以先使用,后声明,不会报错:

image.png

没有块级作用域- - -
ES5中只有全局作用域和函数作用域,没有块级作用域,像这种循环,在 {} 之外,也能访问到 i

image.png

新的声明方式let特点:

  1. 不属于顶层对象window
  2. 不允许重复声明变量
  3. 没有变量提升
  4. 存在暂时性死区
  5. 有块级作用域

不属于顶层对象window- - -

image.png

let定义的变量,不能使用对象的方式访问到,取消了全局变量和顶层对象的挂钩

不允许重复声明变量- - -

image.png

没有变量提升- - -

let b = 666
console.log(b)

/* 
上面两句不会转换成这种形式:
let b
console.log(b)
b = 666
 */

存在暂时性死区- - -

image.png

image.png

一个封闭环境内,变量不能先使用后声明,一定要先声明后使用

一个比较隐蔽的暂时性死区:

image.png

有块级作用域- - -

image.png

大括号 {} 内是一个块级作用域, {} 里面定义的变量,出了 {} 在外面不能访问

评论区

零00
5粉丝

时光荏苒,我自清欢

0

0

0

举报