var

var声明的变量是函数作用域，会定义到全局对象上

  1. var a; // undefined 如果未指定初始值，初始值就是
  2. var i = 0, j = 0, k = 0;
  3. for (var p in o) console.log(p);//定义在循环体内使用的变量，如果用 var 定义，其实作用域在外部，全局或是函数

在函数体内定义的 var变量是局部变量

  1. function test() {
  2. var message = "hi"; // local variable
  3. }
  4. test();
  5. console.log(message); // error!

没有用 var 定义的变量是全局变量

  1. function test() {
  2. message = "hi"; // global variable
  3. }
  4. test();
  5. console.log(message); // "hi"

var定义的变量存在变量提升，根预解析有关。
在执行代码前，预解析，把所有 var 定义的变量放到词法作用域里面的变量环境，设置为 undefined。可以重名

如果我们仍然想要使用var，我的个人建议是，把它当做一种“保障变量是局部”的逻辑

  • 声明同时必定初始化；
  • 尽可能在离使用的位置近处声明；
  • 不要在意重复声明。
  1. var x = 1, y = 2;
  2. doSth(x, y);
  4. for(var x = 0; x < 10; x++)
  5.     doSth2(x);

改成

  1. {
  2.     let x = 1, y = 2;
  3.     doSth(x, y);
  4. }
  6. for(let x = 0; x < 10; x++)
  7.     doSth2(x);

let

let声明的变量绑定到块作用域。不会成为全局对象的属性

不能重复声明，第一次声明的时候是 uninitial，存在执行上下文的词法作用域的词法环境

隐式的绑定

  1. var foo = true;
  2. if (foo) {
  3.     let bar = foo * 2;
  4.     bar = something( bar ); console.log( bar );
  5. }
  6. console.log( bar ); // ReferenceError

显式的绑定

  1. if (foo) {
  2. { 
  3.     // <-- 显式的快
  4.     let bar = foo * 2;
  5.     bar = something( bar ); console.log( bar );
  6. } }
  7. console.log( bar ); // ReferenceError

垃圾回收
使用let 定义的变量，绑定到块作用域，其他作用域访问不到，
方便垃圾回收

  1. function process(data) {
  2. // 在这里做点有趣的事情
  3. }
  4. // 在这个块中定义的内容可以销毁了! {
  5. let someReallyBigData = { .. };
  6. process( someReallyBigData );
  7. }
  8. var btn = document.getElementById( "my_button" );
  9. btn.addEventListener( "click", function click(evt){
  10.   console.log("button clicked");
  11. }, /*capturingPhase=*/false );

块级作用域与函数声明

考虑到环境导致的行为差异太大，应该避免在块级作用域内声明函数。如果确实需要，也应该写成函数表达式，而不是函数声明语句。

const

const声明一个只读的常量。一旦声明，常量的值就不能改变。
如果是对象，对象的地址不能变，属性可以增加修改

class

class最基本的用法只需要class关键字、名称和一对大括号。它的声明特征跟const和let类似，都是作用于块级作用域，预处理阶段则会屏蔽外部变量。TDZ
需要注意，class默认内部的函数定义都是strict模式的。

私有变量

严格来讲，JavaScript 中没有私有成员的概念;所有对象属性都是公有的。不过，倒是有一个私有 变量的概念。任何在函数中定义的变量，都可以认为是私有变量，因为不能在函数的外部访问这些变量。 私有变量包括函数的参数、局部变量和在函数内部定义的其他函数。
如果在这个函数内部创建一个闭包，那么闭包通过自己的作用域链也可以访 问这些变量。而利用这一点，就可以创建用于访问私有变量的公有方法。

第一种是在构造函数中定义特权方法

  1. function Person(name){
  2. this.getName = function(){ return name;
  3. };
  4. this.setName = function (value) { name = value;
  5. }; }
  6. var person = new Person("Nicholas"); alert(person.getName()); //"Nicholas" person.setName("Greg"); alert(person.getName()); //"Greg"

构造函数模式的缺点是针对每个实例都会创建同样一组新方法

静态私有变量

  1. (function(){
  2. //私有变量和私有函数
  3. var privateVariable = 10;
  4.         function privateFunction(){
  5.             return false;
  6. }
  7. //构造函数
  8. MyObject = function(){ };
  9. //公有/特权方法
  10. MyObject.prototype.publicMethod = function(){
  11.             privateVariable++;
  12.             return privateFunction();
  13.         };
  14. })();

这个模式与在构造函数中定义特权方法的主要区别，就在于私有变量和函数是由实例共享的。由于 特权方法是在原型上定义的，因此所有实例都使用同一个函数。而这个特权方法，作为一个闭包，总是 保存着对包含作用域的引用。来看一看下面的代码。

  1. (function(){
  2.     var name
  3. Person = name
  4. };
  5. = "";
  6. function(value){ = value;
  7. Person.prototype.getName = function(){ return name;
  8. };
  9. Person.prototype.setName = function (value){
  10. name = value; };
  11. })();
  12. var person1 = new Person("Nicholas"); alert(person1.getName()); //"Nicholas" person1.setName("Greg"); alert(person1.getName()); //"Greg"
  13. var person2 = new Person("Michael"); alert(person1.getName()); //"Michael" alert(person2.getName()); //"Michael"

以这种方式创建静态私有变量会因为使用原型而增进代码复用，但每个实例都没有自己的私有变 量。到

function

判断变量存在

  1. // 错误
  2. aa == undefined // Uncaught ReferenceError: aa is not defined
  3. // 正确
  4. typeof aa === 'undefined' //  true

变量作用域（scope）

变量的作用域是词法作用域

顶层对象

ES5 的顶层对象，本身也是一个问题，因为它在各种实现里面是不统一的。

  • 浏览器里面，顶层对象是window，但 Node 和 Web Worker 没有window。
  • 浏览器和 Web Worker 里面，self也指向顶层对象，但是 Node 没有self。
  • Node 里面，顶层对象是global，但其他环境都不支持。
    同一段代码为了能够在各种环境，都能取到顶层对象，现在一般是使用this变量，但是有局限性。
  • ES5之中，顶层对象的属性与全局变量是等价的。
  1. window.a = 1;
  2. a // 1
  3. a = 2;
  4. window.a // 2
  5. var bar = 1;
  6. window.bar //1

var命令和function命令声明的全局变量，依旧是顶层对象的属性；

  • es6中let命令、const命令、class命令声明的全局变量，不属于顶层对象的属性。也就是说，从ES6开始，全局变量将逐步与顶层对象的属性脱钩。
  1. let b = 1;
  2. window.b // undefined

全局作用域

正常使用的时候禁止this关键字指向全局对象
严格模式和非严格模式
作用域在严格模式和非严格模式下不同
使用’use strict’
严格模式：

  1. ‘use strict’
  2. aa = 10 // aa is not defined

给一个没有声明的变量赋值会报错

非严格模式：

  1. aa = 10 // 10
  2. windows.aa // 10

如果给一个没有声明的变量赋值，js 会给全局对象创建一个同名属性
这个 aa 不是全局变量，aa 是全局对象的一个属性
全局变量是不可以删除的
全局对象的属性是可以删除

  1. var globalVar = 10;
  2. globalVar; // => 10
  3. window.globalVar; // => 10
  4. delete globalVar; // => false
  5. // 严格模式下无法删除变量。只有configurable设置为true的对象属性，才能被删除。
  6. globalVar; // => 10
  7. globalArr = 20;
  8. globalArr; // => 20
  9. window.globalArr; // => 20
  10. delete globalArr; // => true
  11. globalArr; // => undefined

添加一个window 已经存在的变量会报错
Uncaught SyntaxError: Identifier ‘parseFloat’ has already been declared

函数作用域

局部作用域就是函数作用域

  • 函数参数也是局部变量
  1. var scope = 'global'
  3. function checkscope(scope) {
  4.   return scope
  5. }
  7. function checkscope1() {
  8.   var scope = 'local'
  9.   return scope
  10. }
  12. function checkscope2(scope) {
  13.   var scope = 'local1'
  14.   return scope
  15. }
  17. console.log(checkscope('local')) // local
  18. console.log(checkscope1()) // local
  19. // 函数体内定义的会把参数的覆盖
  20. console.log(checkscope2('local')) // local1
  • 变量提升
  • var
  1. var scope = 'global'
  2. function f () {
  3.   console.log(scope)
  4.   if (true) {
  5.     var scope = 'local'
  6.   }
  7.   console.log(scope)
  8. }
  9. f() // undefined local
  10. // 用 var 定义没有 tdz，所以是 undefined，不是ReferenceError

相当于

  1. var scope = 'global'
  2. function f () {
  3.     var scope;
  4.     console.log(scope);
  5.     if (true) {
  6.         scope = 'local'
  7.     }
  8.     console.log(scope)
  9. }

js 动态执行前会编译下，编译的时候会把 变量的定义提升到函数作用域顶部
因为有变量提升存在所有用 var 定义的变量没有块作用域

  • let
  1. {
  2.   console.log(foo); // variable.js:2 Uncaught ReferenceError: Cannot access 'foo' before initialization
  3.   // foo 已经定义，但是在 tdz 区域，引用错误
  4.   let foo = 2;
  5. }
  1. {
  2.   console.log(a) // a is not defined
  3. }

用 let 定义的变量没有变量提升，从代码块开始，到变量声明的这段区域是，TDZ，在这一区域访问变量都会报ReferenceError错误。

块作用域 block scope

为了加强对变量生命周期的控制，ECMAScript 6 引入了块级作用域。
块级作用域存在于：

  1. 函数内部
  2. 块中(字符 { 和 } 之间的区域)
    let 和 const 都是块级声明的一种。

es5

es5的js 没有 block scope，只有 function scope

  1. function test (o) {
  2.   var i = 0 // 函数作用域
  3.   if (typeof o === 'object') {
  4.     var j = 0 // 没有 block scope，是 function scope
  5.     for (var k = 0; k < 10; ++k) { // k 也是 function scope
  6.       console.log(k)
  7.     }
  8.     console.log(k)
  9.   }
  10.   console.log(j)
  11. }
  13. test({})

如果没有块作用域，可以用闭包

  1. var funcs = []
  2. for (var i = 0; i < 10; i++) {
  3.     funcs.push(function() {
  4.         return i
  5.     })
  6. }
  7. funcs.forEach(function(f) {
  8.     console.log(f()) // 将在打印10数字10次
  9. })
  10. // i 是全局变量，变量的时候取的都是全局变量 i
  1. // 在JavaScript的闭包中，闭包函数能够访问到包庇函数中的变量，这些闭包函数能够访问到的变量也因此被称为自由变量。只要闭包没有被销毁，那么外部函数将一直在内存中保存着这些变量，在上面的代码中，形参value就是自由变量，return的函数是一个闭包，闭包内部能够访问到自由变量value。同时这儿我们还使用了立即执行函数，立即函数的作用就是在每次迭代的过程中，将i的值作为实参传入立即执行函数，并执行返回一个闭包函数，这个闭包函数保存了外部的自由变量，也就是保存了当次迭代时i的值。
  2. var funcs = []
  3. for (var i = 1; i < 10; i++) {
  4.     funcs.push((function(value) {
  5.         return function() {
  6.             return value
  7.         }
  8.     })(i))
  9. }
  10. funcs.forEach(function(f) {
  11.     console.log(f())
  12. }) // 1...10

es6：

  • 限制在块里面
  1. {
  2.     let a = 10
  3. }
  4. console.log(a) // a is not defined
  • 不允许重复定义
  1. {
  2.   let a =  10;
  3.   let a = 20; // Uncaught SyntaxError: Identifier 'a' has already been declared
  4. }
  • 暂时性死区 tdz
  1. if (true) {
  2.   // TDZ开始 
  3.  tmp = 'abc'; // ReferenceError  
  4. console.log(tmp); // ReferenceError
  5.   let tmp; // TDZ结束  
  6. console.log(tmp); // undefined
  7.   tmp = 123;
  8.   console.log(tmp); // 123
  9. }

这样的设计是为了让大家养成良好的编程习惯，变量一定要在声明之后使用，否则就报错。
ES6 规定暂时性死区和let、const语句不出现变量提升，主要是为了减少运行时错误，防止在变量声明前就使用这个变量，从而导致意料之外的行为。这样的错误在 ES5 是很常见的，现在有了这种规定，避免此类错误就很容易了。
class 和 let 很像
这是因为 JavaScript 引擎在扫描代码发现变量声明时，要么将它们提升到作用域顶部(遇到 var 声明)，要么将声明放在 TDZ 中(遇到 let 和 const 声明)。访问 TDZ 中的变量会触发运行时错误。只有执行过变量声明语句后，变量才会从 TDZ 中移出，然后方可访问。

  • let 声明全局变量，不会成为 window 的属性
  1. var a = 10
  2. let b = 10
  4. console.log(window.a) // 10
  5. console.log(window.b) // undefined

循环中的块作用域

  1. var a = [];
  2. for (var i = 0; i < 10; i++) {
  3.   a[i] = function () {
  4.     console.log(i);
  5.   };
  6. }
  7. a[6](); // 10
  8. // 解决方案
  9. // 闭包
  10. var a = [];
  11. for (var i = 0; i < 10; i++) {
  12.   a[i] = (function () {
  13.     return function () {console.log(i);}
  14.   })(i);
  15. }
  16. a[6](); // 6
  18. // let
  19. var a = [];
  20. for (let i = 0; i < 10; i++) {
  21.   a[i] = function () {
  22.     console.log(i);
  23.   };
  24. }
  25. a[6](); // 6

for循环用 let定义i 变量为什么可以重复定义？每一次循环的i其实都是一个新的变量
另外，for循环还有一个特别之处，就是设置循环变量的那部分是一个父作用域，而循环体内部是一个单独的子作用域。
简单的来说，就是在 for (let i = 0; i < 3; i++) 中，即圆括号之内建立一个隐藏的作用域，然后每次迭代循环时都创建一个新变量，并以之前迭代中同名变量的值将其初始化。

  1. for (var i = 0; i < 3; i++) {
  2.   var i = 'abc';
  3.   console.log(i);
  4. }
  5. // abc
  6. for (let i = 0; i < 3; i++) {
  7.   let i = 'abc';
  8.   console.log(i);
  9. }
  10. //输出了3次abc。这表明函数内部的变量i与循环变量i不在同一个作用域，有各自单独的作用域。
  11. // abc
  12. // abc
  13. // abc
  15. // 伪代码
  16. (let i = 0) {
  17.   let i = 'abc';
  18.   console.log(i);
  19. }
  21. (let i = 1) {
  22.   let i = 'abc';
  23.   console.log(i);
  24. }
  26. (let i = 2) {
  27.   let i = 'abc';
  28.   console.log(i);
  29. };

当执行函数的时候，根据词法作用域就可以找到正确的值，其实你也可以理解为 let 声明模仿了闭包的做法来简化循环过程。

循环中的 let 和 const

  1. var funcs = [];
  2. for (const i = 0; i < 10; i++) {
  3.     funcs[i] = function () {
  4.         console.log(i);
  5.     };
  6. }
  7. funcs[0](); // Uncaught TypeError: Assignment to constant variable.

结果会是报错，因为虽然我们每次都创建了一个新的变量，然而我们却在迭代中尝试修改 const 的值，所以最终会报错。

  1. var funcs = [], object = {a: 1, b: 1, c: 1};
  2. for (var key in object) {
  3.     funcs.push(function(){
  4.         console.log(key)
  5.     });
  6. }
  8. funcs[0]()

结果是 ‘c’;

那如果把 var 改成 let 或者 const 呢？

使用 let，结果自然会是 ‘a’，const 呢？ 报错还是 ‘a’?

结果是正确打印 ‘a’，这是因为在 for in 循环中，每次迭代不会修改已有的绑定，而是会创建一个新的绑定。

babel

  1. let value = 1;

编译为:

  1. var value = 1;
  1. if (false) {
  2.     let value = 1;
  3. }
  4. console.log(value); // Uncaught ReferenceError: value is not defined

编译为

  1. if (false) {
  2.     var _value = 1;
  3. }
  4. console.log(value);

作用

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

  1. // IIFE 写法(function () {
  2.   var tmp = ...;
  3.   ...
  4. }());
  6. // 块级作用域写法
  7. {
  8.   let tmp = ...;
  9.   ...
  10. }

那循环中的 let 声明呢？

  1. var funcs = [];
  2. for (let i = 0; i < 10; i++) {
  3.     funcs[i] = function () {
  4.         console.log(i);
  5.     };
  6. }
  7. funcs[0](); // 0

Babel 巧妙的编译成了：

  1. var funcs = [];
  3. var _loop = function _loop(i) {
  4.     funcs[i] = function () {
  5.         console.log(i);
  6.     };
  7. };
  9. for (var i = 0; i < 10; i++) {
  10.     _loop(i);
  11. }
  12. funcs[0](); // 0

let var const

let 和 var 的区别

  1. let 声明了块作用域，块以外无法访问
  2. let,const的变量提升标注了暂时性死区的开始，使用let命令声明变量之前，该变量都是不可用的
  3. let 不允许重复声明

const

通过const生命的变量将会创建一个对该值的一个只读引用，

而且声明的时候要初始化

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

通过const生命的对象并不是不可变的。但是在很多场景下，比如在函数式编程中，我们希望声明的变量是不可变的，不论其是原始数据类型还是引用数据类型。

  1. const deepFreeze = function(obj) {
  2.     Object.freeze(obj)
  3.     for (const key in obj) {
  4.         if (typeof obj[key] === 'object') deepFreeze(obj[key])
  5.     }
  6.     return obj
  7. }
  8. const foo = deepFreeze({
  9.   a: {b: 'bar'}
  10. })
  11. foo.a.b = 'zar'
  12. console.log(foo.a.b) // bar

最佳实践

但是，当很多开发者开始将自己的项目迁移到ECMAScript2015后，他们发现，最佳实践应该是，尽可能的使用const,在const不能够满足需求的时候才使用let，永远不要使用var。为什么要尽可能的使用const呢？在JavaScript中，很多bug都是因为无意的改变了某值或者对象而导致的，通过尽可能使用const，或者上面的deepFreeze能够很好地规避这些bug的出现，而我的建议是：如果你喜欢函数式编程，永远不改变已经声明的对象，而是生成一个新的对象，那么对于你来说，const就完全够用了。