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变量的访问，并且一直保存i在内存中，可以一直增加。（闭包的一个经典用法）

jquery中闭包也差不多，先给个例子

 

你也许会问(function($){

     $("div p").click(function(){alert("cssrain!")});

})(jQuery);            //一个闭包

这是什么写法啊？

别急，我也是请教了upc ，才稍微懂了点。

这里面的$只是形参，但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的加工罢了。

Jquery定义对象（ 闭包）

例一：添加对象的静态属性

声明一个对象$.problemWo，添加一个b的静态属性和myclick的静态方法。

(function ($) {
$.problemWo = function () { };
$.extend($.problemWo,
{ b: 5 },
{ myclick: function () { alert("c") } }
);
})(jQuery);

alert($.problemWo.b);
$.problemWo.myclick();

例二：添加对象的动态属性

声明一个对象$.problemWo，添加一个a的实例属性和myclick的实例方法。

(function ($) {
$.problemWo = function () {
this.a = "abc"
};
$.extend($.problemWo.prototype,
{myclick: function () { alert(this.a); }}
);
})(jQuery);

var obj = new $.problemWo()
obj.myclick();

备注：其中$.problemWo对象 可为任意名称