jquery之匿名函数心得

 

       当你开始学习第二种语言的时候，你可能会把你新学习的语言与自己比较熟悉的语言做对比，这样学的更快，更容易让人理解。两年前初次接触JQuery的时候，很是兴奋，因为它打出的口号是：”write less, do more”, 写更少的代码，做更多的事情。最值得让人欣慰的一点也是很多软件设计人员最头疼的事情JQuery帮做了——浏览器兼容问题，还有就是用简单的代码就可实现需要写大量javascript才能实现的功能等等其它的好处。

       现在直入正题，这篇文章与其说是jquery中的匿名函数，倒不如说是通过jquery对匿名函数的使用来学习js中匿名函数。JQuery匿名函数代码片段：

(function(){

//这里忽略jQuery所有实现

})();

要说匿名函数还得从函数本身说起，函数的定义如下：

        函数（function）表示每个输入值对应唯一输出值的一种对应关系。当然这是在数学中的定义，那么我们将数学定义转移到计算机语言来给函数下定义：将输入的若干数据，经过代码设定的逻辑操作处理后，返回唯一的输出的一组代码组合块。当然输入的数据和输出的数据都可能为空。Javascript给出的定义：函数(function)是定义一次但却可以调用或执行任意多次的一段javascript代码。

函数的声明(function):如果使用函数，我们必须先声明它的存在，然后才能调用，如下：

    function Demo(){

    //此处代码省略

    }

当然我们的Demo函数也可以包含参数且有返回值，如下：

    function Demo(param1,pararm2){

         return param1+param2;

        }

所以无论函数我们怎么定义JS都会把它翻译成Function，我们可以用代码alert(typeof Demo)来界面将弹出Function，Function是javascript中固有对象，所有的函数都是Function对象。

   匿名函数：所谓匿名函数也就是没有名称的函数。如下：

alert(typeof function () {}); //"function"

alert(typeof function (x, y) { return x + y; }); // "function"

1.匿名函数声明有多种方式：

(1) 函数字面量：首先声明一个函数对象，然后执行它。

(function () {

    alert('mouse');

})();

(2)当然也可以带参数

(function (m) {

    alert(m);

})(' mouse ');

(3) void操作符：用void操作符去执行一个没有用圆括号包围的一个单独操作数。

void function () {

    alert(' mouse ');

} ();

(4)匿名函数链式调用

(function (o) {

    alert(o);

    return arguments.callee;

})(' mouse ')('cat');

也可以在(function(){})前面添加特殊符号比如：~、!、+、-等等。第一种是我们常用的也是JQuery中经常使用的。

2.怎么调用匿名函数

(1) 调用函数，得到返回值。强制运算符使函数调用执行

(function (x, y) {

    alert(x + y);

    return x + y;

} (3, 4)); 

(2) 调用函数，得到返回值。强制函数直接量执行再返回一个引用，引用在去调用执行

(function (x, y) {

    alert(x + y);

    return x + y;

})(3, 4);

(3) 调用函数，忽略返回值

void function (x) {

    x = x - 1;

    alert(x);

} (9);

3.匿名函数的好处

通过例子来说明：

<script language="javascript">

var tmp=22222;

 (function () {

           var k = {

                cursor: 'hand',

                iptCurTarget: null,

                inputsource: ""，

           runner:function(){}

            };

            k.runner = (function () {

                function A() {

                    alert(22);

                }

                function T() {

                    var date = new Date();

                    alert(date.getFullYear() + " 年" + date.getMonth() + " 月" + date.getDay()+"----http://www.592site.com");

                }

                return {

                    Alert: A,

                    showTime: T

                }

            })();

            k.hello=(function(name){

           var tmp=0;

                function  S(name)

                {

                    tmp++;

                    alert("你好啊," + name + "!" + "匿名函数内部的变量:" + tmp);

                }

                return {

                    sayHello:S

                }

            })();

            window.kingtop = k;

        })();

</script>

这种写法可以看做是私有的内部类,一般出于页面加载完后就需要立即执行的代码，类似于JQuery。我们在匿名函数的内定义了变量tmp,并在k.hello的内部对tmp++运算，匿名函数的外部也定义了变量tmp，我们先在页面上写两个事件：

        function test() {

            alert(kingtop.hello.sayHello('张三'));

        }

        function test2() {

           alert("全局变量:" +tmp);

            alert(kingtop.hello.sayHello('张三'));

        }

依次点击button1、button2页面弹出"你好啊，张三！匿名函数内部的变量:1"、"全局变量: 22222"、"你好啊，张三！匿名函数内部的变量:2"。

(1)通过弹出的界面我们发现全局的tmp变量并没有因匿名函数的tmp运算而发生变化，tmp变量在button2点击的时候变成2，或许你会问，点击button2时应该弹出1才对啊，因为再次调用该函数时对tmp又重新赋值了，正常的函数是这样，但是我们在匿名函数中用了闭包，闭包致使变量tmp在内存中没有释放，所以点击button2的时弹出的是2而不是1，等下在介绍闭包。

（2）K是这个闭包中的集合，集合中我们可以定义变量及方法，然后在集合外面来实现，或许你会问为什么集合中没有定义hello方法，集合外写k.hello的时候没有报错，这是因为在javascript可以动态的给集合添加元素，有点类似C#中的接口，可以继承接口的类中实现接口没有定义的函数。

(3)在闭包中定义的函数，如果外部调用则必须把该函数返回给外部，否则外部不能调用该函数中的方法，有点类似与C#定义public函数方便外部调用。

匿名方法的好处简而言之如下：

1.私有的函数在匿名函数外部调用不到,相对安全.

2.可用于onload事件保证不与其冲突.

3.不会发生变量命名的冲突

网站应用实例：www.592site.com 城市网址导航

下篇文章在介绍闭包.