es6 第二章 let和const命令

let

基本用法

• let和var的区别

  • let：只在定义的代码块中起作用
  • var：在代码块外也有定义

    { 
     let a=10;
     var b=2; 
   }
   a//undefined
   b//1
  

  • let 适用于for循环得计数器，只在for循环代码块中有定义，for循环外部无定义。
    而var的缺陷：在全局范围内有定义，也就是只能定义一个i，其他的i都是基于第一个
    定义的i进行操作的。
  • for循环中设置循环变量的那部分是父作用域，循环内是子作用域，为不同作用域，值可以不同，取决于子作用域的操作。

• 不存在变量提升
  let:必须先声明后使用，否则会报错。
  var：无声明使用会输出undefined

• 暂时性死区

  • let:变量未声明之前，都是变量的死区，即在死区使用都会报错

  var tmp =123;
    if(true){
        tmp="abc";
        let tmp ;
}
//ReferenceError: tmp is not defined

• 隐藏性死区：变量值为另一个未声明的变量

   function bar(x=y,y=2){
       return[x,y];
    }
    bar(x=y,y=2);
    //ReferenceError: y is not defined
  
   function bar1(y=2,x=y){
       return[x,y];
       
   }
   bar1();
   //[2,2]
  

  • 暂时性死区的本质：只要进入当前作用域，变量存在但是不可以获取，只有出现声明后才能使用

• 不允许重新声明

• let不允许在同一作用域内重复声明同一变量，也不可以在函数内部重复声明参数，除非声明的参数在函数内部的一个新的代码块内。

块级作用域

• es5只有全局作用域和函数作用域，没有块级作用域的不合理场景：
  1. 内层变量覆盖外层变量

  var tmp = new Date();
  function f(){
     console.log(tmp);
     if(false){
        tmp="hello world"
     }
  }
  //undefined
  

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

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

• es6的作用域有三种：全局、函数、块级（let)
  • 块级作用于可以任意层嵌套，外部无法引用内部的变量，内部可以定义与外层同名的变量

 {{
    let s="hello";
    {let s=2}
 }}   

• 块级作用域与函数声明
  • es6支持在块级作用域声明函数；
  • es6函数声明类似var，即会提升到全局作用域或者函数作用域的头部；
  • 同时，函数声明提升到块级作用域。
  • 块级作用域必须要在一个大括号内。

const

基本用法

• 定义：const是一个只读的常量，一声明不许改动,而且必须初始化

const pi=3.14
pi=3;
pi//TypeError: Assignment to constant variable.
const p;
//SyntaxError: Missing initializer in const declaration.

• 性质：

  • 只在声明的块级作用域有定义
  • 不允许重复定义；
  • 存在暂时性死区
  • 常量不提升

• 本质：

• 不是变量不可以改变，而是变量指向的内存空间所保存的数据不可以改变。

• 对于简单数据类型（布尔值、字符串、数值），保存的数据就是值，所以不能改动；

• 对于对象和数组，所指向的内存地址保留的是一个指针，指针所指向的数据结构是有可能可以改变的

const foo={};
 foo.name="Lucy";
 foo.name;//"Lucy"
 foo={}//报错  

• 冻结对象以及属性的函数

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

es6变量声明的方法

• 六种：var和function；let和const;import和class.

顶层对象的属性

• 浏览器的顶层对象是window，Node的顶层对象是Global
• es5的顶层对象可以是全局变量
• es6中规定：var和function定义的变量可以和顶层对象挂钩；但是const和let不允许。

Global对象

• 获取global对象的方法:

 // 方法一
      (typeof window !== 'undefined'
         ? window
         : (typeof process === 'object' &&
            typeof require === 'function' &&
            typeof global === 'object')
           ? global
           : this);
      
      // 方法二
      var getGlobal = function () {
        if (typeof self !== 'undefined') { return self; }
        if (typeof window !== 'undefined') { return window; }
        if (typeof global !== 'undefined') { return global; }
        throw new Error('unable to locate global object');
      };

• 在所有的环境中获取global对象：

         // CommonJS 的写法
           require('system.global/shim')();
           
           // ES6 模块的写法
           import shim from 'system.global/shim'; shim();

• 将顶层对象放进global对象中：

      // CommonJS 的写法
       var global = require('system.global')();
       
       // ES6 模块的写法
       import getGlobal from 'system.global';
       const global = getGlobal();

参考文献

ECMAScript 6 入门--阮一峰