JavaScript与jQuery闭包机制详解

JavaScript闭包基础概念

由于JavaScript在日常开发中使用频率极高，理解其核心概念显得尤为重要。

JavaScript中的闭包概念并不复杂，其本质在于函数能够访问其外部作用域的变量，而无需通过参数传递即可直接获取这些值。

以下通过具体代码示例进行说明：

 
<script>
var sMessage = "Hello world";
function sayHello(){
alert(sMessage);
} 
sayHello();
addNumber(1,2);
var iBaseNum = 10;
function addNumber(iNum1, iNum2) {
function doAddition() {
alert(iNum1 + iNum2 + iBaseNum);
} 
return doAddition();
} 
function a(){
var i=0;
function b(){
alert(++i);
} 
return b;
} 
var c = a();
c();
c();
</script>

第一个示例中，函数sayHello未接收任何参数，却直接使用了外部变量sMessage，这就是典型的闭包应用。

第二个示例相对复杂，内部函数doAddition同样构成了闭包，它无需接收参数，即可在执行环境中直接访问局部变量iNum1、iNum2以及外部变量iBaseNum。

第三个示例展示了闭包保护变量i访问权限的能力，并使其在内存中持续存在，从而实现计数器功能的无限累加。这是闭包的一个经典应用场景。

jQuery中的闭包应用

jQuery中的闭包用法与JavaScript基础类似，下面通过一个具体例子进行说明。

读者可能会对此写法产生疑问：

 
(function($){
$("div p").click(function(){alert("cssrain!")});
})(jQuery); //一个闭包

这种写法的具体含义是什么？

起初我也对此感到困惑，经过请教他人后才逐渐理解。

这里的$仅作为形参存在，而jQuery是全局变量。因此，该函数无需显式调用即可自动执行，或者可以将其拆分为两步来理解。

即将其还原为标准的函数定义与调用形式：先定义函数，再执行调用。

具体表现如下所示：

实际上：

 
(function($){
$("div p").click(。。。);
})(jQuery);

等同于以下标准写法：

 
function tempFunction($){ //创建一个以$为形参的函数
$("div p").click(....);
} 
TempFunction(jQuery); //传入实参jQuery执行函数.

为了简化，也可以直接采用如下写法：

 
(function(cssrain){
cssrain("div p").click(.... );
})(jQuery); //一个闭包

立即执行函数与闭包优势

闭包的基本结构写法为：

(function(){do someting})();

可以将其理解为定义一个匿名函数并立即执行。

若需要传递参数，则写法如下：

(function(形参){do someting})(实参);

此外，

(function(){var upc="i am upc"})();

alert(upc);

执行上述代码会提示undefined。

这是因为在闭包内部定义的变量相当于局部变量，外部无法直接访问。

使用闭包的主要优势在于：

避免增加额外的全局变量，

确保执行过程中的所有变量均限制在匿名函数内部。

上述示例可能与纯JavaScript闭包概念存在一定混淆，但这确实是jQuery中常见的一种闭包应用形式，主要经过jQuery框架的封装处理。

如有理解不当之处，欢迎大家讨论。作为初学者，我仍有诸多未掌握的知识领域。