Javascript中匿名函数的多种调用方式

zhouyrt

浏览: 1180941 次
性别:
来自: 北京

最近访客更多访客>>

a612986

tweenkin

zymdev

小白到此一游

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Core JS

JavaScript json C C++C#

js中定义函数的方式有多种，函数直接量就是其中一种。如var fun = function(){},这里function如果不赋值给fun那么它就是一个匿名函数。

好，看看匿名函数的如何被调用。

1、执行后得到返回值的函数调用

//方式1，调用函数，得到返回值。强制运算符使函数调用执行
(function(x,y){
    alert(x+y);
    return x+y;
}(3,4));

//方式二，调用函数，得到返回值。强制函数直接量执行再返回一个引用，引用再去调用执行
(function(x,y){
    alert(x+y);
    return x+y;
})(3,4);

2、执行后忽略返回值

//方式三，调用函数，忽略返回值
    void function(x) {
          x = x-1;
          alert(x);
    }(9);

嗯，最后看看错误的调用方式

//错误的调用方式
function(x,y){
    alert(x+y);
    return x+y;
}(3,4);

错误原因见：javascript中大括号“{}”的多义性

分享到：

变量声明时命名与变量作为对象属性时命名区 ... | 牛逼、装逼，傻逼

2008-12-02 11:02
浏览 3994
评论(4)
论坛回复 / 浏览 (4 / 5159)
分类:Web前端
查看更多

4 楼 yunhaifeiwu 2008-12-02

下面是从ymPrompt 3.0版源码中剥离整理出来的。目的是揣磨别人代码中的
div等标签拖动的处理方式。由于是为了便于阅读，与原来的代码有一定的差别。
如：原来有这样的语句:

   var d=document,db=d.body,y=ymPrompt;

在下面的代码中，为了便于阅读取消了这种方式，但是如果要在实际使用中，
建议不要取消。因为，这缩代了js代码（如果有第三方js压缩软件，不取消
也未偿不可）。

在下面的代码中，注意如下的代码：

  （function(){})();

其中花括号中有许多语句。这种方式，基本上可这样看待：定义了一个函数，并立即
调用它。这种代码作用，初步估计是为了减少内存泄露之类的吧。

另外，其事件处理方式中，没有搞得很明白，暂时会用自已的方式处理事件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
	<title>ymPrompt </title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
	<script type="text/javascript">
	</script>
 </head>
 <body>
    <div id="dd" style="background:#FC6; width:80px; position:absolute">ssss</div>
    <script type="text/javascript">


    //用json的形式定义了对象
    var fc={
        d:"d1111",
        targDiv:null,
        ds:function( ){
            alert("sss");//无啥意义的函数
        },
        copy:function(o,c){//这是一个把c中定义的函数与变量，拷贝到对象o中。
            o=(o&&typeof o=='object')?o:{};
            if (o && c && typeof c == 'object')
                for(var p in c)o[p] = c[p];
            return o;
        }
    }
    //*****************上面这个对象使用例子程序**************
    //使用fc的copy函数，把用json形式定义的对象与函数拷贝到fc对象中
    //fc.copy(fc,{
    //    b:"b111",
    //    tel:function(){
    //        alert("fc.copy");
    //    }
    //});
    //fc.tel(); //由于有上面一个语句，这里可以调用tel函了。
    //***********************************************


    fc.targDiv=document.getElementById("dd");//设定一个目标对象,本例就是要拖动它
    //这里有一个奇怪形式的函数，为了描述方便，姑且叫临时函数吧。
    (function(){
        //浏览器类型判断
        var browser=function(s){
            return navigator.userAgent.toLowerCase().indexOf(s)!=-1
        };
        var isOpera=browser('opera');
        var isIE=browser('msie')!=-1&&(document.all&&!isOpera);
        
        //统一定义一个事件绑定函数，以兼容主流浏览器的事件注册
        var addEvent=(function(){
            return eval(['1,function(env,fn,obj){obj=obj||document;',
                isIE?"obj.attachEvent('on'+env,fn)":
                    'obj.addEventListener(env,fn,false)',
                '}'].join(''))
        })();
        

        //鼠标左键按下响应函数
        var dragVar,setDrag=function(e){
            e=e||window.event;
            dragVar=fc.copy(dragVar,
                {startDrag:true,
                    startX:e.x||e.pageX,
                    startY:e.y||e.pageY,
                    containX:fc.targDiv.offsetLeft,
                    containY:fc.targDiv.offsetTop
                }
            );
        };
        //关联鼠标左键按下事件 到setDrag函数
        addEvent('mousedown',setDrag,fc.targDiv);

        //鼠标移动响应事件及其响应函数
        addEvent("mousemove",function(e){
            if(dragVar&&dragVar.startDrag){
                e=e||window.event;
                fc.targDiv.style.left=(dragVar.containX+(e.x||e.pageX)-dragVar.startX)+"px";
                fc.targDiv.style.top=(dragVar.containY+(e.y||e.pageY)-dragVar.startY)+"px";
            }
        });

        //鼠标左键释放及其响应函数
        addEvent("mouseup",function(){dragVar=null});
		  
    })();

   </script>
 </body>
</html>

3 楼 liucl_tiger 2008-12-02

学习了，我还从来没有这样用过！谢谢！

2 楼 zhouyrt 2008-12-02

《悟透javascript》这本书上周我在中关村图书大厦看了，很漂亮。

1 楼 yunhaifeiwu 2008-12-02

这个东东，在关联事件与事件响应函数上，可方便的捕捉到多种对象，再通过apply，完成事件参数传递。当然，从中也能加上自已定义的参数。

这个东东，我在《悟透javascript》中，及ymPrompt源码中也看见。ymPrompt源码中
按这种方式使用：

（function(){})()；

其中花括符中是一大堆业务逻辑代码。

据个人推测，用来封装一些临时变量。

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论