let和const学习笔记

2018-08-14  本文已影响7人  AmazRan

var存在的问题

问题1：JS没有块级作用域

请看这样一条规则：在JS函数中的var声明，其作用域是函数体的全部。
乍一听没什么问题，但是如果碰到以下两种情况就不会得到令人满意的结果。

其一，在代码块内声明的变量，其作用域是整个函数作用域而不是块级作用域。
假如你现在的代码使用了一个变量 t：

function runTowerExperiment(tower, startTime) {
    var t = startTime;
    tower.on("tick", function() {
        console.log(t); // startTime
    });
    // ...更多代码...
}

到目前为止，一切都很顺利。现在你想添加测量保龄球速度的功能，所以你在回调函数内部添加了一个简单的 if 语句。

function runTowerExperiment(tower, startTime) {
    var t = startTime;
    tower.on("tick", function() {
        console.log(t); // undefined
        if (bowlingBall.altitude() <= 0) {
            var t = readTachymeter(); //指向的是一个新的内部
            // ...
        }
    });
    // ...更多代码...
}

在 if 内部无意中添加了第二个变量 t，这里的 t 指向的是一个新的内部变量 t 而不是原来的外部变量。

JavaScript中var声明的作用域，从声明处开始向前后两个方向扩散，直到触及函数边界才停止扩散。
变量提升：函数声明和变量声明总是会被解释器悄悄地被"提升"到方法体的最顶部，且JavaScript 只有声明的变量会提升，初始化的不会。

在上面演示的这种情况下，提升会引发令人不愉快的bug：所有使用变量t进行的计算最终的结果都是NaN。

问题2：循环内变量过度共享

var messages = ["喵！", "我是一只会说话的猫！", "回调（callback）非常有趣!"];
for (var i = 0; i < messages.length; i++) {
    setTimeout(function() {
        console.log(messages[i]); // log三次“undefined”
    }, i * 1500);
}

循环本身及三次timeout回调均共享唯一的变量i。当循环结束执行时，i的值为3（因为messages.length的值为3），此时回调尚未被触发。
所以当第一个timeout执行时，调用console.log(messages[i])，此时i的值为3，所以最终打印出来的是messages[3]的值亦即undefined。

let是更完美的var

新的关键词：let。let与var一样，也可以用来声明变量，但它有着更好的作用域规则。

在那些不同之外，let和var几乎很相似了。举个例子，它们都支持使用逗号分隔声明多重变量，它们也都支持解构特性。

注意，class类声明的行为与var不同而与let一致。如果你加载一段包含同名类的脚本，后定义的类会抛出重定义错误。

const

const声明的变量与let声明的变量类似，它们的不同之处在于，const声明的变量只可以在声明时赋值，不可随意修改，否则会导致SyntaxError（语法错误）。

    const MAX_CAT_SIZE_KG = 3000; // 正确

    MAX_CAT_SIZE_KG = 5000; // 语法错误（SyntaxError）
    MAX_CAT_SIZE_KG++; // 虽然换了一种方式，但仍然会导致语法错误

    const theFairest;  // 用`const`声明变量后必须要赋值，否则也抛出语法错误。

const实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址所保存的数据不得改动。对于简单类型的数据（数值、字符串、布尔值），值就保存在变量指向的那个内存地址，因此等同于常量。但对于复合类型的数据（主要是对象和数组），变量指向的内存地址，保存的只是一个指向实际数据的指针，const只能保证这个指针是固定的（即总是指向另一个固定的地址），至于它指向的数据结构是不是可变的，就完全不能控制了。因此，将一个对象声明为常量必须非常小心。

const foo = {};

// 为 foo 添加一个属性，可以成功
foo.prop = 123;
foo.prop // 123

// 将 foo 指向另一个对象，就会报错
foo = {}; // TypeError: "foo" is read-only
// 对象冻结应该用Object.freeze

//数组
const a = [];
a.push('Hello'); // 可执行
a.length = 0;    // 可执行
a = ['Dave'];    // 报错

引申关于块级作用域与函数声明

ES5 规定，函数只能在顶层作用域和函数作用域之中声明，不能在块级作用域声明。

// 情况一
if (true) {
  function f() {}
}

// 情况二
try {
  function f() {}
} catch(e) {
  // ...
}

上面两种函数声明，根据 ES5 的规定都是非法的。

但是，浏览器没有遵守这个规定，为了兼容以前的旧代码，还是支持在块级作用域之中声明函数，因此上面两种情况实际都能运行，不会报错。

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

function f() { console.log('I am outside!'); }

(function () {
  if (false) {
    // 重复声明一次函数f
    function f() { console.log('I am inside!'); }
  }
  f(); // ES5环境log：I am inside!
}());
//等同于↓↓↓↓↓
(function () {
  function f() { console.log('I am inside!'); }
  if (false) {}
  f();
}());

ES6 就完全不一样了，理论上会得到“I am outside!”。因为块级作用域内声明的函数类似于let，对作用域之外没有影响。但是，如果你真的在 ES6 浏览器中运行一下上面的代码，是会报错的，这是为什么呢？

原来，如果改变了块级作用域内声明的函数的处理规则，显然会对老代码产生很大影响。为了减轻因此产生的不兼容问题，ES6 在附录 B里面规定，浏览器的实现可以不遵守上面的规定，有自己的行为方式。

注意，上面三条规则只对 ES6 的浏览器实现有效，其他环境的实现不用遵守，还是将块级作用域的函数声明当作let处理。

根据这三条规则，在浏览器的 ES6 环境中，块级作用域内声明的函数，行为类似于var声明的变量。

// 浏览器的 ES6 环境
function f() { console.log('I am outside!'); }
(function () {
  var f = undefined;
  if (false) {
    function f() { console.log('I am inside!'); }
  }

  f(); // Uncaught TypeError: f is not a function
}());

考虑到环境导致的行为差异太大，应该避免在块级作用域内声明函数。如果确实需要，也应该写成函数表达式，而不是函数声明语句。
let f = function () { return a }
还有一个需要注意的地方。ES6 的块级作用域允许声明函数的规则，只在使用大括号的情况下成立，如果没有使用大括号，就会报错。

// 不报错
'use strict';
if (true) {
  function f() {}
}

// 报错
'use strict';
if (true)
  function f() {}

顶层对象

顶层对象，在浏览器环境指的是window对象，在 Node 指的是global对象。ES5 之中，顶层对象的属性与全局变量是等价的。

ES6 规定，为了保持兼容性，var命令和function命令声明的全局变量，依旧是顶层对象的属性；let命令、const命令、class命令声明的全局变量，不属于顶层对象的属性。也就是说，从 ES6 开始，全局变量将逐步与顶层对象的属性脱钩。

var a = 1;
// 如果在 Node 的 REPL 环境，可以写成 global.a
// 或者采用通用方法，写成 this.a
window.a // 1

let b = 1;
window.b // undefined

参考

深入浅出ES6（十四）：let和const
阮一峰的ECMAScript6入门

上一篇 下一篇

猜你喜欢

热点阅读