深入理解javascript作用域系列第四篇——块作用域
2016-07-26 13:45
627 查看
[1]let[2]const[3]try
上面这段是很熟悉的循环代码,通常是因为只想在for循环内部的上下文中使用变量i,但实际上i可以在全局作用域中访问,污染了整个作用域
ES6改变了现状,引入了新的let关键字,提供了除var以外的另一种变量声明方式。let关键字可以将变量绑定到所在的任意作用域中(通常是{...}内部),实现块作用域
块级作用域实际上可以替代立即执行匿名函数(IIFE)
如果将文章最开始那段for循环的代码中变量i用let声明,将会避免作用域污染问题
for循环头部的let不仅将i绑定到了for循环的块中,事实上它将其重新绑定到了循环的每一个迭代中,确保使用上一个循环迭代结束时的值重新进行赋值
循环
下面代码中,由于闭包只能取得包含函数中的任何变量的最后一个值,所以控制台输出5,而不是0
当然,可以通过函数传参,来保存每次循环的值
而使用let则更方便,由于let循环有一个重新赋值的过程,相当于保存了每一次循环时的值
重复声明
let不允许在相同作用域内,重复声明同一个变量
提升
使用let进行的声明不会在块作用域中进行提升
const声明的常量,也与let一样不可重复声明
在ES6之前的环境中,可以使用try-catch语句达到上面代码的类似效果
前面的话
尽管函数作用域是最常见的作用域单元,也是现行大多数javascript最普遍的设计方法,但其他类型的作用域单元也是存在的,并且通过使用其他类型的作用域单元甚至可以实现维护起来更加优秀、简洁的代码,比如块作用域。随着ES6的推广,块作用域也将用得越来越广泛。本文是深入理解javascript作用域系列第四篇——块作用域let
for (var i= 0; i<10; i++) { console.log(i); }
上面这段是很熟悉的循环代码,通常是因为只想在for循环内部的上下文中使用变量i,但实际上i可以在全局作用域中访问,污染了整个作用域
for (var i= 0; i<10; i++) { console.log(i); }
console.log(i);//10
ES6改变了现状,引入了新的let关键字,提供了除var以外的另一种变量声明方式。let关键字可以将变量绑定到所在的任意作用域中(通常是{...}内部),实现块作用域
{ let i = 1; }; console.log(i);//ReferenceError: i is not defined
块级作用域实际上可以替代立即执行匿名函数(IIFE)
(function(){ var i = 1; })(); console.log(i);//ReferenceError: i is not defined
如果将文章最开始那段for循环的代码中变量i用let声明,将会避免作用域污染问题
for (let i= 0; i<10; i++) { console.log(i); } console.log(i);////ReferenceError: i is not defined
for循环头部的let不仅将i绑定到了for循环的块中,事实上它将其重新绑定到了循环的每一个迭代中,确保使用上一个循环迭代结束时的值重新进行赋值
//与上一段代码等价 { let j; for (j=0; j<10; j++) { let i = j; //每个迭代重新绑定 console.log( i ); } }
循环
下面代码中,由于闭包只能取得包含函数中的任何变量的最后一个值,所以控制台输出5,而不是0
var a = []; for(var i = 0; i < 5; i++){ a[i] = function(){ return i; } } console.log(a[0]());//5
当然,可以通过函数传参,来保存每次循环的值
var a = []; for(var i = 0; i < 5; i++){ a[i] = (function(j){ return function(){ return j; } })(i); } console.log(a[0]());//0
而使用let则更方便,由于let循环有一个重新赋值的过程,相当于保存了每一次循环时的值
var a = []; for(let i = 0; i < 5; i++){ a[i] = function(){ return i; } } console.log(a[0]());//0
重复声明
let不允许在相同作用域内,重复声明同一个变量
{ let a = 10; var a = 1;//SyntaxError: Unexpected identifier }
{ let a = 10; let a = 1;//SyntaxError: Unexpected identifier }
提升
使用let进行的声明不会在块作用域中进行提升
{ console.log(i);//ReferenceError: i is not defined let i = 1; };
const
除了let以外,ES6还引入了const,同样可以用来创建块作用域变量,但其值是固定的(常量)。之后任何试图修改值的操作都会引起错误if (true) { var a = 2; const b = 3; a = 3; b = 4;// TypeError: Assignment to constant variable } console.log( a ); // 3 console.log( b ); // ReferenceError: b is not defined
const声明的常量,也与let一样不可重复声明
const message = "Goodbye!"; const message = "Goodbye!";//SyntaxError: Identifier 'message' has already been declared
try
try-catch语句的一个常见用途是创建块级作用域,其中声明的变量仅仅在catch内部有效{ let a = 2; console.log(a); // 2 } console.log(a); //ReferenceError: a is not defined
在ES6之前的环境中,可以使用try-catch语句达到上面代码的类似效果
try{ throw 2; }catch(a){ console.log( a ); // 2 } console.log( a ); //ReferenceError: a is not defined
//或者 try{ throw undefined; }catch(a){ a = 2; console.log( a ); // 2 } console.log( a ); //ReferenceError: a is not defined
相关文章推荐
- html5--javascript的一系列操作(事件、正则表达式的验证)
- javascript知识点
- 倒计时60秒(js)
- [php学习十]javaScript的基本练习
- JavaScript编码规范
- JavaScript 在函数中使用Ajax获取的值作为函数的返回值
- pjsip的语音检测
- jvm监测、调优
- 【数据可视化】可放缩可拖拽画布的力导向图
- response响应给客户端(json、xml格式)
- javascript中的数据类型及null、NaN、undefined的区别
- 事件处理程序
- JavaScript获取浏览器信息的方法
- Ext js 应用例子
- pjsua播放rtp音频包问题
- JavaScript基础02
- javascript 设计模式-单例模式
- JavaScript基础01
- javascript:有一种类型 -------既不是数据也不是对象!
- eclipse复制粘贴js代码卡死的问题