ES6里关于作用域的拓展:块级作用域
过去,javascript缺乏块级作用域,var声明时的声明提升、属性变量等行为让人困惑。ES6的新语法可以帮助我们更好地控制作用域。
一、var声明
1、变量提升:var
声明会发生“变量提升”现象,即变量可以在声明之前使用,值为undefined
function getValue(condition){
if(condition){
var value = 'blue';
return value;
}else{
//此处可访问变量value,值为undefined
return null;
}
//此处可访问变量value,值为undefined
}
如果没有javascript开发经验,可能会认为只有condition为true时,才会创建变量value
但实际上,在预编译阶段,javascript引擎会将上面的函数修改成下面这样
function getValue(condition){
var value;
if(condition){
value = 'blue';
return value;
}else{
return null;
}
}
变量value的声明被提升到函数顶部,而初始化操作依然留在原处。如果不注意,很可能引起错误。为些,ES6引入了块级作用域来强化对变量生命周期的控制
2、块级声明
块级声明用于声明在指定块的作用域之外无法访问的变量,它存在于
(1)函数内部
(2){}之间的块区域内
二、let声明
let声明的用法与var声明相同。用let代替var来声明变量,就可以把变量的作用域限制在当前代码块中
function getValue(condition){
if(condition){
let value = 'blue';
return value;
}else{
//变量value在此处不存在
return null;
}
//变量value在此处不存在
}
变量value改由关键字let进行声明后,不再被提升到函数顶部。执行流离开if块时,value立刻被销毁。如果condition的值为false,就永远不会声明并初始化value
1、禁止重声明
假设作用域中已经存在某个标识符,此时再使用let关键字声明它就会抛出错误
var count = ;
//抛出语法错误
//Uncaught SyntaxError: Identifier 'count' has already been declared
let count = ;
三、const声明
使用const声明的是常量,其值一旦被设定后不可更改。因此,每个通过const声明的常量必须进行初始化
const num = ;
//抛出语法错误
//Uncaught SyntaxError: Missing initializer in const declaration
const name;
const与let声明均是块级标识符,所以常量也只在当前代码块中有效,一旦执行到块外会立即被销毁。常量同样也不会被提升到作用域顶部
1、禁止重声明
与let类似,在同一作用域内用const声明已经存在的标识符也会导致语法错误,无论该标识符是使用var,还是let声明的
var message = 'hello';
let num = ; //这两条语句都会抛出错误
const message = "goobye";
const num = ;
2、无法再赋值
const与let声明最大的不同之处在于,const声明的常量无法再赋值
let num1 = ;
num1= ; const num2 = ;
//Uncaught TypeError: Assignment to constant variable.
num2 = ;
3、可修改对象属性
const声明不允许修改绑定,但允许修改值。这也就意味着用const声明对象后,可以修改该对象的属性值
const person = {
name: 'huochai'
};
//可以修改对象属性的值
person.name = 'match';
//Object {name: "match"}
console.log(person); //抛出语法错误
//Uncaught TypeError: Assignment to constant variable.
person = {
name: 'match'
}
四、临时死区
与var不同,let和const声明的变量不会被提升到作用域顶部,如果在声明之前访问这些变量,会引发错误。而从作用域顶部到声明变量语句之前的这个区域,被称为临时死区(temporal dead zone),简称为TDZ
if(true){
//undefined
console.log(typeof value);
var value = "blue";
} if(true){
//Uncaught ReferenceError: value is not defined
console.log(typeof value);
let value = "blue";
}
但是,在let或const声明的作用域之外使用该变量就不会报错
//undefined
console.log(typeof value);
if(true){
let value = "blue";
}
五、循环绑定
1、var声明
长久以来,var声明使得在循环中创建函数异常困难,因为变量到了循环之外仍能访问
var funcs = [];
for(var i = ; i < ; i++){
funcs.push(function(){
//输出10次10
console.log(i);
});
}
funcs.forEach(function(func){
func();
})
上面代码中,预期的结果是输出数字0-9,但它却一连串输出了10次10,这是因为循环里的每次迭代同时共享着变量i,循环内部创建的函数全都保留了对相同变量的引用,循环结束时变量i的值为10,所以每次调用console.log(i)时就会输出10
2、IIFE
为解决这个问题,可以在循环中使用立即调用函数表达式(IIFE),以强制生成计数器变量的副本
var funcs = [];
for(var i = ; i < ; i++){
funcs.push((function(value){
return function(){
//0
//1
//...
//
console.log(value);
}
})(i));
}
funcs.forEach(function(func){
func();
})
在循环内部,IIFE表达式为接受的每一个变量i都创建了一个副本并存储为变量value,这个变量的值就是相应迭代创建的函数所使用的值,因此调用每个函数都会像从0-9循环一样得到期望的值
3、let
let声明模仿上例中IIFE所做的一切来简化循环过程。每次迭代循环都会创建一个新变量,并以之前迭代中同名变量的值将其初始化
var funcs = [];
for(let i = ; i < ; i++){
funcs.push(function(){
//0
//1
//...
//
console.log(i);
});
}
funcs.forEach(function(func){
func();
})
以上这段循环相比之下更为简洁,每次循环时let声明都会创建一个新变量i,并将其初始化为i的当前值,所以循环内部创建的每个函数都能得到属性它们自己的i的副本
对于for-in循环和for-of循环来说也是一样的
var funcs = [];
obj = {
a:true,
b:true,
c:true
}
for(let key in obj){
funcs.push(function(){
//a
//b
//c
console.log(key);
})
}
funcs.forEach(function(func){
func();
})
4、const
对于const声明来说,由于其无法改变变量的值,所以无法使用普通的for循环
var funcs = [];
for(const i = ; i < ; i++){
funcs.push(function(){
//Uncaught TypeError: Assignment to constant variable.
console.log(i);
});
}
funcs.forEach(function(func){
func();
})
由于for-in循环中每次迭代不会修改已有绑定,而是创建一个新绑定,所以在for-in循环中可以使用const
var funcs = [];
obj = {
a:true,
b:true,
c:true
}
for(const key in obj){
funcs.push(function(){
//a
//b
//c
console.log(key);
})
}
funcs.forEach(function(func){
func();
})
六、属性变量
对var声明的变量来说,如果处于全局作用域,它们会自动成为window对象的属性。这意味着用var很可能无意中覆盖一个已经存在的全局变量
//function RegExp() { [native code] }
console.log(RegExp);
var RegExp = "hello";
console.log(RegExp);//'hello'
console.log(window.RegExp);//'hello'
如果使用let或const声明的变量,不会成为window对象的属性
let RegExp = "hello";
console.log(RegExp);//'hello'
console.log(window.RegExp);//function RegExp() { [native code] }
因此,如果希望在window对象下定义变量,要使用var声明。如果不希望,则使得let或const
最佳实践:默认使用const,只有确实需要改变变量的值时使用let。因为大部分变量的值在初始化后不应再改变,而预料外的变量值的改变是很多bug的源头
ES6里关于作用域的拓展:块级作用域的更多相关文章
- ES6系列之let/const及块级作用域
本系列是在平时阅读.学习.实际项目中有关于es6中的新特性.用发的简单总结,目的是记录以备日后温习:本系列预计包含let/const.箭头函数.解构.常用新增方法.Symbol.Set&Map ...
- ES6标准入门 第二章:块级作用域 以及 let和const命令
一.块级作用域 1.为什么需要块级作用域? ES5中只有全局作用域和函数作用域,带来很多不合理的场景. (1)内层变量可能会覆盖外层变量: var tem = new Date(); function ...
- ES6 浅谈let与const 块级作用域之封闭空间(闭包)
ES6新增了 let const 命令,用来声明变量.它的用法类似于 var ,但是所声明的变量,只在 let const 命令所在的代码块内有效. var const 不允许重复声明 用处: 可 ...
- ES6学习笔记(1)- 块级作用域
1. var声明变量和变量提升(Hoisting)机制的问题 在JS中通过var关键字声明的变量,无论在函数作用域中亦或是全局作用域中,都会被当成当前作用域顶部的变量,和就是所谓的提升机制(Hoist ...
- JavaScript 执行环境(执行上下文) 变量对象 作用域链 上下文 块级作用域 私有变量和特权方法
总结自<高程三>第四章 理解Javascript_12_执行模型浅析 JS的执行环境与作用域 javascript高级程序第三版学习笔记[执行环境.作用域] 在javascript ...
- js私有作用域(function(){})(); 模仿块级作用域
摘自:http://outofmemory.cn/wr/?u=http%3A%2F%2Fwww.phpvar.com%2Farchives%2F3033.html js没有块级作用域,简单的例子: f ...
- 开始学习es6(二) let 与 const 及 块级作用域
1.var JavaScript中,我们通常说的作用域是函数作用域,使用var声明的变量,无论是在代码的哪个地方声明的,都会提升到当前作用域的最顶部,这种行为叫做变量提升(Hoisting) cons ...
- ES6块级作用域
块级作用域的优点 避免变量冲突,比如程序中加载了多个第三方库的时候,如果没有妥善地将内部私有函数或变量隐藏起来,就很容易引发变量冲突: 可以方便的进行模块管理: 利于内存回收:(块级作用域里声明的变量 ...
- ES6之块级作用域
一.前言 在ECMAScript6(以下简称ES6)之前,ECMAScript的作用域只有两种: 1. 全局作用域: 2. 函数作用域. 正是因为有这两种作用域,所以在JavaScript中出现一 ...
- ES6 - Note1:块级作用域与常量
在ES6以前,ES不支持块级作用域,只有全局作用域和函数作用域,所有变量的声明都存在变量声明提升. 1.let 关键字 声明一个块级变量,只在一个代码块中有效,如果在块外面访问便会报错,如下所示: { ...
随机推荐
- hdu 1534 Schedule Problem (差分约束)
Schedule Problem Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) ...
- GYM - 101147 B.Street
题意: 大矩形代表市场,大矩形当中有很多小矩形样式的伞.这些小矩形都贴着大矩形的左边或者右边且互不相交.小矩形以外的地方都是阳光.求经过大矩形时在阳光下的最短时间. 题解: 最短路的做法.起点和终点与 ...
- 【转】百度统计js被劫持用来DDOS Github
原文链接:http://drops.wooyun.org/papers/5398 今天中午刷着全国最大的信息安全从业人员同性交友社区zone.wooyun.org的时候,忽然浏览器每隔2秒就不断的弹窗 ...
- BZOJ3143 [Hnoi2013]游走 【高斯消元】
题目 一个无向连通图,顶点从1编号到N,边从1编号到M. 小Z在该图上进行随机游走,初始时小Z在1号顶点,每一步小Z以相等的概率随机选 择当前顶点的某条边,沿着这条边走到下一个顶点,获得等于这条边的编 ...
- swiper使用案例一
// 初始化函数 var mySwiper_a = new Swiper('.se3 .left', { direction: 'vertical', loop: true, autoplay: 50 ...
- [解决方案]IIS7.5 报错:无法启动计算机“."上的服务W3SVC
报错场景: 在云服务器上,正常使用着,突然今天一打开网站就都用不了了,上去服务器一看,IIS中站点被停止了,我还怀疑是回收的问题,结果一直启动无果,我打算重启来解决这个问题,重启后发现所有站点都变成停 ...
- 学习Git的一点心得以及如何把本地修改、删除的代码上传到github中
一:学习Github的资料如下:https://git.oschina.net/progit/ 这是一个学习Git的中文网站,如果诸位能够静下心来阅读,不要求阅读太多,只需要阅读前三章,就可以掌握Gi ...
- 行为型设计模式之解释器模式(Interpreter)
结构 意图 给定一个语言,定义它的文法的一种表示,并定义一个解释器,这个解释器使用该表示来解释语言中的句子. 适用性 当有一个语言需要解释执行, 并且你可将该语言中的句子表示为一个抽象语法树时,可使用 ...
- OS X升级到10.10之后使用pod出现问题的解决方法
http://blog.csdn.net/dqjyong/article/details/37958067 OS X升级到10.10之后使用pod出现问题的解决方法 分类: IOS2014-07-1 ...
- linux进程地址空间--vma的基本操作【转】
转自:http://blog.csdn.net/vanbreaker/article/details/7855007 版权声明:本文为博主原创文章,未经博主允许不得转载. 在32位的系统上,线性地址空 ...