[ jQuery ] jquery 闭包浅析!

先看一段PHP代码:

<?php$m = new message();$m->index();class message {//$info = "hello";public function index(){$info = "hello";echo $info;}}?>这样是可以执行的,但是如果使用注释的方式,,那么就会报错。至少是什么都不会输出。

而很神奇的是:

<script type = "text/javascript">var info = "hello";function index(){alert(info);}</script>

这段代码是确实可以执行。这里并没有给index方法给与任何的参数。但是却能输出info的值。这里的index()方法就是一个闭包。

那么jquery 呢?

看下面的方式:

(function($){$("#name")click(function(){alert("hello,are you ok?");});})(jQuery);

这里的 $ 符号只是一个参数,但是jQuery 确实全局的变量,所以不需要调用该函数就会自动执行。

就等于是

function test($){$("#name").click(function(){});}test(jQuery);应该知道在js文件中,直接写在:<script type = "text/javascript"></script>中的代码在文档加载的时候就会执行。

所以这里不需要调用该函数就会自动执行。

首先了解下匿名函数的的概念:

要使用一个函数,我们就得首先声明它的存在。而我们最常用的方式就是使用function语句来定义一个函数,如:

function abc(){ //….}当然,你的函数也可以是带参数的,甚至是带返回值的。function(x,y){alert(x+y);}但是,无论你怎么去定义你的函数,JS解释器都会把它翻译成一个Function对象。例如,你在定义上面的其中一个例子的函数号,再输入如下代码:alert(typeof abc);// "function" Function对象

Function对象是JavaScript里面的固有对象,所有的函数实际上都是一个Function对象。关于这个方面的讨论,我们留到下一个专题节。我们先看看,Function对象能不能直接运用构造函数创建一个新的函数呢?答案是肯定的。例如:

var abc = new Function("x","y","return x*y;");alert(abc(2,3)); // "6"相信大家现在对如何声明一个函数应该是有所了解了。那么什么才是匿名函数呢?

声明匿名函数

顾名思义,匿名函数就是没有实际名字的函数。例如,我们把上面的例子中,函数的名字去掉,再判断一下他是不是一个函数:

alert(typeof function(){});// "function"alert(typeof function(x,y){return x+y;});// "function"alert(typeof new Function("x","y","return x*y;"))// "function"我们可以很容易地看到,它们全都是Function对象,换言之,他们都是函数,但是他们都有一个特点——没有名字。所以我们把他们称作“匿名函数”。然而,正因为他们没有“名字”,我们也没有办法找到他们。这就引申了如何去调用一个匿名函数的问题了。

匿名函数的调用

要调用一个函数,我们必须要有方法定位它,引用它。所以,我们会需要帮它找一个名字。例如:

var abc=function(x,y){ return x+y;}alert(abc(2,3)); // "5"

上面的操作其实就等于换个方式去定义函数,这种用法是我们比较频繁遇到的。例如我们在设定一个DOM元素事件处理函数的时候,我们通常都不会为他们定名字,而是赋予它的对应事件引用一个匿名函数。

  对匿名函数的调用其实还有一种做法,也就是我们看到的jQuery片段——使用()将匿名函数括起来,然后后面再加一对小括号(包含参数列表)。我们再看一下以下例子:

alert((function(x,y){return x+y;})(2,3));// "5"alert((new Function("x","y","return x*y;"))(2,3));// "6"不知道以上的文字表述大家能不能看明白,如果还是理解不了的话,再看一下以下的代码试试吧。var abc=function(x,y){return x+y;};// 把匿名函数对象赋给abc// abc的constructor就和匿名函数的constructor一样了。也就是说,两个函数的实现是一样的。alert((abc).constructor==(function(x,y){return x+y;}).constructor);

PS:constructor是指创建对象的函数。也就是函数对象所代表的函数体。

  总之,将其(被小括号包含的匿名函数)理解为括号表达式返回的函数对象,然后就可以对这个函数对象作正常的参数列表调用了。(前面这里犯了个错误,只有函数表达式还是不能直接调用函数的,去掉匿名函数括号必须要伴随将表达式赋值。也就是(function(){alert(1)})()应该是与a=function(){alert(1)}()等价,不能连a=都去掉。)

现在我们看一个例子:

var abc=function(y){var x=y;// 这个是局部变量return function(){ alert(x++);// 就是这里调用了闭包特性中的一级函数局部变量的x,并对它进行操作 alert(y–);// 引用的参数变量也是自由变量}}(5);// 初始化abc();// "5" "5"abc();// "6" "4"abc();// "7" "3"alert(x);// 报错!“x”未定义!

看到这里,你能判断究竟jQuery的那个代码片段是否闭包了吗?

  以我的理解来说吧。是否应用了闭包特性,必须确定该段代码有没有最重要的要素:未销毁的局部变量。那么很显然,没有任何实现的匿名函数不可能应用了闭包特性。但如果匿名函数里面有实现呢?那也还得确定它的实现中有没有用到那些未销毁的局部变量。所以如果问你那个开篇中的jQuery代码片段是应用了JS里的什么特性?那么它只是匿名函数与匿名函数的调用而已。但是,它隐含了闭包的特性,并且随时可以实现闭包应用。因为JS天生就是有这个特性的!

文章转载 :

与其在那里苦苦挣扎,碍于面子硬撑,倒不如微笑着面对,

[ jQuery ] jquery 闭包浅析!

相关文章:

你感兴趣的文章:

标签云: