关于文章议论请接见：https://github.com/Jocs/jocs….

当Brendan Eich在1995年设想JavaScript第一个版本的时刻，斟酌的不是很周密，以至于最初版本的JavaScript有许多不完善的处所，在Douglas Crockford的《JavaScript：The Good Parts》中就总结了许多JavaScript不好的处所，比方许可!=和==的运用，会致使隐式的范例转换，比方在全局作用域中经由过程var声明变量会成为全局对象（在浏览器环境中是window对象）的一个属性，在比方var声明的变量可以掩盖window对象上面原生的要领和属性等。

然则作为一门已被普遍用于web开辟的计算机言语来讲，去改正这些设想毛病显得相称难题，因为假如新的语法和老的语法有争执的话，那末已有的web运用没法运转，浏览器临盆厂商一定不会去冒这个险去完成这些和老的语法完整争执的功用的，因为谁都不想落空本身的客户，不是吗？因而向下兼容便成了处置惩罚上述题目的唯一门路，也就是说在不转变原有语法特征的基本上，增添一些新的语法或变量声明体式格局等，来把新的言语特征引入到JavaScript言语中。

早在九年前，Brendan Eich在Firefox中就完成了初版的let.然则let的功用和现有的ES2015规范划定有些相差，后因由Shu-yu Guo将let的完成升级到相符现有的ES2015规范，如今才有了我们如今在最新的Firefox中运用的let 声明变量语法。

题目一：没有块级作用域

在ES2015之前，在函数中经由过程var声明的变量，不管其在{}中照样表面，其都可以在全部函数范围内接见到，因而在函数中声明的变量被称为部分变量，作用域被称为部分作用域，而在全局中声明的变量存在全部全局作用域中。然则在许多情境下，我们急切的须要块级作用域的存在，也就是说在{}内部声明的变量只可以在{}内部接见到，在{}外部没法接见到其内部声明的变量，比方下面的例子：

function foo() {
    var bar = 'hello'
    if (true) {
        var zar = 'world'
        console.log(zar)
    }
    console.log(zar) // 假如存在块级作用域那末将报语法毛病：Uncaught ReferenceError
}

在上面的例子中，假如JavaScript在ES2015之前就存在块级作用域，那末在{}以外将没法接见到其内部声明的变量zar，然则实际上，第二个console却打印了zar的赋值，’world’。

题目二：for轮回中同享迭代变量值

在for轮回初始轮回变量时，假如运用var声明初始变量i，那末在全部轮回中，for轮回内部将同享i的值。以下代码：

var funcs = []
for (var i = 0; i < 10; i++) {
    funcs.push(function() {
        return i
    })
}
funcs.forEach(function(f) {
    console.log(f()) // 将在打印10数字10次
})

上面的代码并没有按着我们愿望的体式格局实行，我们原本愿望是末了打印0、1、2…9这10个数字。然则末了的效果却出乎我们的预料，而是将数字10打印了10次，究其缘由，声明的变量i在上面的全部代码块可以接见到，也就是说，funcs数组中每一个函数返回的i都是全局声明的变量i。也就说在funcs中函数实行时，将返回统一个值，而变量i初始值为0，当迭代末了一次举行累加，9+1 = 10时，经由过程前提语句i < 10推断为false，轮回运转终了。末了i的值为10.也就是为何末了一切的函数都打印为10。那末在ES2015之前可以使上面的轮回打印0、1、2、… 9吗？答案是一定的。

var funcs = []
for (var i = 1; i < 10; i++) {
    funcs.push((function(value) {
        return function() {
            return value
        }
    })(i))
}
funcs.forEach(function(f) {
    console.log(f())
})

在这儿我们运用了JavaScript中的两个很棒的特征，马上实行函数（IIFEs）和闭包（closure）。在JavaScript的闭包中，闭包函数可以接见到庇护函数中的变量，这些闭包函数可以接见到的变量也因而被称为自在变量。只需闭包没有被烧毁，那末外部函数将一直在内存中保留着这些变量，在上面的代码中，形参value就是自在变量，return的函数是一个闭包，闭包内部可以接见到自在变量value。同时这儿我们还运用了马上实行函数，马上函数的作用就是在每次迭代的过程当中，将i的值作为实参传入马上实行函数，并实行返回一个闭包函数，这个闭包函数保留了外部的自在变量，也就是保留了当次迭代时i的值。末了，就可以到达我们想要的效果，挪用funcs中每一个函数，终究返回0、1、2、… 9。

题目三：变量提拔（Hoisting）

我们先来看看函数中的变量提拔， 在函数中经由过程var定义的变量，不管其在函数中什么位置定义的，都将被视作在函数顶部定义，这一特定被称为提拔（Hoisting）。想晓得变量提拔详细是如何操纵的，我们可以看看下面的代码：

function foo() {
    console.log(a) // undefined
    var a = 'hello'
    console.log(a) // 'hello'
}

在上面的代码中，我们可以看到，第一个console并没有报错（ReferenceError）。说明在第一个console.log(a)的时刻，变量a已被定义了，JavaScript引擎在剖析上面的代码时实际上是像下面如许的：

function foo() {
  var a
  console.log(a)
  a = 'hello'
  console.log(a)
}

也就是说，JavaScript引擎把变量的定义和赋值分开了，起首对变量举行提拔，将变量提拔到函数的顶部，注重，这儿变量的赋值并没有获得提拔，也就是说a = "hello"依旧是在后面赋值的。因而第一次console.log(a)并没有打印hello也没有报ReferenceError毛病。而是打印undefined。无论是函数内部照样外部，变量提拔都邑给我们带来意想不到的bug。比方下面代码：

if (!('a' in window)) {
  var a = 'hello'
}
console.log(a) // undefined

许多公司都把上面的代码作为口试前端工程师JavaScript基本的口试题，其考点也就是考核全局环境下的变量提拔，起首，答案是undefined，并非我们期许的hello。缘由就在于变量a被提拔到了最上面，上面的代码JavaScript实际上是如许剖析的：

var a
if (!('a' in window)) {
  a = 'hello'
}
console.log(a) // undefined

如今就很明了了，bianlianga被提拔到了全局环境最顶部，然则变量a的赋值照样在前提语句内部，我们晓得经由过程关键字var在全局作用域中声明的变量将作为全局对象（window）的一个属性，因而'a' in window为true。所以if语句中的推断语句就为false。因而前提语句内部就基础不会实行，也就是说不会实行赋值语句。末了经由过程console.log(a)打印也就是undefined，而不是我们想要的hello。

虽然运用关键词let举行变量声明也会有变量提拔，然则其和经由过程var说明的变量带来的变量提拔是不一样的，这一点将在后面的let和var的区分中议论到。

关于ES2015之前作用域的观点

上面说起的一些题目，许多都是因为JavaScript中关于作用域的细分粒度不够，这儿我们轻微回忆一下ES2015之前关于作用域的观点。

Scope： collects and maintains a look-up list of all the declared identifiers (variables), and enforces a strict set of rules as to how these are accessible to currently executing code.

上面是关于作用域的定义，作用域就是一些划定规矩的鸠合，经由过程这些划定规矩我们可以查找到当前实行代码所需变量的值，这就是作用域的观点。在ES2015之前最常见的两种作用域，全局作用局和函数作用域（部分作用域）。函数作用域可以嵌套，如许就构成了一条作用域链，假如我们自顶向下的看，一个作用域内部可以嵌套几个子作用域，子作用域又可以嵌套更多的作用域，这就更像一个‘’作用域树‘’而非作用域链了，作用域链是一个自底向上的观点，在变量查找的过程当中很有效的。在ES3时，引入了try catch语句，在catch语句中构成了新的作用域，外部是接见不到catch语句中的毛病变量。代码以下：

try {
  throw new Error()
} catch(err) {
  console.log(err)
}
console.log(err) //Uncaught ReferenceError

再到ES5的时刻，在严厉情势下（use strict），函数中运用eval函数并不会再在原有函数中的作用域中实行代码或变量赋值了，而是会动态天生一个作用域嵌套在原有函数作用域内部。以下面代码：

'use strict'
var a = function() {
    var b = '123'
    eval('var c = 456;console.log(c + b)') // '456123'
    console.log(b) // '123'
    console.log(c) // 报错
}

在非严厉情势下，a函数内部的console.log(c)是不会报错的，因为eval会同享a函数中的作用域，然则在严厉情势下，eval将会动态建立一个新的子作用域嵌套在a函数内部，而外部是接见不到这个子作用域的，也就是为何console.log(c)会报错。

经由过程let来声明变量

经由过程let关键字来声明变量也经由过程var来声明变量的语法情势雷同，在某些场景下你以至可以直接把var替换成let。然则运用let来说明变量与运用var来声明变量最大的区分就是作用域的边境不再是函数，而是包括let变量声明的代码块（{}）。下面的代码将说明let声明的变量只在代码块内部可以接见到，在代码块外部将没法接见到代码块内部运用let声明的变量。

if (true) {
  let foo = 'bar'
}
console.log(foo) // Uncaught ReferenceError

在上面的代码中，foo变量在if语句中声明并赋值。if语句外部却接见不到foo变量，报ReferenceError毛病。

let和var的区分

变量提拔的区分

在ECMAScript 2015中，let也会提拔到代码块的顶部，在变量声明之前往接见变量会致使ReferenceError毛病，也就是说，变量被提拔到了一个所谓的“temporal dead zone”（以下简称TDZ）。TDZ地区从代码块最先，直到显现得变量声明完毕，在这一地区接见变量都邑报ReferenceError毛病。以下代码：

function do_something() {
  console.log(foo); // ReferenceError
  let foo = 2;
}

而经由过程var声明的变量不会构成TDZ,因而在定义变量之前接见变量只会提醒undefined，也就是上文以及议论过的var的变量提拔。

全局环境声明变量的区分

在全局环境中，经由过程var声明的变量会成为window对象的一个属性，以至对一些原生要领的赋值会致使原生要领的掩盖。比方下面临变量parseInt举行赋值，将掩盖原生parseInt要领。

var parseInt = function(number) {
  return 'hello'
}
parseInt(123) // 'hello'
window.parseInt(123) // 'hello'

而经由过程关键字let在全局环境中举行变量声明时，新的变量将不会成为全局对象的一个属性，因而也就不会掩盖window对象上面的一些原生要领了。以下面的例子：

let parseInt = function(number) {
  return 'hello'
}
parseInt(123) // 'hello'
window.parseInt(123) // 123

在上面的例子中，我们看到let性命的函数parsetInt并没有掩盖window对象上面的parseInt要领，因而我们经由过程挪用window.parseInt要领时，返回效果123。

在屡次声明统一变量时处置惩罚差别

在ES2015之前，可以经由过程var屡次声明统一个变量而不会报错。下面的代码是不会报错的，然则是不引荐的。

var a = 'xiaoming'
var a = 'huangxiaoming'

实在这一特征不利于我们找出顺序中的题目，虽然有一些代码检测工具，比方ESLint可以检测到对统一个变量举行屡次声明赋值，可以大大削减我们顺序失足的能够性，但毕竟不是原生支撑的。不必忧郁，ES2015来了，假如一个变量已被声明，不管是经由过程var照样let或许const,该变量再次经由过程let声明时都邑语法报错（SyntaxError）。以下代码：

var a = 345
let a = 123 // Uncaught SyntaxError: Identifier 'a' has already been declared

最好的老是放在末了：const

经由过程const性命的变量将会建立一个对该值的一个只读援用，也就是说，经由过程const声明的原始数据范例（number、string、boolean等），声明后就不可以再转变了。经由过程const声明的对象，也不能转变对对象的援用，也就是说不可以再将别的一个对象赋值给该const声明的变量，然则，const声明的变量并不示意该对象就是不可变的，依旧可以转变对象的属性值，只是该变量不能再被赋值了。

const MY_FAV = 7
MY_FAY = 20 // 反复赋值将会报错(Uncaught TypeError: Assignment to constant variable)
const foo = {bar: 'zar'}
foo.bar = 'hello world' // 转变对象的属性并不会报错

经由过程const性命的对象并非不可变的。然则在许多场景下，比方在函数式编程中，我们愿望声明的变量是不可变的，不管其是原始数据范例照样援用数据范例。明显现有的变量声明不可以满足我们的需求，以下是一种声明不可变对象的一种完成：

const deepFreeze = function(obj) {
    Object.freeze(obj)
    for (const key in obj) {
        if (typeof obj[key] === 'object') deepFreeze(obj[key])
    }
    return obj
}
const foo = deepFreeze({
  a: {b: 'bar'}
})
foo.a.b = 'zar'
console.log(foo.a.b) // bar

最好实践

在ECMAScript 2015成为最新规范之前，许多人都以为let是处置惩罚本文最先排列的一系列题目的最好计划，关于许多JavaScript开辟者而言，他们以为一最先var就应该像如今let一样，如今let出来了，我们只须要根据现有的语法把之前代码中的var换成let就好了。然后运用const声明那些我们永久不会修正的值。

然则，当许多开辟者最先将本身的项目迁移到ECMAScript2015后，他们发明，最好实践应该是，尽量的运用const,在const不可以满足需求的时刻才运用let，永久不要运用var。为何要尽量的运用const呢？在JavaScript中，许多bug都是因为无意的转变了某值或许对象而致使的，经由过程尽量运用const，或许上面的deepFreeze可以很好地躲避这些bug的涌现，而我的发起是：假如你喜好函数式编程，永久不转变已声明的对象，而是天生一个新的对象，那末关于你来讲，const就完整够用了。