乐趣区

关于javascript:let和const

jiezi

ES6 新增 let 和 const 命令，用来申明变量，用法相似于 var，但与 var 也有所区别。

  1. let 不存在变量晋升
  2. 块级作用域内存在 let 命令会造成暂时性死区
  3. let 在同一作用域内不容许反复申明
  4. const 和 let 相似，但 const 用来申明常量

一、变量晋升

ES6 之前，js 并不存在块级作用域，js 作用域只有两种模式：全局作用域和函数作用域

变量的晋升行将变量的申明晋升到它所在作用域的最开始的中央（仅晋升变量的申明而不晋升变量的赋值），在 js 中 var 申明的变量会造成变量的晋升。

    console.log(a,1);
    var a = 10;
    console.log(a,2);
    
    输入后果：undefined 1
    10 2

上述代码中，先打印变量 a，而后进行变量 a 的申明和赋值，最初再次打印变量 a，其打印后果顺次为 undefined、10。
看似变量 a 在为申明之间进行了应用，其实它是进行了变量的晋升，它的理论执行程序如下：

    var a;  // 申明变量
    console.log(a,1);  // 打印未初始化变量 a，后果为 undefined
    a = 10;  // 为变量 a 赋值
    console.log(a,2);  // 打印赋值为 10 的变量 a

var 命令造成的“变量晋升”景象使得变量能够在申明之前应用，但这并不合乎失常的编码逻辑，且容易造成 变量笼罩 和全局变量净化 景象。

1. 变量笼罩

    var a = 'first';
    function f(){console.log(a,1);
        if(0){var a = 'second'}
    }
    f();  // undefined 1

这段代码第一眼会误以为输入为“first 1”，是因为在函数作用域中有同名变量通过 var 申明时，在函数作用域内变量进行了晋升（代码预编译时即实现了变量晋升，故与逻辑判断是否进入无关），其理论执行程序如下：

    var a;
    a = 'first';
    function f(){
        var a;
        console.log(a,1);
        if(0){a = 'second'}
    };
    f();  // undefined 1

代码本意为 f()内应用内部 a 的值，当 if 为真时使变量 a 的值扭转，但因变量笼罩导致 f()内 a 的值被笼罩为 undefined，故 var 申明容易造成变量笼罩景象

2. 全局变量净化

    var a = 'hello world!';
    
    for (var i = 0; i < a.length; i++) {console.log(a[i]); // h e l l o w o r l d !
    }
    
    console.log(i); // 12

由上述代码不难看出，于 for 循环内以 var 申明的计数变量 i 外部应用完后依然存在，并透露为全局变量，造成了全局变量净化。

二、let 与块级作用域

ES6 中明确规定，如果一个区块中存在 let 和 const 命令，这个区块对这些申明的变量，从一开始就造成了关闭作用域，该作用域就被称之为块级作用域

ES5 中只有全局作用域和函数作用域，这会造成上述所说的变量笼罩和全局变量净化，为了解决变量晋升的问题，ES6 提出 let 和 const 命令，其不存在变量晋升景象，故只能先申明后应用，同时在 let 和 const 命令所存在的区块会造成暂时性死区。该变量不再受内部的影响，此区块的作用域称之为块级作用域。

1.let

let 和 var 用法相似，然而 let 并不会进行变量的晋升，所申明的变量 仅在 let 命令所在的代码块失效。

    {
      let a = 10;
      var b = 1;
    }

    a // ReferenceError: a is not defined.
    b // 1

let 申明变量不会进行变量晋升，须要先申明后应用，否则报错。

    console.log(a,1);// Uncaught ReferenceError: a is not defined
    let a = 10;
    console.log(a,2);

在 雷同作用域内，不容许应用 let 反复申明同一个变量

    // Identifier 'a' has already been declared
    function func() {
      let a = 10;
      var a = 1;
    }

    // Identifier 'a' has already been declared
    function func() {
      let a = 10;
      let a = 1;
    }

故此，若函数携带内部参数，则不容许在函数外部从新申明参数。

    function func(arg) {let arg;}
    func() // Identifier 'arg' has already been declared
    
    function func() {let arg;}
    func() // undefined
    
    function func(arg) {
      {let arg; // 仅在 {} 内失效
      }
    }
    func() // undefined

let 申明变量不会造成变量笼罩，因为各自申明的变量仅在本人所属作用域内失效

    let a = 'first';
    function f(){console.log(a,1);
        if(1){
            let a = 'second'
            console.log(a,2)
        };
        console.log(a,3);
    }
    f()
    
    // first 1
    // second 2
    // first 3

let 申明变量不会存在全局变量净化

    var a = [];
    for (var i = 0; i < 10; i++) {a[i] = function () {console.log(i);
      };
    }
    a[6](); // 10
    console.log(i)；// 10
    
    let a = [];
    for (let i = 0; i < 10; i++) {a[i] = function () {console.log(i);
      };
    }
    a[6](); // 6
    console.log(i)；// i is not defined

在 for 循环中设置循环变量的那局部是父作用域，循环体外部为一个独自的子作用域，当循环体内有 let 申明变量时，每一次循环其外部都造成新的块级作用域

    for (let i = 0; i < 3; i++) {
      let i = 'abc';
      console.log(i);
    }
    // abc
    // abc
    // abc

注：当 for 循环中用 let 设置循环变量时，每一次循环所生成的变量都是从新申明的，此时循环次数是由 JavaScript 引擎记住的

2. 块级作用域

ES6 所新增的块级作用域实际上为 let 或 const 命令申明变量时造成。

暂时性死区

只有块级作用域内存在 let 命令，则它所申明的变量就绑定在这个区域，不再受内部的影响。

在代码块内，应用 let 命令申明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”（temporal dead zone，简称 TDZ）

    if (true) {
      // TDZ 开始
      tmp = 'abc'; // ReferenceError
      console.log(tmp); // ReferenceError
    
      let tmp; // TDZ 完结
      console.log(tmp); // undefined
    
      tmp = 123;
      console.log(tmp); // 123
    }

ES6 规定暂时性死区和 let、const 语句不呈现变量晋升，次要是为了缩小运行时谬误，避免在变量申明前就应用这个变量，从而导致意料之外的行为。这样的谬误在 ES5 是很常见的，当初有了这种规定，防止此类谬误就很容易了。

暂时性死区的实质就是：只有一进入以后作用域，所要应用的变量就曾经存在了，然而不可获取，只有等到申明变量的那一行代码呈现，才能够获取和应用该变量。

块级作用域

实际上 ES6 中的 let 命令为 JavaScript 新增了块级作用域

总的来说，块级作用域就是由一对大括号 {} 所包裹的外部具备 let 或者 const 申明变量的区块。
其中由一对大括号{}、外部具备 let 或 const 申明变量都为必须条件（若外部有函数申明函数则联合环境思考）

ES6 容许块级作用域任意嵌套，内层作用域能够定义外层作用域的同名变量。

    {
        {
            {
                {
                    let insane = 'Hello World';
                    {let insane = 'Hello World'}
                }
                console.log(insane,1) // insane is not defined
            }
            var a = 1;
        }
        console.log(a,2) // 1
    };

块级作用域的呈现，实际上使得取得广泛应用的匿名立刻执行函数表达式（匿名 IIFE）不再必要了。

    // IIFE 写法
    (function () {
      var tmp = ...;
      ...
    }());
    
    // 块级作用域写法
    {
      let tmp = ...;
      ...
    }
块级作用域与函数申明

函数是否能在块级作用域中申明，到当初仍是一个难以定性的问题。

ES5 规定，函数只能在顶层作用域和函数作用域之中申明。

ES6 引入了块级作用域，明确容许在块级作用域之中申明函数。ES6 规定，块级作用域之中，函数申明语句的行为相似于 let，在块级作用域之外不可援用。

尽管 ES5、ES6 如此规定，然而实际上思考到以老代码的兼容问题，浏览器采取了本人的行为形式

ES6 在附录 B 外面规定，浏览器的实现能够不恪守下面的规定，有本人的行为形式。

  1. 容许在块级作用域内申明函数。
  2. 函数申明相似于 var，即会晋升到全局作用域或函数作用域的头部。
  3. 同时，函数申明还会晋升到所在的块级作用域的头部。
    function f() { console.log('I am outside!'); }
    
    (function () {if (false) {
            // 反复申明一次函数 f
            function f() { console.log('I am inside!'); }
        }
        console.log(f) // undefined
        f();  // Uncaught TypeError: f is not a function}());

上述代码理论执行程序为：

    function f() { console.log('I am outside!'); }
    
    (function () {
        var f; // undefined
        if (false) {
            // 反复申明一次函数 f
            function f() { console.log('I am inside!'); }
        }
        console.log(f) // undefined
        f();  // Uncaught TypeError: f is not a function}());

在不同的环境中，于块级作用域内进行函数申明解决的形式不一样，故一般来说不在块级作用域内申明函数。若的确须要则应写为函数表达式。

    function f() { console.log('I am outside!'); }
    
    (function () {if (false) {
            // 反复申明一次函数 f
            let f = function() { console.log('I am inside!'); }
        }
        console.log(f) // ƒ f() { console.log('I am outside!'); }
        f();  // I am outside!}());

三、const

const 申明一个只读的常量，一但申明，常量的值就不能扭转

    const a = 10;
    console.log(a) // 10
    a = 5
    console.log(a) // Assignment to constant variable

const 申明的常量需立刻初始化，未初始化则报错

    const a; // Missing initializer in const declaration

const 申明所造成的作用域与 let 雷同，会造成暂时性死区，且只在申明所在的块级作用域内无效

    if(1){
        const a = 10;
        console.log(a,1) // 10 1
    }
    console.log(a,2) // a is not defined
    
    if(1){console.log(a,1) // Cannot access 'a' before initialization
        const a = 10;
    }

const 申明的常量，也与 let 一样不可反复申明。

    const a = 10;
    const a = '10' // Identifier 'a' has already been declared

const 所申明的常量，其本质上是固定其指向的内存地址的值固定不变

  1. 针对简略类型数据（数值、字符串、布尔值），其值自身就存在变量所指向的内存地址，故等同于常量
  2. 针对复合类型数据（对象、数组等），变量指向的内存地址保留的只是一个指向理论数据的指针，const 只能保障指针的指向固定，而其指向的数据结构则无法控制
    const a = [];
    a.push('Hello');
    // a 的值扭转
    a; // ["Hello"]
    // 赋值操作失败
    a = ['world'] // Identifier 'a' has already been declared

若想解冻对象，则能够应用 Object.freeze 办法

const a = Object.freeze([]);
a.push('Hello'); // Cannot add property 0, object is not extensible

但 Object.freeze 办法仅解冻以后一层对象，若对象外部还有对象则外面的对象仍可扭转

const a = Object.freeze({'name':'张三','age':'14',obj:{'address':'张家山路 1 号'}});
a.obj.address = '熊猫小道 1 号'
a.obj.address //'熊猫小道 1 号'

故解冻对象时应除了自身解冻外，属性也应全副解冻

var constantize = (obj) => {Object.freeze(obj);
  Object.keys(obj).forEach((key, i) => {if ( typeof obj[key] === 'object' ) {constantize( obj[key] );
    }
  });
};

四、小结

  1. var 申明变量会变量晋升，容易造成变量笼罩和全局变量净化
  2. let 和 const 申明变量会造成暂时性死区，使其在遇到 let 申明前无奈进行调用，促成先申明后应用的良好编程理念
  3. 暂时性死区和块级作用域不是一个概念
  4. 在 for 循环的循环体中，let 申明所造成的块级作用域每一次循环都造成新的块级作用域
  5. const 指令申明数值、字符串、布尔值时为常量，然而申明对象、数组等复合类型数据时仅能保障指针指向不变，然而其外部数据结构的扭转无奈保障
  6. 若想解冻对象有 Object.freeze 办法，但仅可解冻一层，若对象多层则应遍历后将属性全副解冻

参考文献：ECMAScript 6 入门 阮一峰

五、茶谈

ES5 中并无块级作用域这一说法，块级作用域是由 ES6 中由 let 或 const 命令在一对 {} 中所造成。

那仅存在{}，外部是否是块级作用域？

退出移动版