为什么要使用块级作用域

在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. c++的引用和c的指针之创建链表,二叉树的烦恼和区别

    /* **代码功能:创建一个令人头疼的不算头疼的链表,然后把特定的数据删除. *这次的主题不是在代码上,主要是关于创建链表时候的传参问题,嘿嘿,不相信你没遇到过 */#include "st ...

  2. 理解MVC入门基础原理

    今天,我将开启一个崭新的话题:ASP.NET MVC框架的探讨.首先,我们回顾一下ASP.NET Web Form技术与ASP.NET MVC的异同点,并展示各自在Web领域的优劣点.在讨论之前,我对 ...

  3. memcached复制-repcached

    1.前言 由于memcached把数据都放到内存里,因此性能是极高的,正因为如此,不可避免会造成数据丢失,repcached就派上用场了,它可以实现memcached的主从复制 2.安装repcach ...

  4. Unity灯光烘焙

    Unity3D烘焙技术 一.Light灯光场景烘焙1.理论理解:(1)烘焙背景:在一个场景中,由于灯光组件起到实时渲染的效果,并直接与计算机硬件GPU渲染器进行交互作用,因此对计算机显卡性能不良,以至 ...

  5. NGUI_01

    序言:这是张三疯第一次开始NGUI插件的学习,刚开始学习,肯定有很多漏洞,后期会及时的补上的.希望大家可以见谅,希望大佬多多指教. 扩充:为提供和我一样的小白找不到免费的NGUI插件,这里分享百度网盘 ...

  6. 【C#入门教案-02】用记事本编写第一个C#程序-Hello World

    02-用记事本编写第一个C#程序-Hello World 广东职业技术学院  欧浩源 [1]进行.NET程序开发的最基本环境配备 .NET Framework + 代码编辑工具(记事本或Noetpad ...

  7. javascript面向对象系列第四篇——OOP中的常见概念

    前面的话 面向对象描述了一种代码的组织结构形式——一种在软件中对真实世界中问题领域的建模方法.本文将从理论层面,介绍javascript面向对象程序程序(OOP)中一些常见的概念 对象 所谓对象,本质 ...

  8. 基于 HTML5 Canvas 的 3D 压力器反序列化

    在实际应用中,我觉得能够通过操作 JSON 文件来操作 3D 上的场景变化是非常方便的一件事,尤其是在做编辑器进行拖拽图元并且在图元上产生的一系列变化的时候,都能将数据很直观地反应给我们,这边我们简单 ...

  9. Oracle的导入导出 DMP 文件

    普通 导入: 将数据库完全导入,用户名userName 密码PassWord导入文件位置 E:\work\dmp\xxxxx.dmp (注意:导入的用户必须要跟导出时候的用户一致) imp userN ...

  10. LeetCode(24) Swap Nodes in Pairs

    题目 Given a linked list, swap every two adjacent nodes and return its head. For example, Given 1-> ...