乐趣区

关于前端:day11-通过JS引擎的堆栈了解闭包原理

jiezi

动态和动静作用域
动态作用域，取决于变量和函数在何处申明，这里你能够设想成它的“出生地”，并在它执行之前就曾经确定了。所以动态作用域又被称为词法作用域（lexical scope），因为函数的“出生地”是在词法剖析时“注销”的。
动静作用域下，函数的作用域是在函数调用的时候才决定的。所以取决于在何处调用，这里你能够设想成它的“居住地”，这个是能够先天批改的。
JavaScript 代码，通常是通过前端浏览器编译后运行的，这个过程是先编译、后执行。所以 JavaScript 代码的作用域是在编译过程中通过剖析它在何处申明来确定的，属于动态（词法）作用域。
作用域：代码编译

栈是线性间断的数据结构的存储空间，外面次要存有 JavaScript 原始数据类型以及对象等简单数据类型的地址。除此之外还有函数的执行状态和 this 值。堆是树形非间断的数据结构的存储空间，外面存储了对象、数组、函数等简单数据类型，还有零碎内置的 window 和 document 对象。
上面通过一段代码，咱们再来看下从词法到语法分析的过程。var base = 0;

var scope = "global";
function addOne () {
    var base = 1;
    return base +1;
}

function displayVal () {
    var base = 2;
    var scope = "local"
    increment = addOne();
    return base + increment;
}

分词或词法剖析（tokenizing/lexing）的过程。在这个过程中，比方 var base = 0 会被分为 var 变量、base、赋值表白、数字常量 0。词法作用域指的就是拆分成词法标记时这段代码所在的作用域。如下图红色虚线框局部所示：

在词法拆分之后，在下一步的解析（parsing）动作中，下面一段段的代码会被转换成一个形象语法树（AST, Abstract Syntax Tree），这就到了语法分析。

依据流程图中的红色虚线框局部所示，在词法剖析后，JavaScript 引擎会在做语法分析的同时，更新全局作用域和创立部分作用域。

在作用域创立后，下面的代码就会变为中间代码，V8 会混合应用编译器和解释器技术的双轮驱动设计实时编译（JIT Just in Time），这个双轮的一个轮子是间接执行，另一个发现热点代码会优化成机器码再执行，这样做的目标是为了性能的衡量和晋升。
咱们形象总结一下。这里咱们从空间角度理解到，函数在创立伊始是寄存在堆空间中的，并且通过栈空间中的地址来查找。咱们通过编译的过程，理解了作用域在代码未执行的解析阶段就实现了。
生命周期：代码执行
咱们就来看看在代码执行的阶段，一个函数从调用到完结的过程，也就是它的生命周期。

函数的生命周期
在 JavaScript 执行的时候，全局执行上下文会在一个相似栈的数据结构外面，依据函数调用链顺次执行，所以又称为调用栈。

一开始，base、scope、addOne、displayVal 都会被记录在变量环境。可执行的代码蕴含了 base 和 scope 的赋值，还有 displayVal() 函数的调用。当赋值完结就会执行 displayVal 函数。

在执行 displayVal 函数的时候，displayVal 函数相干的全局上下文就会被压入栈内，因为 base 和 scope 都有函数内申明，所以它们在函数内也会有变量晋升到 increment 的下面。作为可执行代码，实现 base 和 scope 的赋值。上面执行 addOne 函数的调用。

再前面，须要持续将 addOne 压入栈内，base 变量再次赋值，而后执行返回 base+1 的后果。在此当前，函数 addOne 的上下文会从栈里弹出，作为值返回到 displayVal 函数。

在最初的运行步骤里，displayVal 的 increment 会被赋值为 2，之后函数会返回 2+2 的值，为 4。之后 displayVal 的函数执行上下文也会被弹出，栈中将只剩下全局的执行上下文。addOne 和 displayVal 这两个函数的生命周期就随着执行的完结而完结了，并且会在之后的垃圾回收过程中被回收。

执行时变量查找
以 var base = 0 为例，在下图的右边，咱们能够看到当编译器遇到 var base 的时候，会问作用域这个 base 是否曾经存在，如果是的话，会疏忽这个申明；如果 base 不存在，则会让作用域创立一个新变量 base，之后会让引擎解决 base=2 的赋值。
在以后执行的作用域当中有没有 base 这个变量，如果有的话，执行赋值，否则会持续寻找，始终到找到为止。

如果引擎在以后执行作用域找不到相干变量，会始终找或返回报错。“始终找”：从内往当地找。

IIFE：利用作用域封装
块级作用域和函数级作用域都能够帮忙咱们对代码进行封装，控制代码的可见性。
带来的两个问题：
第一个是如果咱们以申明式函数为目标来做封装的话，它会间接地创立 foo 这个函数，会对全局作用域造成净化；
第二个问题是咱们须要通过一个 foo() 来对它进行调用，解决这个问题的方法就是应用一个立即调用的函数表白（IIFE，immediately invoked function expression）。

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

闭包：冲破作用域限度
使用了函数的 3 个特点：
在函数外部生成了一个部分的变量 i；
嵌入了 increment 和 getValue 这两个函数办法；
把函数作为返回值用 return 来返回。

function createCounter(){
    let i=0;
    function increment(){i++;}  
 
    function getValue(){return i;}
    return {increment,getValue}
}

const counter = createCounter();

思考到性能、内存和执行速度，当应用闭包的时候，尽量应用本地而不要用全局变量。
晋升问题和解决办法

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

函数晋升的只是申明式函数，而表达式函数则和变量赋值一样，不会被晋升。
ES6 块级作用域 let 和 const，这两个变量和常量就是块级作用域的变量，它们不会被晋升。

{console.log(base); // ReferenceError!
    let base = 0;
}
var base = 1;
if (base) {
    let count = base * 2;
    console.log(count);
}
console.log(count); // ReferenceError
退出移动版