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("第三个函数");
    });
    复制代码
  • 相关阅读:
    JS和Flash相互调用
    xml的应用
    随机验证码
    模块 time
    第一天 注册成功
    我的第一篇博客
    git
    2018-02-27
    25
    建站之星
  • 原文地址:https://www.cnblogs.com/lanlanJser/p/7242705.html
Copyright © 2011-2022 走看看