ES6 块级作用域详解
什么是块级作用域
ES6
中新增了块级作用域。块作用域由 { }
包括,if
语句和 for
语句里面的 { }
也属于块作用域。
为什么需要块级作用域
第一种场景:内部变量会覆盖外部变量
var time = new Date()
function fx () {console.log(time) // undefinedif (false) {var time = 'hello'}
}
fx()
{var a = 1console.log(a) // 1
}
console.log(a) // 1
// 通过var定义的变量可以跨块作用域访问到。
第二种场景:用来计数的循环变量泄漏为全局变量
for
循环中的用 var
定义的变量在外部作用域可以访问
for (var i = 0; i < 3; i++) {}for (let j = 0; j < 3; j++) {}
// 3
console.log(i);
// Uncaught ReferenceError: j is not defined
console.log(j);
if
语句中 var
定义的变量在外部作用域可以访问
if(true)
与if (false)
的区别
if(true)
中的赋值语句会被执行,所以a
打印出来是3
if(false)
中的赋值语句不会被执行,但声明的变量var b
会由于变量提升,提升到作用域的顶层,所以打印出来是undefined
if (true) {var a = 3
}if (false) {var b = 3
}
// 3
console.log(a);
// undefined
console.log(b);if (true) {let c = 3
}
// Uncaught ReferenceError: c is not defined
console.log(c);
什么是块级作用域(ES6 提供 let & const 变量实现块级作用域)
function fxFn () { // 这是一个块级作用域let fx = 'fx is a great girl'if (true) { // 这是一个块级作用域let fx = 'fx is 18 years old'}console.log(fx) // fx is a great girl
}
fxFn()// 块级作用域之间相互不影响
ES6 允许块级作用域的任意嵌套。
{{{{{let fnn = 'Hello'}console.log(fnn); // 报错
}}}};
上面代码使用了一个五层的块级作用域,每一层都是一个单独的作用域。第四层作用域无法读取第五层作用域的内部变量。
- 内层作用域可以定义外层作用域的同名变量。
{{{{let fnn = 'Hello';{let fnn = 'Hello'}
}}}};
块级作用域的出现,实际上使得获得广泛应用的匿名立即执行函数表达式(匿名 IIFE
)不再必要了。
// IIFE 写法
(function () {var tmp = '...';// ...
}());// 块级作用域写法
{let tmp = '...';// ...
}
块级作用域与函数声明
ES5
规定,函数只能在顶层作用域和函数作用域之中声明,不能在块级作用域声明。
// 情况一
if (true) {function f() {}
}// 情况二
try {function f() {}
} catch(e) {// ...
}
上面两种函数声明,根据 ES5
的规定都是非法的。
但是,浏览器没有遵守这个规定,为了兼容以前的旧代码,还是支持在块级作用域之中声明函数,因此上面两种情况实际都能运行,不会报错。
ES6
引入了块级作用域,明确允许在块级作用域之中声明函数。ES6
规定,块级作用域之中,函数声明语句的行为类似于 let
,在块级作用域之外不可引用。
function f() { console.log('I am outside!'); }(function () {if (false) {// 重复声明一次函数ffunction f() { console.log('I am inside!'); }}f();
}());
上面代码在 ES5
中运行,会得到“I am inside!
”,因为在 if
内声明的函数 f
会被提升到函数头部,实际运行的代码如下。
// ES5 环境
function f() { console.log('I am outside!'); }(function () {function f() { console.log('I am inside!'); }if (false) {}f();
}());
ES6
就完全不一样了,理论上会得到“I am outside!
”。因为块级作用域内声明的函数类似于 let
,对作用域之外没有影响。
但是,如果你真的在 ES6
浏览器中运行一下上面的代码,是会报错的,这是为什么呢?
// 浏览器的 ES6 环境
function f() { console.log('I am outside!'); }(function () {if (false) {// 重复声明一次函数ffunction f() { console.log('I am inside!'); }}f();
}());
// Uncaught TypeError: f is not a function
上面的代码在 ES6
浏览器中,都会报错。
原来,如果改变了块级作用域内声明的函数的处理规则,显然会对老代码产生很大影响。为了减轻因此产生的不兼容问题,ES6 规定,浏览器的实现可以不遵守上面的规定,有自己的行为方式
- 允许在块级作用域内声明函数。
- 函数声明类似于
var
,即会提升到全局作用域或函数作用域的头部。 - 同时,函数声明还会提升到所在的块级作用域的头部。
注意,上面三条规则只对 ES6
的浏览器实现有效,其他环境的实现不用遵守,还是将块级作用域的函数声明当作 let
处理。
根据这三条规则,浏览器的 ES6
环境中,块级作用域内声明的函数,行为类似于 var
声明的变量。上面的例子实际运行的代码如下。
// 浏览器的 ES6 环境
function f() { console.log('I am outside!'); }
(function () {var f = undefined;if (false) {function f() { console.log('I am inside!'); }}f();
}());
// Uncaught TypeError: f is not a function
考虑到环境导致的行为差异太大,应该避免在块级作用域内声明函数。如果确实需要,也应该写成函数表达式,而不是函数声明语句。
// 块级作用域内部的函数声明语句,建议不要使用
{let a = 'secret';function f() {return a;}
}// 块级作用域内部,优先使用函数表达式
{let a = 'secret';let f = function () {return a;};
}
ES6 的块级作用域必须有大括号
如果没有大括号,JavaScript
引擎就认为不存在块级作用域。
// 第一种写法,报错
if (true) let x = 1;// 第二种写法,不报错
if (true) {let x = 1;
}
上面代码中,第一种写法没有大括号,所以不存在块级作用域,而let只能出现在当前作用域的顶层,所以报错。第二种写法有大括号,所以块级作用域成立。
函数声明也是如此,严格模式下,函数只能声明在当前作用域的顶层。
// 不报错
'use strict';
if (true) {function f() {}
}// 报错
'use strict';
if (true)function f() {}
ES6 块级作用域详解相关推荐
- Html块级元素详解
Html块级元素详解 *块级元素 常见的有:div , table, tr , from , ul ,li ,ol ,h1~h6, p 盒子 div 标签 <div class="bq ...
- html中的行内标签吗,HTML标签中行内元素和块级元素详解
本文主要和大家详细介绍了HTML常用的标签中行内元素和块级元素,需要的朋友参考下吧,希望能帮助到大家. 块元素(block element) HTML标签分类明细 * address - 地址 * b ...
- html块级标签转换,html标签中的块级元素详解
今天,我们就讲解一下html标签中的块级元素,主要包括块级元素的概念.作用.特点,还有就是块级元素有哪些标签等内容. 块级元素概念 块级元素是一类css样式display默认值为block的html标 ...
- ES6基础2(块级作用域、数组对象解构)-学习笔记
文章目录 ES6基础2(块级作用域.数组对象解构)-学习笔记 块级作用域 数组解构 对象解构 字符串解构 函数的参数解构 ES6基础2(块级作用域.数组对象解构)-学习笔记 块级作用域 //let c ...
- ES6(一)——字面量的增强、解构、let/const、块级作用域、暂时性死区
一.字面量的增强 ES6中对 对象字面量 进行了增强,称之为 Enhanced object literals(增强对象字面量). 字面量的增强主要包括下面几部分: 属性的简写:Property Sh ...
- 详解var、let、const关键词声明变量的区别,以及变量提升、块级作用域的认识等。
首先回顾一下JavaScript中var声明变量的基础知识: • 在使用var关键词声明变量时,变量在函数外则是全局变量,有全局作用域,全局变量在页面关闭后销毁:变量在函数内则是局部变量,作用局部作用 ...
- js 将内部函数变成全局函数_js中三种作用域详解(全局,函数,块级)
1.全局变量:声明在函数外部的变量(所有没有var直接赋值的变量都属于全局变量) 2.局部变量:声明在函数内部的变量(所有没有var直接赋值的变量都属于全局变量) JS中变量申明分显式申明和隐式申明. ...
- c语言块级作用域_块级作用域问题ES5 ES6
ES5: 1. 没有块级作用域 在其他类C语言中,由花括号封闭的代码块都有自己的作用域(如果用ECMAScript的话来说,就是它们自己的执行环境), 所以支持根据条件来定义变量. if(true) ...
- es6 ie不兼容 函数_ES6:什么是块级作用域?
在 ES5 只有全局作用域和函数作用域,没有块级作用域,这带来很多不合理的场景. 我们先来看一下下面这种情况:内层变量可能会覆盖外层变量. var txt = '外层变量-->你好呀';func ...
最新文章
- iOS应用:成功就像中彩票,大半开发者亏本
- SPA单页应用前后分离微信授权
- WaitForSingleObject的用法详细介绍
- Redis缓存 ava-Jedis操作Redis,基本操作以及 实现对象保存
- 极具潜力的新兴职业!
- Python爬虫入门教程 14-100 All IT eBooks多线程爬取
- 七种常用特征工程技术
- qt如何捕获应用程序输出_企业应用程序中需要捕获的5大Java性能指标
- JS-原型-原型链-值和引用类型
- python安装成功的图标_安装Python
- carbondata 1.1.0安装文档
- puppet成长日记二 Package资源详细介绍及案例分析
- 百度 UEditor--自定义上传文件路径及读取文件
- P2900 [USACO08MAR]土地征用Land Acquisition
- poj 1113 graham模板(水平序)
- sqlserver数据库同步解决方案
- MySQL基础——多表查询
- 台式计算机没有声音图标,台式电脑没声音,小扬声器图标也没有。
- 一篇运维老司机的大数据平台监控宝典(1)-联通大数据集群平台监控体系进程详解
- 光电池和光电二极管的区别
热门文章
- Linux 环境-TiDB组件进程维度的监控实现
- Windows 7开机原理
- paddlehub如何查看其版本号
- 利用深度学习框架实现点云配准(以PointNetLK项目为例)
- 简单说一下 T, Jass,和 vJass
- 游戏的服务器端文件夹,游戏服务器linux那个文件夹
- 升级打包工具packer-ng-plugin支持V3签名
- navicat mysql表导入_Navicat for MySQL导入数据表的操作方法
- xxe-xml外部实体注入
- python中iloc切片_如何使用iloc和loc 对Pandas Dataframe进行索引和切片