本文是我学习《你所不晓得的javaScript上卷》的读书笔记的整顿。

更多具体内容，请微信搜寻“前端爱好者“， 戳我 查看 。

作用域和闭包

作用域是什么

javaScript工作原理中的角色

  • 引擎 - 从头到尾负责整个javascript程序的编译及执行过程
  • 编译器 - 负责语法分析及代码生成
  • 作用域 - 负责收集并保护所有申明的标识符组成的一系列查问，并施行一套严格的规定，确定以后执行的代码对这些标识符的拜访权限

作用域类型

作用域类型

  • 词法作用域（javaScript所采纳的作用域模型），词法作用域的最重要特色是他的定义过程产生在代码的书写阶段（如果你没有应用eval和with）。
  • 动静作用域 作用域作为一个在运行时就被动静确定的模式。（一些动静编程语言仍在应用如bash脚本、perl中的一些模式等）

事实上大部分语言都是基于词法作用域。

词法作用域

词法作用域是一套对于引擎如何寻找变量以及会在何处找到变量的规定。

exam:

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

剖析:
词法作用域让foo()中的a通过 RHS 援用到了全局作用域中的a，因而会输入2。

而动静作用域并不关怀函数和作用域是如何申明以及在何处申明的，只关怀它们从何处调用。换句话说，

动静作用域作用域链是基于调用栈的，而不是代码中的作用域嵌套。

因而，如果 JavaScript 具备动静作用域，实践上，上面代码中的foo()在执行时将会输入3。

function foo() {      console.log( a ); // 3（不是2！）  }   function bar() {          var a = 3;          foo();  }  var a = 2;  bar();

因为当foo()无奈找到a的变量援用时，会顺着调用栈在调用foo()的中央查找a，而不是在嵌套的词法作用域链中向上查找。

因为foo()是在bar()中调用的，引擎会查看bar()的作用域，并在其中找到值为3的变量a。

须要明确的是，事实上 JavaScript 并不具备动静作用域。它只有词法作用域，简单明了。
然而this机制某种程度上很像动静作用域。

二者区别

词法作用域是在写代码或者说定义时确定的，
而动静作用域是在运行时确定的。（this也是！）词法作用域关注函数在何处申明，而动静作用域关注函数从何处调用。

eval、with

eval() 函数会将传入的字符串当做 JavaScript 代码进行执行。

词法作用域
词法作用域类别
  • 函数作用域
  • 全局作用域
函数作用域

  • 函数表达式VS函数申明

    函数表达式

    function 关键字能够用来在一个表达式中定义一个函数。

      let function_expression = function [name]([param1[, param2[, ..., paramN]]]) {   statements    };

    函数申明

    函数申明定义一个具备指定参数的函数。

      function name([param,[, param,[..., param]]]) {    [statements]    }

    辨别函数申明和表达式最简略的办法是

看function关键字呈现在申明中的地位（不仅仅是一行代码，而是整个申明中的地位）。

如果function是申明中的第一个词，那么就是一个函数申明，否则就是一个函数表达式。

函数表达式能够是匿名的，而函数申明则不能够省略函数名——在 JavaScript 的语法中这是非法的。

块级作用域
  • let

  • const

    let

    let 语句申明一个块级作用域的本地变量，并且可选的将其初始化为一个值。

let个性：

  • 作用域规定 -- 块级作用域
  • 暂时性死区 （在雷同的函数或块作用域内从新申明同一个变量会引发SyntaxError。）
  • 不存在变量晋升

const

常量是块级作用域，很像应用 let 语句定义的变量。常量的值不能通过从新赋值来扭转，并且不能从新申明。
函数作用域和块作用域的行为是一样的：任何申明在某个作用域内的变量，都将从属于这个作用域。

变量

变量的生命周期

当引擎应用变量时，它们的生命周期蕴含以下阶段：

  • 申明阶段（Declaration Phase） 这一阶段在作用域中注册了一个变量。
  • 初始化阶段（Initialization Phase） 这一阶段调配了内存并在作用域中让内存与变量建设了一个绑定。在这一步变量会被主动初始化为 undefined 。
  • 赋值阶段（Assignment Phase） 这一阶段为初始化变量调配具体的一个值。
留神，依照变量的生命周期过程，申明阶段与咱们通常所说的变量申明是不同的术语。

简略来讲，引擎解决变量申明须要通过残缺的这 3 个阶段：申明阶段，初始化阶段和赋值阶段。

  • var 变量的生命周期

假如一个场景，当 JavaScript 遇到了一个函数作用域，其中蕴含了 var variable 的语句。

则在任何语句执行之前，这个变量在作用域的结尾就通过了申明阶段并马上来到了初始化阶段（步骤一）。

同时 var variable 在函数作用域中的地位并不会影响它的申明和初始化阶段的进行。

在申明和初始化阶段之后，赋值阶段之前，变量的值便是 undefined 并曾经能够被应用了。

在赋值阶段 variable = 'value'语句使变量承受了它的初始化值（步骤二）。

这里的变量晋升严格的说是指变量在函数作用域的开始地位就实现了申明和初始化阶段。在这里这两个阶段之间并没有任何的间隙。

让咱们参考一个示例来钻研。上面的代码创立了一个蕴含 var 语句的函数作用域：

  function multiplyByTen(number) {      console.log(ten); // => undefined      var ten;      ten = 10;      console.log(ten); // => 10     return number * ten;    }   multiplyByTen(4); // => 40

当 JavaScript 开始执行 multipleByTen(4) 时进入了函数作用域中，变量 ten 在第一个语句之前就通过了申明和初始化阶段，所以当调用 console.log(ten) 时打印为 undefined。

当语句 ten = 10 为变量赋值了初始化值。在赋值后，语句 console.log(ten) 打印了正确的 10 值。

  • 函数申明的生命周期

    对于一个 函数申明语句function funName() {...} 那就更简略了。

    申明、初始化和赋值阶段在关闭的函数作用域的结尾便立即进行（只有一步）。 funName() 能够在作用域中的任意地位被调用，这与其申明语句所在的地位无关（它甚至能够被放在程序的最底部）。

    function sumArray(array) {  return array.reduce(sum);  function sum(a, b) {    return a + b;  }  }  sumArray([5, 10, 8]); // => 23

    当 JavaScript 执行 sumArray([5, 10, 8]) 时，它便进入了 sumArray 的函数作用域。在作用域内，任何语句执行之前的霎时，sum 就通过了所有的三个阶段：申明，初始化和赋值阶段。

    这样 array.reduce(sum) 即便在它的申明语句 function sum(a, b) {...}之前也能够应用 sum。

  • let 变量的生命周期

    let 变量的解决形式不同于 var。

    次要辨别点在于let申明和初始化阶段是离开的。

    当初让咱们钻研这样一个场景，当解释器进入了一个蕴含 let variable语句的块级作用域中。这个变量立刻通过了申明阶段，并在作用域内注册了它的名称（步骤一）。

    而后解释器持续逐行解析块语句。

    这时如果你在这个阶段尝试拜访 variable，JavaScript 将会抛出 ReferenceError: variable is not defined。因为这个变量的状态仍然是未初始化的。

    此时 variable 处于长期死区中。

    当解释器达到语句 let variable 时，此时变量通过了初始化阶段（步骤二）。当初变量状态是初始化的并且拜访它的值是 undefined。

    同时变量在此时也来到了长期死区。

    之后当达到赋值语句 variable = 'value'时，变量通过了赋值阶段（步骤三）。

    如果 JavaScript 遇到这样的语句 let variable = 'value' ，那么变量会在这一条语句中同时通过初始化和赋值阶段。

    让咱们持续看一个示例。这里 let 变量 number 被创立在了一个块级作用域中：

let condition = true;   if (condition) {    // console.log(number); // => Throws ReferenceError    let number;   console.log(number); // => undefined   number = 5;    console.log(number); // => 5  }

当 JavaScript 进入 if (condition) {...} 块级作用域中，number 立刻通过了申明阶段。

因为 number 尚未初始化并且处于长期死区，此时试图拜访该变量会抛出 ReferenceError: number is not defined.

之后语句 let number 使其得以初始化。当初变量能够被拜访，但它的值是 undefined。

之后赋值语句 number = 5 当然也使变量通过了赋值阶段。

const 和 class 类型与 let 有着雷同的生命周期，除了它们的赋值语句只会产生一次。

如上所述，变量晋升是变量的耦合申明并且在作用域的顶部实现初始化。

然而 let 生命周期中将申明和初始化阶段解耦。这一解耦使 let 的变量晋升景象隐没。

因为两个阶段之间的间隙创立了长期死区，在此时变量无奈被拜访。

这就像科幻的格调一样，在 let 生命周期中因为变量晋升生效所以产生了长期死区。

  • ** 为什么变量晋升在 let 的生命周期中有效**

var和let 的区别

变量赋值操作

变量赋值操作执行两个操作：

  1. 编译器在以后作用域申明一个变量（如果变量之前没有申明）
  2. 在运行时引擎会在作用域中查找该变量，如果能找到就赋值操作。
留神辨别变量申明和变量初始化

LHS查问 与 RHS查问

  • LHS查问 - 当变量呈现在赋值操作的左侧时进行LHS查问，“赋值操作的指标是谁”，例如：var a = 2;
  • RHS查问 - 当变量呈现在赋值操作的右侧时进行RHS查问，“谁是赋值操作的源头”，console.log(a)
异样

  • ReferenceError（援用谬误） 对象 ： 表明一个不存在的变量被援用。

    如果RHS查问在作用域链中找不到所须要的变量时候触发。

  • TypeError（类型谬误） 对象 ：用来示意值的类型非预期类型时产生的谬误。
    如果RHS查问在作用域链中找到了变量，然而你对这个变量值进行不合理的操作时候触发。

变量晋升

变量申明遵循以下规定：

  1. 包含变量和函数在内的所有申明都会在任何代码被执行前首先被解决。
  2. 有申明自身会被晋升，而赋值或其余运行逻辑会留在原地。如果晋升扭转了代码执行的程序，会造成十分重大的毁坏。
  3. 函数申明和变量申明都会被晋升,函数会首先被晋升，而后才是变量。

  4. 函数申明会被晋升，然而函数表达式却不会被晋升。

    例如：

foo(); // 不是ReferenceError, 而是TypeError!  var foo = function bar() {   // ...  };
例如：var a = 2; 但 JavaScript 实际上会将其看成两个申明：var a; 和a = 2;。第一个定义申明是在编译阶段进行的。第二个赋值申明会被留在原地期待执行阶段。

闭包

 function f1(){   　var n=999;   　nAdd=function(){       n+=1     }       function f2(){   　　alert(n);   　}   　return f2;  }  var result=f1();  result(); // 999  nAdd();  result(); // 1000

学习Javascript闭包（Closure）

闭包就是可能读取其余函数外部变量的函数。

因为在Javascript语言中，只有函数外部的子函数能力读取局部变量，因而能够把闭包简略了解成"定义在一个函数外部的函数"。

所以，在实质上，闭包就是将函数外部和函数内部连接起来的一座桥梁。

留神点：
  • 无论通过何种伎俩将外部函数传递到所在的词法作用域以外，它都会持有对原始定义作用域的援用，无论在何处执行这个函数都会应用闭包。
  • 在定时器、事件监听器、
    Ajax 申请、跨窗口通信、Web Workers 或者任何其余的异步（或者同步）工作中，只有应用了回调函数，实际上就是在应用闭包！
  • 只管 IIFE 自身并不是察看闭包的失当例子，但它确实创立了闭包，并且也是最罕用来创立能够被关闭起来的闭包的工具。

总结

本文次要讲了三局部内容：

  • 作用域、作用域类型等
  • 变量生命周期（感觉重要）
  • 变量晋升
  • 闭包（没有开展说）

参考文档

  • 学习Javascript闭包（Closure）
  • JavaScript 变量的生命周期：为什么 let 不存在变量晋升
  • 《你所不晓得的javaScript上卷》