深度了解js闭包形成及其原理

看到以上案例，函数包函数，一级一级就构成了作用域链条，在fn4里如果未定义name2，然后去打印它，它会一级一级向上找，找到fn3里面的name2，然后输出’木子’。案例三上是新定义了name2，那么它会就近查找，找到’惠子’然后打印出来

为什么会出现闭包?

说一个我的面试经历吧，我去某大厂面试的时候，面试官问到这个问题，我当时第一反应就是js的闭包是对js函数作用域特性的一种利用，因为函数内定义的局部变量不能被外部直接获取，而函数却可以访问到其外部作用域的变量。

所以我们可以在函数内部定义一个访问局部变量的方法并将之输出给外部。在函数销毁后，通过函数输出的方法访问局部变量成了唯一途径。

回答完之后自己觉得还是挺满意的，然而面试官面无表情。

我灵机一动 又补充道：

通过闭包，我们可以避免全局污染，保护私密数据等等

面试官表情都没动一下，来了一句：这些都不是我想听到的答案，能说的更底层一些么？

闭包形成原理

那么现在面试官肯定是问闭包形成原理了

从谷歌的v8引擎原理(经典的js引擎)说起，它的工作机制:

简单来说，v8引擎的工作分两个阶段，一个是语法检查阶段，一个是运行阶段。

运行阶段又分预解析和执行两个阶段。

在预解析阶段，先创建执行上下文，执行上下文包括变量对象、作用域链和this值。

执行上下文：当代码运行时，会产生一个对应的执行环境，在这个环境中，所有变量会被事先提出来（变量提升），有的直接赋值，有的为默认值 undefined，代码从上往下开始执行，就叫做执行上下文。创建执行上下文后，会对变量对象的属性进行填充。所谓属性，就是var、function声明的标志符及函数形参名，至于属性对应的值：变量值为undefined，函数值为函数定义，形参值为实参，没有传入实参则为undefined。

变量对象VO： var声明的变量、function声明的函数，及当前函数的形参，执行上下文则是先预解析一次。

作用域链：当前变量对象+所有父级作用域 [[scope]]，作用域链其实就是一个变量对象的链，函数的变量对象称之为active object，简称AO。（函数创建后就有静态的[[scope]]属性，直到函数销毁）

this值：在进入执行上下文后不再改变，预解析阶段结束后，进入执行代码阶段，此时执行上下文有个Scope属性(区别于函数的[[scope]]属性)。Scope = 当前AO.concat([[scope]])

js解析器逐行读取并执行代码，变量对象中的属性值可能因赋值语句而改变。当我们查询外部作用域的变量时，其实就是沿着作用域链，依次在这些变量对象里遍历标志符，直到最后的全局变量对象。

[[Scopes]] 作用域属性 作用域属性保存自身作用域变量对象和父级变量对象引用。因此，函数才能访问上级函数得变量 这样就形成了作用域链。

我能访问到 windom的东西，就是因为作用域属性保存了它

试着创建一个闭包

function outer(){

var a1 = 0;

var b1 = 1; //未使用会被垃圾回收机制回收

return function inner(){

return a1;

}

}

function fn5(){

var getInnerData = outer();

console.dir(getInnerData);

}

fn5();

当我们调用一个闭包函数时(比如上面的getInnerDate函数)

因为函数执行时，其上下文有个Scope属性，该属性作为一个作用域链包含有该函数被定义时所有外层的变量对象的引用，

所以定义了闭包的函数虽然销毁了，但是其变量对象依然被绑定在函数inner上，保留在内存中。

看到下图:

Scopes上已经有了一个闭包，保存了a1这个变量，不会被销毁。

Global：运行时和标准共同注入了一堆属性。

再看两个例子:

function fn7() {

var name2 = “小白”; // name 是一个被 fn7 创建的局部变量

function displayName() { // displayName() 是内部函数,一个闭包

console.log(name2); // 使用了父函数中声明的变量

}

displayName();

}

fn7(); //正常打印

function fn8() {

var name3 = “小贱”;

function displayName() {

console.log(name3);

}

return displayName;

}

var myFn8 = fn8();

myFn8();

fn8段代码和之前的 fn7() 示例的效果完全一样。其中的不同 — 也是有意思的地方

内部函数 displayName() 在执行前，被外部函数返回。

第一眼看上去，也许不能直观的看出这段代码能够正常运行。

在一些编程语言中，函数中的局部变量仅在函数的执行期间可用。一旦 fn8() 执行完毕，我们会认为 name3 变量将不能被访问。然而，因为代码运行得没问题，所以很显然在 JavaScript 中并不是这样的。

这个谜题的答案是，JavaScript中的函数会形成闭包。 闭包是由函数以及创建该函数的词法环境组合而成。

这个环境包含了这个闭包创建时所能访问的所有局部变量。在我们的例子中，myFn8 是执行 fn8 时创建的,displayName 函数实例的引用，而 displayName 实例仍可访问其词法作用域中的变量，即可以访问到 name3 。

由此，当 myFn8 被调用时，name3 仍可被访问，其值 name3 就被传递到console中。

闭包小案例二

性能优化

1.webpack打包文件体积过大？（最终打包为一个js文件）

2.如何优化webpack构建的性能

3.移动端的性能优化

4.Vue的SPA 如何优化加载速度

5.移动端300ms延迟

6.页面的重构

所有的知识点都有详细的解答，我整理成了280页PDF《前端校招面试真题精编解析》。