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

2024年4月29日 180次阅读来源: superPershing

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和译者赵望野，谢谢自在和开源天下

    原文作者：superPershing
    原文地址: https://segmentfault.com/a/1190000008369069
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。

date: 16.12.8 Thursday

第一章 作用域是什么

第二章 词法作用域

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

第四章 提拔

第五章 作用域闭包