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("第三个函数"); });
分类:
javascript设计模式
标签:
javascript
, 函数
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通