博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
ES6笔记(2)-- let的块级作用域
阅读量:7090 次
发布时间:2019-06-28

本文共 1967 字,大约阅读时间需要 6 分钟。

系列文章 -- 

 

一、函数级作用域

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

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

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关键字,形成“块级的作用域”

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

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

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

if (1) {    let a = 10;    var b = 11;}console.log(a); // undefinedconsole.log(b); // 11

 

2. let 的一些特点

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

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

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

console.log(a2); // Uncaught ReferenceError: a2 is not definedconsole.log(b); // undefinedlet a2 = 10;var b = 11;

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

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

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

function bar(a = b, b = 2) {  return [a, b];}bar(); // Uncaught ReferenceError: b is not defined

4)let与window对象脱钩

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

var aa = 1;let bb = 1;console.log(window.aa);console.log(window.bb);

 

3. 函数的使用

1)匿名函数

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

(function() {    console.log(1); // 1})();

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

{    console.log(1); // 1}

 

4. const的常量声明

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

const MAX = 10;MAX = 11; // Uncaught TypeError: Assignment to constant variable.

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

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

const MAX; // Uncaught SyntaxError: Missing initializer in const declaration

2) const声明的引用类型

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

const obj = {    a: 10};obj.a = 11;obj.a  // 11

 

转载于:https://www.cnblogs.com/imwtr/p/5893140.html

你可能感兴趣的文章
张鹏 轻松学习网页设计 第03讲 html段落与标题文字!
查看>>
服务器节能
查看>>
iOS下用Socket编写服务器
查看>>
BizU数据宝CDP实时备份系统 ----自动、实时、快速、安全
查看>>
HTTP_幂等性_idempotence_PUT的幂等性
查看>>
简单几步,屏蔽视频广告 最新浏览器 能屏蔽弹窗和视频广告的浏览器
查看>>
Java基础学习总结(4)——对象转型
查看>>
Spring学习详解(1)——Spring入门详解
查看>>
常用 Cmd命令
查看>>
Java基础学习总结(10)——static关键字
查看>>
多年收集的一些稀有软件1
查看>>
Deduplication去重算法基础之可变长度数据分片
查看>>
MyBatis学习总结(5)——实现关联表查询
查看>>
Java基础学习总结(5)——多态
查看>>
Greenplum同步到Oracle脚本
查看>>
Tomcat 不同端口配置两个应用程序
查看>>
XMLDecoder反序列化漏洞
查看>>
【.net web】Response.Redirect 打开新窗口的两种方法
查看>>
多从库时半同步复制不工作的BUG分析
查看>>
在Meego上控制横竖屏
查看>>