为什么要使用块级作用域

在ES5中只有全局作用域和函数作用域,没有块级作用域,因此带来了这些麻烦

  1. 内层变量可能会覆盖外层变量
	    var tmp = new Date();
console.log(tmp);//Thu Jan 12 2017 15:47:08 GMT+0800 (中国标准时间)
function f() {
console.log(tmp);//undefined
if (false) {
var tmp = "hello world";
console.log(tmp);
}
else {
tmp = "ff";
console.log(tmp);//ff
}
}
f();
//结果:Thu Jan 12 2017 15:47:08 GMT+0800
//undefined
//ff

上面代码中,输出undefined是因为变量提升导致了内部的tmp变量覆盖了外层的tmp变量。

2. 用来计数的循环变量泄露为全局变量

	    var s = 'hello';
for(var i = 0;i<s.length;i++) {
console.log(s[i]);
}
console.log(i);//5

上面代码中,变量i只用来控制循环。但是循环结束后,它并没有消失,而是泄露成成了全局变量

ES6的块级作用域

  1. let实际上为js新增的块级作用域
	    function f1() {
let n = 5;
if(true) {
let n = 10;
}
console.log(n);
}
f1();//5

结果输出5,代表外层代码块不受内层代码块的影响

2. ES6允许块级作用域任意嵌套

  1. 外层作用域无法读取内层作用域的变量
        function f1() {
{{
let a = 10;
}
console.log(a);//报错
}
}
f1();
  1. 内层作用域可以定义外层作用域的同名变量
  2. 块级作用域的出现,实际上使得广泛应用的立即执行匿名函数(IIFE)不再必要了。
(function() {
var tmp = ...;
...
}());
//块级作用域写法
{
let tmp = ...;
...
}
  1. ES6规定,函数本身的作用域在其所在的块级作用域之内。
function f1() {console.log('I am out');}
(function () {
if(false) {
//重复声明一次函数f
function f() {
console.log('I am in');
}
f();
}
}())

上面的代码在es5中运行会得到“I am in”,但在ES6中会得到“I am out”.这是因为ES5存在变量提升,不管会不会进入到if代码块,函数都会提升到当前作用域的顶部而得到执行;而ES6支持块级作用域,不管会不会进入if代码块,其内部声明的函数都不会影响到作用域的外部。

{
let a = 's';
function f() {
return a;
}
}
f();//报错

上面代码中,块级作用域外部无法调用块级作用域内部定义的函数。如果确实需要调用,可以用下面方法


let f;
{
let a = 's';
f = function () {
return a;
}
}
f()//'s'

需要注意的是,如果在严格模式下,函数只能在顶层作用域和函数内声明,其他情况(比如if代码块,循环代码块)中调用都会出错。

ES6 let和const命令(2)的更多相关文章

  1. ES6 let和const命令(3)

    const 用来声明常量.一旦声明,就不能改变. const在声明必须初始化,只声明不赋值会出错 const的作用域与let一样,只在声明的块级作用域有效. const命令声明的常量也不提升,同样存在 ...

  2. es6 let和const命令(1)

    基本用法 ES新增了let命令,用于声明变量.其用法类似于var,但是所声明的变量只在let命令所在的代码块中有效. for(let i = 0;i<5;i++) {} console.log( ...

  3. ES6之新增const命令使用方法

    hi,我又回来了,今天学习一下const命令. 声明一个常量 const声明一个只读常量,一旦声明,常量的值便不可改变. 例子如下: const food = 12; food = 23; // Un ...

  4. ES6 let和const命令(4)

    const声明的常量只在当前代码块有效.如果想设置跨模块的常量,可以采用下面的写法. //constants.js模块 export const A = 1; export const B = 3; ...

  5. ES6中的const命令【转】

    1.const声明一个只读常量,一旦声明,常量的值就不能改变 1 const PI=3.1415; 2 console.log(PI);//3.1415 3 4 PI=3;//Uncaught Typ ...

  6. ES6中的const命令

      1.const声明一个只读常量,一旦声明,常量的值就不能改变 1 const PI=3.1415; 2 console.log(PI);//3.1415 3 4 PI=3;//Uncaught T ...

  7. ES6 let和const命令

    一.let定义变量 { let a = 1;} console.log(a);只在let所在的代码块有效,console的结果是a is not defined,报错. 不存在var的变量提升,即使用 ...

  8. es6学习笔记(1) let和const命令详解

    let和const命令: Es6新增了let命令,声明变量,但与var不一样的,只在let命令所在的代码块内有效(如for循环之外let声明的变量就不再有效).并且let不像var那样会发生" ...

  9. ES6之let(理解闭包)和const命令

    ES6之let(理解闭包)和const命令 最近做项目的过程中,使用到了ES6,因为之前很少接触,所以使用起来还不够熟悉.因此购买了阮一峰老师的ES6标准入门,在此感谢阮一峰老师的著作. 我们知道,E ...

随机推荐

  1. OC语言的面向对象—类和对象、方法

    1. 面向对象和面向过程思想 OC是面向对象的,C是面向过程的.面向对象和面向过程只是解决问题的两种不同思想 1. 面向对象和面向过程的区别 1) 以用电脑听歌为例子 a) 面向过程 ➢ 打开电脑 ➢ ...

  2. 【微软大法好】VS Tools for AI全攻略(3)

    接着上文,现在我们需要一种穷人的方法来搭建好Azure虚拟机. 思路很简单,因为AI组件的原理其实是传送了script文件和命令上去,那么我们这个虚拟机只要做好了所有的配置,那么我们就可以将它当作深度 ...

  3. Django框架的安装

    下载Django框架 创建一个django项目 在E盘Mysite文件夹下创建了一个django项目叫mysite 当前文件夹下会产生一个mysite的文件夹,目录结构如下: manage.py -- ...

  4. codeforces #446 892A Greed 892B Wrath 892C Pride 891B Gluttony

    A  链接:http://codeforces.com/problemset/problem/892/A 签到 #include <iostream> #include <algor ...

  5. 认知服务调用如何使用图片的DataURL

    说明: Data URL给了我们一种很巧妙的将图片"嵌入"到HTML中的方法.跟传统的用img标记将服务器上的图片引用到页面中的方式不一样,在Data URL协议中,图片被转换成b ...

  6. day7、用户登陆出现-bash-4.1$错误的原因

    有时候在使用用户登陆Linux系统时会出现-bash-4.1$错误,不显示用户名,路径信息. 原因:用户家目录里面与环境变量有关的文件被删除所导致的 .bash_profile .bashrc 这两个 ...

  7. python入门基础

    Python 入门 变量 什么是变量?变量就是变化的量,核心是"变"和"量"两个字,变就是变化,量就是衡量状态. 为什么需要变量?程序执行的本质就是一系列状态的 ...

  8. 在websphere上部署集群应用程序-工作记录

    1) 创建web集群.client集群,添加集群托管节点,根据需求来,我的需求是两个应用部署到4个服务器上,属于1主3备模式 2) 创建webspere变量:选择你需要的集群作用域,新建资源   (作 ...

  9. Java 模拟栈结构

    栈和队列: 通常是作为程序猿的工具,用于辅助构思算法.生命周期较短,执行时才被创建 訪问受限.在特定时刻,仅仅有一个数据可被读取或删除 是一种抽象的结构.内部的实现机制.对用户不可见.比方用数组.链表 ...

  10. Android长按事件和点击事件问题处理,OnItemLongClickListener和OnItemClickListener冲突问题

    今天在做demo时,须要设置ListView的item的长按和点击事件.OnItemLongClickListener和OnItemClickListener,然而点击事件能够实现,可是在长按操作时会 ...