理解JavaScript闭包
闭包是Javascript中的一个重要概念。对于初学者来说，闭包是一个特别抽象的概念，尤其是ECMAScript规范给出的定义。没有实践经验，很难从定义上理解。所以，本文不会在大空间描述闭包的概念，而是直接去干货，这样分分钟就能理解闭包！
闭包，一睹为快
当我接触到一项新技术时，我会做的第一件事就是找到它的演示。对我们来说，看代码比看自然语言更能理解事物的本质。事实上，闭包无处不在。例如，jQuery和zepto的核心代码都包含在一个大闭包中，所以我先写最简单最原始的闭包，这样就可以在脑海中生成闭包的画面：
函数A(){ 0
函数B(){ 0
控制台日志('你好，结束！');
}
返回B；
}
var C=A()；
c()；//你好闭包！
这是最简单的结束。
有了初步的了解，我们来简单分析一下它和普通函数的区别。上述代码被翻译成自然语言如下：
定义普通函数a。
定义a中的普通函数B。
在甲中返回乙
执行A，A的返回结果赋给变量c。
执行c
将这五个步骤总结成一句话：
函数A的内部函数B被函数A外的一个变量 c 引用。
处理完这句话，就变成了闭包的定义：
当一个内部函数被其外部函数之外的变量引用时，就形成了一个闭包。
因此，当您执行上述五个步骤时，您已经定义了一个闭包！
这就是结局。
闭包的用途
在了解闭包的功能之前，我们先来看看Javascript中的GC机制：
在 Javascript 中，如果一个对象不再被引用，那么这个对象就会被 GC 回收，否则这个对象一直会保存在内存中。
在上面的例子中，B是在A中定义的，所以B依赖于A，外部变量C引用B，所以A被C间接引用。
也就是说，A不会被GC回收，而是一直存储在内存中。为了证明我们的推理，上面的例子略有改进：
函数A(){ 0
var计数=0；
函数B(){ 0
计数；
console.log(计数)；
}
返回B；
}
var C=A()；
c()；//1
c()；//2
c()；//3
Count是函数A中的一个变量，它的值在函数B中是变化的，每次执行函数B时，count的值都会增加1。因此，函数A中的计数变量将始终存储在内存中。
当我们需要在模块中定义一些变量，并希望这些变量始终存储在内存中而不会“污染”全局变量时，我们可以使用闭包来定义模块。
闭包的高级写法
上面的编写方法其实是最原始的编写方法，但是在实际应用中，闭包和匿名函数会一起使用。下面是一种常见的闭包编写方法：
(功能(文档){ 0
var视口；
var obj={
init:函数(id){ 0
viewport=document . queryselector(' # ' id)；
},
addChild:函数(子){ 0
viewport.appendChild(子级)；
},
removeChild:函数(子){ 0
viewport.removeChild(子级)；
}
}
window.jView=obj
})(文档)；
该组件的功能是初始化一个容器，然后向容器中添加子容器或移除容器。
函数非常简单，但是这里涉及到另一个概念：立即执行函数。只是简单了解一下。需要着重了解的是这种写法是如何实现闭包功能的。
您可以将上面的代码分成两部分：(function(){})和,().
第一个()是一个表达式，表达式本身是一个匿名函数，所以在表达式后面加上()就意味着执行匿名函数。
因此，这段代码的执行过程可以分解如下
var f=函数(文档){ 0
var视口；
var obj={
init:函数(id){ 0
viewport=document . queryselector(' # ' id)；
},
addChild:函数(子){ 0
viewport.appendChild(子级)；
},
removeChild:函数(子){ 0
viewport.removeChild(子级)；
}
}
window.jView=obj
};
f(文件)；
在这段代码中，似乎看到了闭包的影子，但是f中没有返回值，似乎没有闭包的条件。请注意以下代码：
window.jView=obj
Obj是函数f中定义的对象，在这个对象中定义了一系列的方法。执行window.jView=obj意味着在window全局对象中定义一个变量jView，并将这个变量指向obj对象。也就是说，全局变量jView指的是obj。而obj对象中的函数引用了函数F中的变量viewport，因此函数F中的viewport不会被GC回收，而是一直保存在内存中，所以这种编写方法满足闭包的条件。
总结
这是对闭包最简单的理解。当然，闭包有更深的理解，这涉及很多。你需要知道JS的执行环境(执行上下文)、激活对象(激活对象)、作用域以及作用域链的运行机制。但是作为初学者，暂时不需要知道这个。简单了解后，一定要在实际项目中使用。当您更多地使用它时，您自然会对闭包有更深的理解！
内容来源网络，如有侵权，联系删除，本文地址：https://www.230890.com/zhan/145052.html