你不知道的JavaScript上卷之做用域与闭包·读书笔记

date: 16.12.8 Thursday

第一章 做用域是什么

LHS：赋值操做的目标是谁？
好比：

a = 2;

RHS：谁是赋值操做的源头？
好比：

console.log(2);

做用域嵌套：遍历嵌套做用域链的规则：引擎从当前的执行做用域开始查找变量，若是找不到，就向上一级继续查找。当抵达最外层的全局做用域时，不管是否找到都会中止。
异常：为何区分LHS和RHS是一件重要的事情？
若是RHS查询在全部嵌套的做用域中遍寻不到所需的变量，引擎就会抛出ReferenceError异常。
当引擎在执行LHS查询时，若是在顶层做用域也没法找到目标变量，全局做用域就会建立一个具备该名称的变量，并将其返回给引擎。（非严格模式下）
若是RHS查询找到了一个变量，但你尝试对这个变量的值进行不合理的操做，好比试图对一个非函数类型的值进行函数调用，或者引用null或undefined类型的值中的属性，引擎会抛出TypeError.
ReferenceError同做用域判别失败相关，TypeError则表明做用域判别成功但对结果的操做是非法或不合理的。

第二章 词法做用域

• 词法做用域

词法做用域就是定义在词法阶段的做用域。词法做用域是由你在写代码时将变量和块做用域写在哪里来决定的，所以当词法分析器处理代码时会保持做用域不变。
做用域查找会在找到第一个匹配的标识符时中止：遮蔽效应。（全局变量可使用window.a来访问）

• 欺骗词法

eval()：能够对一段包含一个或多个声明的代码字符串进行演算，并借此来修改已经存在的词法做用域（在运行时）

function foo(str, a){
  eval( str );
  console.log(a,b);
}
var b = 2
foo("var b = 3;",1); //1,3

with关键字：本质上是用过讲一个对象的引用看成做用域来处理，将对象的属性看成做用域中的标识符来处理，从而建立了一个新的词法做用域。

function foo(obj) {
  with (obj) {
    a = 2;
  }
}

var o1 = {
  a:3
};
var o2 = {
  b:3
};

foo(o1);
console.log( o1.a ); //2

foo(o2);
console.log( o2.a ); // undefined
console.log(a); //2---很差，a被泄露到全局做用域上了。

第三章 函数做用域和块做用域

函数做用域的含义指，属于这个函数的所有变量均可以在整个函数的范围内使用及复用。
规避冲突：

function foo() {
  function bar(a) {
    i = 3;  //不当心懂了for循环所属做用域中的i
    console.log( a + i );
  }

  for (var i=0; i<10; i++) {
    bar( i*2 ); //进入死循环。
  }
}
foo();

• 全局命名空间：当程序加载了多个第三方库时，若是他们没有妥善的将内部私有的函数或变量隐藏起来，就很容易产生冲突。

• 模块管理

为了避免污染做用域，可使用包装函数来解决这个问题。包装函数的声明以(function.. 开始。包装函数会自动运行，是一个表达式。
IIFE:当即执行函数表达式(Immediately Invoked Function Expression)

var a = 2;
(function foo(){
  var a = 3;
  console.log(a); //3
  })();    //防止了foo这个名称污染了做用域

console.log(a); //2

匿名函数表达式的利弊

setTimeout( function() {
  console.log("+1s,WTF!")
  },100);

行内函数表达式

setTimeout( function haveName() {
  console.log("+1s,WTF!")
  },100);

块做用域：几乎形同虚设，只能靠开发者自觉了。在块做用域内声明的变量都会属于外部做用域。表面上看如此，但若是深刻探究。
用with从对象中建立出的做用域仅在with声明中而非外部做用域中有效。
try/catch的catch分句会建立一个块做用域，其声明的变量仅在catch中有效。
let关键字能够将变量绑定到所在的任意做用域中。let声明附属于一个新的做用域而不是当前的函数做用域（也不属于全局做用域）。

var foo = true;

if (foo) {
  let bar = foo * 2;
  bar = something(bar);
  console.log(bar);
}

console.log(bar); //ReferenceError

第四章 提高

先有鸡仍是先有蛋的问题：
Demo1:

a = 2;
var a;
console.log(a); //2

Demo2:

console.log(a); //undefined
var a = 2;

事实是先有蛋（声明）后有鸡（赋值）。实际处理以下：
demo1实际：

var a;
a = 2;
console.log(a);

demo2实际：

var a;
console.log(a);
a = 2;

只有声明自己会被提高，而赋值或者其余运行逻辑会留在本地。

foo(); //TypeError
var foo = function bar() {
  // ...
};

demo3:

foo(); // TypeError
bar(); //ReferenceError

var foo = function bar(){
  // ...
}

上述代码提高后实际理解形式：

var foo;
foo();
bar();

foo = function() {
  var bar = ..self..
  //...
}

提高过程函数优先，而后才是变量：

foo(); //1
var foo;
function foo() {
  console.log(1);
}
foo = function() {
  console.log(2);
}

上述代码会被理解成如下形式：

function foo() {
  console.log(1);
}
foo();
foo = function() {
  console.log(2);
};

尽管var foo出如今function foo()以前，但它是重复的声明，所以被忽略。由于函数声明会被提高到普通变量以前。
声明自己会被提高，但包括函数表达式的赋值在内的赋值操做并不会提高。

第五章 做用域闭包

当函数能够记住并访问所在的词法做用域时，就产生了闭包，即便函数是在当前词法做用域以外进行。

function foo() {
  var a = 2;

  function bar() {
    console.log(a);
  }

  return bar;
}
var baz = foo();
baz(); //2 这就是闭包的效果

函数bar()词法做用域可以访问foo()的内部做用域。而后咱们将bar()函数自己看成一个值类型进行传递。咱们将bar所引用的函数对象自己看成返回值。
在foo()执行后，其返回值赋值给变量baz并调用baz()，其实是经过不一样的标识符引用调用了内部的函数bar()。
bar()显然能够被正常执行。但在这个例子中，它在本身定义的词法做用域之外的地方执行。
在foo()执行后，一般会期待foo()的整个内部做用域都被销毁，由于引擎有垃圾回收器用来释放再也不使用的内存空间。因为foo()的内容不会再被使用，因此会被回收。
而闭包的神奇做用是阻止此事发生。事实上内部做用域依旧存在，由于bar()自己在使用。
拜bar()所声明的位置所赐，它拥有涵盖foo()内部做用域的闭包，使得该做用域可以一直存活，以供bar()在以后任什么时候间进行引用。
bar()依然持有对该做用域的引用，而这个引用就叫作闭包。

固然，不管使用何种方式对函数类型的值进行传递，当函数在别处被调用时均可以观察到闭包。

var fn;

function foo() {
  var a = 2;
  function baz() {
    console.log(a);
  }
  fn = baz; //将baz分配给全局变量
}

function bar() {
  fn();
}
foo();
bar(); //2

不管经过何种手段将内部函数传递到所在的词法做用域外，它都会持有对原始定义做用域的引用，不管在何处执行这个函数都会使用闭包。
本质上不管什么时候何地。若是将函数（访问它们各自的词法做用域）看成第一级的值类型并处处传递，你就会看到闭包在这类函数中的应用。（好比使用了回调函数）

for (var i=1; i<=5; i++) {
  setTimeout(function timer() {
    console.log(i);
    }, i*1000);
}

咱们预期上述代码依次输出1,2,3,4,5。实际会输出五次6。由于输出显示的是循环结束时i的值。
由于延迟函数的回调会在循环结束后才执行。根据做用域的工做原理，实际状况是尽管循环中的五个函数是在各个迭代中分别定义的，可是它们都被封闭在一个共享的全局做用域中，所以实际上只有一个i.

修改以下：

for (var i=1; i<=5; i++) {
  (function(j) {
    setTimeout( function timer() {
      console.log(j);
      }, j*1000);
    })(i);
}

再迭代中使用IIFE会为每一个迭代都生成一个新的做用域，使得延迟函数的回调能够将新的做用域封闭在每一个迭代内部，每一个迭代中都会含有一个具备正确值的变量供咱们访问。
将块做用域和闭包联手后：

for (let i=1; i<=5; i++) {
  setTimeout( function timer() {
    console.log(i);
    }, i*1000);
}

模块也是利用闭包的一个好方法：

function CoolModule() {
  var something = 'cool';
  var another = [1,2,3];

  function doSomething() {
    console.log( something );
  }

  function doAnother() {
    console.log( another.join("!"));
  }
  return {
    doSomething: doSomething,
    doAnother: doAnother
  };
}

var foo = CoolModule();

foo.doSomething(); //cool
foo.doAnother(); //1!2!3

这就是JavaScript中最经常使用的模块，doSomething()和doAnother()函数具备涵盖模块实例内部做用域的闭包。
总结一下，模块模式须要两个必要条件：
1.必须有外部的封闭函数，该函数必须至少被调用一次（每次调用都会建立一个新的模块实例）。
2.封闭函数必须返回至少一个内部函数，这样内部函数才能在私有做用域中造成闭包，而且能够访问或者修改私有的状态。
也能够用单例模式来实现，这种状况适用于只须要一个实例的情景：

var foo = (function CoolModule() {
  var something = 'cool';
  var another = [1,2,3];

  function doSomething() {
    console.log( something );
  }

  function doAnother() {
    console.log( another.join("!"));
  }
  return {
    doSomething: doSomething,
    doAnother: doAnother
  };
})();
foo.doSomething();
foo.doAnother();

模块模式也能够接受参数，再也不赘述。

最后总结一下闭包：
当函数能够记住并访问所在的词法做用域，即便函数是在当前词法做用域以外执行，这是就产生了闭包。

附录A 动态做用域

JavaScript并不具备动态做用域，它只有词法做用域。

function foo() {
  console.log(a);
}
function bar() {
  var a = 3;
  foo();
}

var a = 2;

bar();

实际上上述代码输出2，由于词法做用域让foo()中的a经过RHS引用到了全局做用域中的a,所以会输出2.若是JavaScript有动态做用域，那么会输出3，可是JavaScript并无动态做用域。

---

第一部分完 感谢做者Kyle Simpson和译者赵望野，感谢自由和开源世界