论坛首页 Web前端技术论坛

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

浏览 5117 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2008-12-02   最后修改:2011-02-28

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   最后修改:2008-12-02
这个东东,在关联事件与事件响应函数上,可方便的捕捉到多种对象,再通过apply,完成事件参数传递。当然,从中也能加上自已定义的参数。

这个东东,我在《悟透javascript》中,及ymPrompt源码中也看见。ymPrompt源码中
按这种方式使用:
(function(){})();
其中花括符中是一大堆业务逻辑代码。

据个人推测,用来封装一些临时变量。
0 请登录后投票
   发表时间:2008-12-02  
《悟透javascript》这本书上周我在中关村图书大厦看了,很漂亮。
0 请登录后投票
   发表时间:2008-12-02  
学习了,我还从来没有这样用过!谢谢!
0 请登录后投票
   发表时间:2008-12-02   最后修改: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>
0 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics