前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >ES6笔记(2)-- let的块级作用域

ES6笔记(2)-- let的块级作用域

作者头像
书童小二
发布2018-09-03 19:16:29
3830
发布2018-09-03 19:16:29
举报
文章被收录于专栏:前端儿

系列文章 -- ES6笔记系列

一、函数级作用域

我们都知道,在ES6以前,JS只有函数级作用域,没有块级作用域这个概念

没有块级作用域,有利有弊,利于方便自由,弊于作用域内的变量容易被共享,例如这个例子

代码语言:javascript
复制
var a = [];

for (var i = 1; i <= 10; ++i) {
    a[i] = function() {
        return i;
    };
}

a[3]()  // 11

循环中变量i是处于全局作用域下的,其实这里是个闭包,函数内部的i与函数外的i形成了引用的关系,导致函数退出之后i未被销毁,引用的依然是全局的i

循环完成,此时i已经是11,调用之,则值皆为11

二、块级作用域

1. let的简单使用

这是没有块级作用域支持的经典例子,ES6则引入了这个特性,通过let关键字,形成“块级的作用域”

let和var类似,用来声明变量,那么,把上方中的var换成let

代码语言:javascript
复制
var a = [];

for (let i = 1; i <= 10; ++i) {
    a[i] = function() {
        return i;
    };
}

a[3]()  // 3

这是正确的结果,因为let使for循环变成了一个“块级作用域”,类似的还有if、while的“块级作用域”

代码语言:javascript
复制
if (1) {
    let a = 10;
    var b = 11;
}

console.log(a); // undefined
console.log(b); // 11

2. let 的一些特点

1)不能重复声明,var重复声明会被覆盖,但let重复声明会报错

代码语言:javascript
复制
var aa = 1;
var aa = 2;


let bb = 1;
let bb = 2; // Uncaught SyntaxError: Identifier 'bb' has already been declared

2)不存在变量提升,如下做法会报错

代码语言:javascript
复制
console.log(a2); // Uncaught ReferenceError: a2 is not defined
console.log(b); // undefined

let a2 = 10;
var b = 11;

3) 存在暂时性死区(temporal dead zone),只要块级作用域内存在let的声明,它所声明的变量就“绑定”(binding)这个区域,不再受外部的影响

代码语言:javascript
复制
var a3 = 3;

if (1) {
    a3 = 1; // Uncaught ReferenceError: a3 is not defined
    let a3;
}

此外,不单是显示的let才存在死区这种状态,在函数的默认参数之中也会发生,如下的b未声明则直接使用a = b会报错

代码语言:javascript
复制
function bar(a = b, b = 2) {
  return [a, b];
}

bar(); // Uncaught ReferenceError: b is not defined

4)let与window对象脱钩

一般来说,全局var声明的变量,会挂钩在window对象上,但let却不会这样,如

代码语言:javascript
复制
var aa = 1;
let bb = 1;

console.log(window.aa);
console.log(window.bb);

3. 函数的使用

1)匿名函数

没有块级作用域之前,为了整合代码,更好的分块不予外部代码混淆,我们常常使用匿名函数的自执行方式

代码语言:javascript
复制
(function() {
    console.log(1); // 1
})();

但或许现在不再需要了,直接使用一对(或多对)大括号,就有了块级的作用域

代码语言:javascript
复制
{
    console.log(1); // 1
}

4. const的常量声明

const声明了一个只读的常量,常量,即值不可更改。

代码语言:javascript
复制
const MAX = 10;
MAX = 11; // Uncaught TypeError: Assignment to constant variable.

const除了拥有let上述的特点之外,还有一些要注意的点

1)const一旦声明变量,就必须立即初始化,否则报错

代码语言:javascript
复制
const MAX; // Uncaught SyntaxError: Missing initializer in const declaration

2) const声明的引用类型

const声明的引用类型,只是引用类型的地址不能更改,但其指向的值是可以的,如

代码语言:javascript
复制
const obj = {
    a: 10
};

obj.a = 11;

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

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

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

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

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、函数级作用域
  • 二、块级作用域
    • 1. let的简单使用
      • 2. let 的一些特点
        • 3. 函数的使用
          • 4. const的常量声明
          领券
          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档