zoukankan      html  css  js  c++  java
  • javascript函数的几种写法集合

    1.常规写法

    1 function fnName(){
    2     console.log("常规写法");
    3 }

    2.匿名函数,函数保存到变量里

    1 var myfn = function(){
    2     console.log("匿名函数,函数保存到变量里");
    3 }

    3.如果有多个变量,可以用对象收编变量

      3.1 用json对象

     1 var fnobject1={
     2     fn1:function(){
     3           console.log("第一个函数");
     4     },
     5     fn2:function(){
     6           console.log("第二个函数");
     7     },
     8     fn3:function(){
     9           console.log("第三个函数");
    10     }
    11 }

      3.2 声明一个对象,然后给它添加方法

     1 var fnobject2 = function(){};
     2 fnobject2.fn1 = function(){
     3     console.log("第一个函数");
     4 }
     5 fnobject2.fn2 = function(){
     6     console.log("第二个函数");
     7 }
     8 fnobject2.fn3 = function(){
     9     console.log("第三个函数");
    10 }

      3.3 可以把方法放在一个对象函数里

     1 var fnobject3 = function(){
     2     return {
     3         fn1:function(){
     4             console.log("第一个函数");
     5             },
     6         fn2:function(){
     7              console.log("第二个函数");
     8          },
     9           fn3:function(){
    10             console.log("第三个函数");
    11          }    
    12     }    
    13 };

    4.可用类来实现,注意类的第二种和第三种写法不能混用,否则一旦混用,如在后面为对象的原型对象赋值新对象时,那么他将会覆盖掉之前对prototype对象赋值的方法

      4.1 第一种写法

     1 var fnobject4 = function(){
     2     this.fn1 = function(){
     3         console.log("第一个函数");
     4     }
     5     this.fn2 = function(){
     6         console.log("第二个函数"); 
     7     }
     8     this.fn3 = function(){
     9         console.log("第三个函数");
    10     }
    11 };

       4.2 第二种写法

     1 var fnobject5 = function(){};
     2 fnobject5.prototype.fn1 = function(){
     3     console.log("第一个函数");
     4 }
     5 fnobject5.prototype.fn2 = function(){
     6     console.log("第二个函数");
     7 }
     8 fnobject5.prototype.fn3 = function(){
     9     console.log("第三个函数");
    10 }

      4.3 第三种写法

     1 var fnobject6 = function(){};
     2 fnobject6.prototype={
     3     fn1:function(){
     4         console.log("第一个函数");
     5     },
     6     fn2:function(){
     7         console.log("第二个函数");
     8     },
     9     fn3:function(){
    10         console.log("第三个函数");
    11     }
    12 }

      4.4 第四种写法

    var fnobject7 = function(){};
    fnobject7.prototype={
        fn1:function(){
            console.log("第一个函数");
            return this;
        },
            fn2:function(){
            console.log("第二个函数");
            return this;
        },
        fn3:function(){
            console.log("第三个函数");
            return this;
        }
    }

    5.对Function对象类的扩展(下面三种只能用一种)

      5.1 第一种写法(对象)

     1 Function.prototype.addMethod = function(name,fn){
     2     this[name] = fn;
     3  }
     4 var methods=function(){};//var methods=new Function();
     5 methods.addMethod('fn1',function(){
     6     console.log("第一个函数");
     7 });
     8 methods.addMethod('fn2',function(){
     9     console.log("第二个函数");
    10 });
    11 methods.addMethod('fn3',function(){
    12     console.log("第三个函数");
    13 });

      5.2 链式添加(对象)

     1 Function.prototype.addMethod = function(name,fn){
     2     this[name] = fn;
     3     return this;
     4  }
     5 var methods=function(){};//var methods=new Function();
     6 methods.addMethod('fn1',function(){
     7     console.log("第一个函数");
     8 }).addMethod('fn2',function(){
     9     console.log("第二个函数");
    10 }).addMethod('fn3',function(){
    11     console.log("第三个函数");
    12 });

      5.3 链式添加(类)

    Function.prototype.addMethod = function(name,fn){
        this.prototype[name] = fn;
        return this;
    }
    var Methods=function(){};//var methods=new Function();
    methods.addMethod('fn1',function(){
        console.log("第一个函数");
    }).addMethod('fn2',function(){
        console.log("第二个函数");
    }).addMethod('fn3',function(){
        console.log("第三个函数");
    });
  • 相关阅读:
    Centos 7 zabbix 实战应用
    Centos7 Zabbix添加主机、图形、触发器
    Centos7 Zabbix监控部署
    Centos7 Ntp 时间服务器
    Linux 150命令之查看文件及内容处理命令 cat tac less head tail cut
    Kickstart 安装centos7
    Centos7与Centos6的区别
    Linux 150命令之 文件和目录操作命令 chattr lsattr find
    Linux 发展史与vm安装linux centos 6.9
    Linux介绍
  • 原文地址:https://www.cnblogs.com/jtnote/p/5980000.html
Copyright © 2011-2022 走看看