美文网首页Web前端之路让前端飞技术干货
ECMAScript6基础学习教程(二)块级作用域

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

作者: 娜姐聊前端 | 来源:发表于2017-04-13 20:54 被阅读105次

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

letconst命令可以构成一个块级作用域

1.let

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

// 在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类型,则该变量会绑定该区域,不受外界影响。例如:
var temp = 1;
if (true) {
    console.log(temp); //ReferenceError: 用let声明的temp变量会绑定该块作用域
    let temp = 2;
}
  1. 在同一个作用域内,不允许重复声明同一个变量。例如:
if (true) {
    let a = 1;
    let a = 2; //throw error: Duplicate declaration "a"
}

有了块级作用域,可以避免内层变量覆盖外层变量,可以让变量应用到更小范围内。
下面让我们看一道经典的闭包问题,思考如何用let解决?例题如下:

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。修改如下:

var a = [];
for (let i =0; i <10; i++){
  a[i] = function(){
    console.log(i);
  }
}
a[6](); // 10

2.const

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

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

例如:

const foo = {a: 1};
foo.b = 3; // 正确
foo = {b: 6}; // throw error: "foo" is read-only

3.小结

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

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

微信公众号:

相关文章

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

    ES6出现之前,只有函数可以形成作用域。而ES6中新增了块级作用域概念。 let和const命令可以构成一个块级作...

  • ES6新特性

    2015-02-04 JavaScript 一、作用域 块级作用域 块级变量let 块级常量const 二、箭头函...

  • js 作用域

    js 作用域主要有:全局作用域和局部作用域,es5之前没有块级作用域,es6有了块级作用域 何为块级作用域,块级作...

  • let、const和var的区别(个人笔记)

    1. 区别 (1)块级作用域块作用域由{ }包括,let和const具有块级作用域,var不存在块级作用域。块级作...

  • es6学习笔记

    《ECMAScript6 入门》阮一峰 读书笔记 let和constlet声明的变量仅在块级作用域内有效,var声...

  • let,var和const

    var没有块级作用域,只有方法作用域常见的块级作用域,if(){}。for(){}。

  • 第七章 块级作用域、私有变量

    模仿块级作用域 私有变量  js没有块级作用域,只有全局作用域和局部作用域(函数作用域),块级作用域是指某一部分代...

  • 你真的懂let和const吗?

    块级作用域 在ES6之前我们脑海里应该只存在全局作用域和函数级作用域,没有块级作用域。那么为什么要引入块级作用域呢...

  • js高级知识点(第五天)

    所用域 什么是作用域 变量起作用的范围 什么是块级作用域,使用代码块限定的作用域是块级作用域(let声明的变量是块...

  • 高频前端面试题汇总之JavaScript篇-ES6

    ES6-基础 1.let、const、var的区别 (1)块级作用域 块作用域由 { }包括,let和const具...

网友评论

    本文标题:ECMAScript6基础学习教程(二)块级作用域

    本文链接:https://www.haomeiwen.com/subject/gksvattx.html