最新某某《 HTML5与CSS3实现动态网页》

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("第三个函数");
});

--------------------- 
作者：最爱松露巧克力 
来源：CSDN 
原文：https://blog.csdn.net/weixin_36617251/article/details/88655572 
版权声明：本文为博主原创文章，转载请附上博文链接！

标签：CSS3,function,网页,log,addMethod,HTML5,var,console,函数
来源： https://blog.csdn.net/cohciz/article/details/88759570