前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >ECMAScript6基础学习教程(二)块级作用域

ECMAScript6基础学习教程(二)块级作用域

作者头像
娜姐
发布2022-05-13 14:30:22
2680
发布2022-05-13 14:30:22
举报
文章被收录于专栏:娜姐聊前端

ES6出现之前,只有函数可以形成作用域。而ES6中新增了块级作用域概念。

let**和**const**命令可以构成一个块级作用域**。

1.let

用法类似var,声明一个块作用域内的变量,注意,块作用域外无法访问该变量。用法如下:

代码语言:javascript
复制
// 在if语句中定义块作用域
var check = true;
if (check) {
  let value = 6;
}
console.log(value); //undefined
// 在循环中定义块作用域
for(let i =0; i < arr.length; i++) {...}

var不同之处:

  1. 不支持“变量提升”;
  2. 一旦某个变量声明为let或者const类型,则该变量会绑定该区域,不受外界影响。例如:
代码语言:javascript
复制
var temp = 1;
if (true) {
    console.log(temp); //ReferenceError: 用let声明的temp变量会绑定该块作用域
    let temp = 2;
}
  1. 在同一个作用域内,不允许重复声明同一个变量。例如:
代码语言:javascript
复制
if (true) {
    let a = 1;
    let a = 2; //throw error: Duplicate declaration "a"
}

有了块级作用域,可以避免内层变量覆盖外层变量,可以让变量应用到更小范围内。

下面让我们看一道经典的闭包问题,思考如何用let解决?例题如下:

代码语言:javascript
复制
var a = [];
for (var i =0; i <10; i++){
  a[i] = function(){
    console.log(i);
  }
}
a[6](); // 10

由于变量i是全局变量,所有每一次循环,新的i值都会覆盖老的i值,导致最后数组a的每个元素运行结果都是10。

如果使用leti变量的作用域范围只限于块作用域,即每次循环的代码块,如此一来,最后a[6]()可以返回期望值:6。修改如下:

代码语言:javascript
复制
var a = [];
for (let i =0; i <10; i++){
  a[i] = function(){
    console.log(i);
  }
}
a[6](); // 10
2.const

const用来声明常量,一旦定义,就不能修改。

这里需要注意,如果const声明的是对象,那么,变量名指向的是对象地址。所以,对象地址不允许修改,但是,对象的值,是可以修改的。

例如:

代码语言:javascript
复制
const foo = {a: 1};
foo.b = 3; // 正确
foo = {b: 6}; // throw error: "foo" is read-only
3.小结

块级作用域的出现,帮助解决了很多和变量作用域相关的问题!让我们好好享受这个新特性吧!

下一节:ECMAScript6基础学习教程(三)变量的解构赋值

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-05-13,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1.let
  • 2.const
  • 3.小结
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档