详解javascript函数写法大全


Posted in Javascript onMarch 25, 2019

1.常规写法

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

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

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

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

3.1 用json对象

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

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

var fnobject2 = function(){};
 fnobject2.fn1 = function(){
   console.log("第一个函数");
 }
 fnobject2.fn2 = function(){
   console.log("第二个函数");
 }
 fnobject2.fn3 = function(){
   console.log("第三个函数");
 }

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

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

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

4.1 第一种写法

var fnobject4 = function(){
   this.fn1 = function(){
     console.log("第一个函数");
  }
   this.fn2 = function(){
     console.log("第二个函数"); 
   }
   this.fn3 = function(){
     console.log("第三个函数");
   }
 };

4.2 第二种写法

var fnobject5 = function(){};
 fnobject5.prototype.fn1 = function(){
   console.log("第一个函数");
 }
 fnobject5.prototype.fn2 = function(){
   console.log("第二个函数");
 }
 fnobject5.prototype.fn3 = function(){
   console.log("第三个函数");
 }

4.3 第三种写法

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

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 第一种写法(对象)

Function.prototype.addMethod = function(name,fn){
   this[name] = fn;
 }
 var methods=function(){};//var methods=new Function();
 methods.addMethod('fn1',function(){
   console.log("第一个函数");
 });
 methods.addMethod('fn2',function(){
   console.log("第二个函数");
 });
 methods.addMethod('fn3',function(){
   console.log("第三个函数");
 });

5.2 链式添加(对象)

Function.prototype.addMethod = function(name,fn){
  this[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("第三个函数");
 });

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 相关文章推荐
javascript 建设银行登陆键盘
Jun 10 Javascript
使用jQuery清空file文件域的解决方案
Apr 12 Javascript
JS页面延迟执行一些方法(整理)
Nov 11 Javascript
jquery判断input值不为空的方法
Jun 05 Javascript
vue多级多选菜单组件开发
Sep 08 Javascript
Kendo Grid editing 自定义验证报错提示的解决方法
Nov 18 Javascript
jquery.validate.js 多个相同name的处理方式
Jul 10 jQuery
使用JQuery实现图片轮播效果的实例(推荐)
Oct 24 jQuery
微信小程序 scroll-view的使用案例代码详解
Jun 11 Javascript
Js on及addEventListener原理用法区别解析
Jul 11 Javascript
解决vant中 tab栏遇到的坑 van-tabs
Nov 04 Javascript
node.js文件的复制、创建文件夹等相关操作
Feb 05 Javascript
vue在自定义组件中使用v-model进行数据绑定的方法
Mar 25 #Javascript
Node.js之readline模块的使用详解
Mar 25 #Javascript
Javascript的this详解
Mar 23 #Javascript
如何在Angular应用中创建包含组件方法示例
Mar 23 #Javascript
vue中组件的3种使用方式详解
Mar 23 #Javascript
ES6入门教程之Array.from()方法
Mar 23 #Javascript
setTimeout与setInterval的区别浅析
Mar 23 #Javascript
You might like
php根据操作系统转换文件名大小写的方法
2014/02/24 PHP
Laravel 5.5 异常处理 & 错误日志的解决
2019/10/17 PHP
通过Unicode转义序列来加密,按你说的可以算是混淆吧
2007/05/06 Javascript
用cssText批量修改样式
2009/08/29 Javascript
JavaScript 构造函数 面相对象学习必备知识
2010/06/09 Javascript
javascript中关于break,continue的特殊用法与介绍
2012/05/24 Javascript
JavaScript AJAX之惰性载入函数
2014/08/27 Javascript
简介JavaScript中POSITIVE_INFINITY值的使用
2015/06/05 Javascript
在JavaScript中操作时间之setYear()方法的使用
2015/06/12 Javascript
javascript实现禁止鼠标滚轮事件
2015/07/24 Javascript
jQuery编程中的一些核心方法简介
2015/08/14 Javascript
jquery+CSS3实现3D拖拽相册效果
2016/07/18 Javascript
JQuery动态添加Select的Option元素实现方法
2016/08/29 Javascript
JS中with的替代方法与String中的正则方法详解
2016/12/23 Javascript
vue.js内部自定义指令与全局自定义指令的实现详解(利用directive)
2017/07/11 Javascript
Echart折线图手柄触发事件示例详解
2018/12/16 Javascript
jQuery提示框插件SweetAlert用法分析
2019/08/05 jQuery
0基础学习前端开发的一些建议
2020/07/14 Javascript
[44:01]2018DOTA2亚洲邀请赛3月30日 小组赛B组 EG VS paiN
2018/03/31 DOTA
[01:04:20]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第一场 11.29
2020/12/02 DOTA
python自动化工具日志查询分析脚本代码实现
2013/11/26 Python
Python常用小技巧总结
2015/06/01 Python
Python中的左斜杠、右斜杠(正斜杠和反斜杠)
2016/08/30 Python
Python批量查询域名是否被注册过
2017/06/21 Python
python验证身份证信息实例代码
2019/05/06 Python
python自定义时钟类、定时任务类
2021/02/22 Python
Python字典实现伪切片功能
2020/10/28 Python
美国知名男士服饰品牌:Brooks Brothers(布克兄弟)
2016/08/25 全球购物
MATCHESFASHION.COM美国官网:英国奢侈品零售商
2018/10/29 全球购物
StubHub美国:购买或出售您的门票
2019/07/09 全球购物
波兰化妆品和护肤品购物网站:eKobieca
2019/08/30 全球购物
行政人员岗位职责
2013/12/08 职场文书
三好学生自我鉴定
2013/12/17 职场文书
经验交流材料格式
2014/12/30 职场文书
教你使用一行Python代码玩遍童年的小游戏
2021/08/23 Python
前端传参数进行Mybatis调用mysql存储过程执行返回值详解
2022/08/14 MySQL