前端知识自检——作用域和闭包

参考链接：https://www.cnblogs.com/penghuwan/p/7404372.html

在《你不知道的JavaScript》中这样写道“对于那些有一点 JavaScript 使用经验但从未真正理解闭包概念的人来说，理解闭包可以看作是某种意义上的重生”。

理解闭包之前先巩固一下作用域和词法作用域的知识
作用域

作用域是一套规则，用于确定再何处以及和如何查找变量的规则

//函数作用域 
function foo() {
	var a = 'iceman';
	console.log(a); // 输出"iceman"
}
foo();
// 全局作用域
// 函数内部如果没有找见就会像上级作用域查找，找到就停止
var b = 'programmer';
function foo() {
	console.log(b); // 输出"programmer"
}
foo();



在查找b变量的时候，先在函数作用域中查找，没有找到，再去全局作用域中查找，有一个往外层查找的过程。很像是顺着一条链条从下往上查找变量，这条链条，我们就称之为作用域链。

词法作用域

词法作用域是作用域的一种工作模型，作用域有两种工作模型，在JavaScript中的词法作用域是比较主流的一种，另一种动态作用域（比较少的语言在用）

词法作用域就是静态作用域
JavaScript 采用的是词法作用域，函数的作用域在函数定义的时候就决定了

var value = 1;
// 此时的foo函数定义在全局，
function foo() {
    console.log(value);
}

function bar() {
    var value = 2;
    foo();
}
bar();  // 结果   1

// 执行 foo 函数，先从 foo 函数内部查找是否有局部变量 value，如果没有，
// 就根据书写的位置，查找上面一层的代码，也就是 value 等于 1，所以结果会打印 1。

在此强调，词法作用域就是作用域是由书写代码时函数声明的位置来决定的。编译阶段就能够知道全部标识符在哪里以及是如何声明的，所以词法作用域是静态的作用域，也就是词法作用域能够预测在执行代码的过程中如何查找标识符。

动态作用域

事实上JavaScript并不具有动态作用域，它只有词法作用域，简单明了，但是this机制某种程度上很像动态作用域

闭包

闭包就是能访问另一个函数作用域中变量的函数（通常是指包含闭包函数的外部函数）

MDN中的定义： 闭包是指能访问那些自由变量的函数

自由变量：是指在函数中使用，既不是函数参数也不是局部局部变量的变量

function test(){
  let a = 11
  return function () {
    console.log(a)
  }
}
let fun = test()
fun()  // 11
// 打印a的匿名函数被包裹在外部函数test中，并且访问了外部函数作用域的变量，因此从定义上说它就是一个闭包

A）函数执行环境、作用域链和变量对象

当某个函数被调用时，会相应的创建一个执行环境及相应的作用域链
每个执行环境都有一个与之关联的变量对象，用来存放环境中定义的所有变量和函数

在函数调用的时候，会创建一个函数的执行环境，这个执行环境有一个与之对应的变量对象和作用域链。

function test () {
// 一段代码静静躺在这里，不会产生执行环境
// 简单的说一个运行中的环境即为执行环境
}

变量对象包括：

每个函数的变量对象保存了它所拥有的的数据，以供函数内部访问和调用（位于执行环境）

1.声明变量
2.声明函数
3.接收参数

function test(data) {
let name = ‘变量’
function testFun () {
console.log(‘函数’)
}
}
test(‘参数’)

// 此时函数运行，产生了执行环境，所对应的变量对象如下：
ExecutionContext = {
variableObject: {
name：‘变量’
testFun： [对函数声明testFun的引用]
arg: ‘参数’
},
this: thisValue,
Scope: [ // Scope chain
// 所有变量对象的列表
]
};

作用域链

通过作用域链，函数能够访问来自上层作用域（执行环境）中的变量

function test () {
var a = 11
function fun () {
console.log(a)
}
fun()
}

test() // 11

作用域链其实就是个从当前函数的变量对象开始，从里到外取出所有变量对象，组成的一个列表。通过这个作用域链列表，就可以实现对上层作用域的访问。

B) 闭包和函数柯里化

在定义一个函数的时候，可能会使用到多层嵌套的闭包，这种用法，叫做“柯里化”。 而闭包柯里化有两大作用：参数累加和延迟调用

function foo (a) {
return function (b) {
return function © {
console.log(a + b + c);
}
}
}
// 调用方式一
foo(‘我’)(‘是’)(‘sun’); // 打印 我是sun
// 调用方式二
let foo1 = foo(‘我’);
let foo2 = foo1(‘是’);
foo2(‘sun’); // 打印 我是sun

最内层的闭包在外层函数foo和foo1调用的时候都没有调用，直到最后得到foo2并调用foo2()的时候，这个最内层的闭包才得到执行， 这也是闭包的一大特性——延迟执行
闭包造成额外的内存占用

函数的变量对象一般在安徽省农户调用结束是被销毁，但是闭包的情况不同

function foo (a) {
    return function () {
        console.log(a)
    }
}
 
let foo1 = foo(1);
let foo2 = foo(2);
let foo3 = foo(3);
foo1();  // 输出1
foo2();  // 输出2
foo3();  // 输出3

foo函数调用结束后， foo函数的变量对象并不会被立即销毁，而是只有当取得foo函数闭包的值的foo1, foo2, foo3调用结束， 这三个函数的变量对象和作用域链被销毁后， foo函数才算“完成任务”，这时，它才能被销毁。

所以说，闭包会造成额外的内存占用

闭包的优点：

方便调用上下文中声明的局部变量
逻辑紧密，可以在一个函数中再创建个函数，避免了传参的问题

闭包的缺点：

因为使用闭包，可以使函数在执行完后不被销毁，保留在内存中，如果大量使用闭包就会造成内存泄露，内存消耗很大
总结：

闭包能够访问外部函数的变量，即使变量已经离开它所创建的环境，是因为外部变量会被闭包的作用域对象所持有。闭包这种特性实现了嵌套函数之间数据的隐式传递。
闭包的应用

function addFn(a,b){
return(function(){
console.log(a+"+"+b);
})
}
let test =addFn(1,2);
setTimeout(test,3000);

一般setTimeout的第一个参数是个函数，但是不能传值。如果想传值进去，可以调用一个函数返回一个内部函数的调用，将内部函数的调用传给setTimeout。内部函数执行所需的参数，外部函数传给他，在setTimeout函数中也可以访问到外部函数。
this的原理

文章链接：http://www.ruanyifeng.com/blog/2018/06/javascript-this.html
理解堆栈溢出和内存泄漏的原理，如何防止

1、内存泄露：是指申请的内存执行完后没有及时的清理或者销毁，占用空闲内存，内存泄露过多的话，就会导致后面的程序申请不到内存。因此内存泄露会导致内部内存溢出

2、堆栈溢出：是指内存空间已经被申请完，没有足够的内存提供了
3、常见的内存泄露的原因：

全局变量引起的内存泄露
闭包
没有被清除的计时器

5、解决方法：

减少不必要的全局变量
减少闭包的使用（因为闭包会导致内存泄露）
避免死循环的发生

如何处理循环的异步操作

先看一下在循环内部出现异步操作引发的问题

fun = () => {
let work = [‘周一移动审批’, ‘周二对接oa’, ‘周三uat’]
work.forEach(item => {
// 这里的service.getList()是引入的一个外部接口文件里面的一个方法，返回一个Promise对象（Es6新特性）
// 是一个异步操作，
service.getList()
.then(()=>{
console.log(item)
// //这时候打印出来的很可能就是周三 uat,周三uat,周三uat （因为异步循环还没有等异步操作返回Promise对象过来item值已经改变）
})
.catch()
})
}

正确处理： 使用关键字async/await

fun = async () => {
let work = [‘周一移动审批’, ‘周二对接oa’, ‘周三uat’]
work.forEach(item => {
await service.getList()
.then(()=>{
console.log(item)
})
.catch()
})
}

async告诉fun方法里面存在异步的操作，await放在具体异步操作（方法）前面，意思是等待该异步返回Promise才会继续后面的操作

另一种递归处理

fun = (i) => {
let work = [‘周一移动审批’, ‘周二对接oa’, ‘周三uat’]
service.getList()
.then(()=>{
if(i < work.length){
console.log(work[i])
i++
fun(i)
}
})
.catch()
}
fun(0)

用递归来实现自我循环（具体循环在then里面，可以确保前面的compute.exec()的异步操作完成）.then()是返回了Promise对象为resolve后才进行的（可以了解一下Promise对象）
模块化方案

1、CommonJS
阮一峰：Javascript模块化编程（一）：模块的写法
2、AMD
阮一峰：Javascript模块化编程（二）：AMD规范
阮一峰：Javascript模块化编程（三）：require.js的用法
3、CMD
4、Es6模块化