详解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 相关文章推荐
给网站上的广告“加速”显示的方法
Apr 08 Javascript
javascript获取当前日期时间及其它操作函数
Jan 11 Javascript
extjs 分页使用jsp传递数据示例
Jul 29 Javascript
包含中国城市的javascript对象实例
Aug 03 Javascript
谈谈JavaScript中function多重理解
Aug 28 Javascript
通过隐藏iframe实现无刷新上传文件操作
Mar 16 Javascript
JSON格式的时间/Date(2367828670431)/格式转为正常的年-月-日 格式的代码
Jul 27 Javascript
JS利用cookies设置每隔24小时弹出框
Apr 20 Javascript
Dropify.js图片宽高自适应的方法
Nov 27 Javascript
为什么要使用Vuex的介绍
Jan 19 Javascript
js blob类型url的视频下载问题的解决
Nov 29 Javascript
JS实现关闭小广告特效
Jan 29 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邮件类
2007/01/03 PHP
php 静态变量的初始化
2009/11/15 PHP
关于访问控制的一首PHP面试题(对属性或方法的访问控制)
2012/09/13 PHP
php多文件上传功能实现原理及代码
2013/04/18 PHP
php基于GD库画五星红旗的方法
2015/02/24 PHP
PHP使用Redis实现Session共享的实现示例
2019/05/12 PHP
Jquery数独游戏解析(一)-页面布局
2010/11/05 Javascript
jQuery子窗体取得父窗体元素的方法
2015/05/11 Javascript
JavaScript中的parse()方法使用简介
2015/06/12 Javascript
基于jQuery+Cookie实现的防止刷新的在线考试倒计时
2015/06/19 Javascript
javascript移动开发中touch触摸事件详解
2016/03/18 Javascript
Jquery和BigFileUpload实现大文件上传及进度条显示
2016/06/27 Javascript
原生js仿jquery animate动画效果
2016/07/13 Javascript
javascript-解决mongoose数据查询的异步操作
2016/12/22 Javascript
js实现单张图片平移切换效果
2017/10/11 Javascript
利用SpringMVC过滤器解决vue跨域请求的问题
2018/02/10 Javascript
浅析Vue中method与computed的区别
2018/03/06 Javascript
20个最常见的jQuery面试问题及答案
2018/05/23 jQuery
JS实现的汉字与Unicode码相互转化功能分析
2018/05/25 Javascript
JS实现图片旋转动画效果封装与使用示例
2018/07/09 Javascript
JS实现的RC4加密算法示例
2018/08/16 Javascript
微信小程序使用websocket通讯的demo,含前后端代码,亲测可用
2019/05/22 Javascript
原生JS利用transform实现banner的无限滚动示例代码
2020/06/15 Javascript
[04:27]2014DOTA2国际邀请赛 NAVI战队官方纪录片
2014/07/21 DOTA
[47:06]DOTA2上海特级锦标赛主赛事日 - 4 败者组第五轮 MVP.Phx VS EG第一局
2016/03/05 DOTA
[02:23]完美世界全国高校联赛街访DOTA2第一期
2019/11/28 DOTA
python连接oracle数据库实例
2014/10/17 Python
详解Python中的四种队列
2018/05/21 Python
对Python3 goto 语句的使用方法详解
2019/02/16 Python
Uber Eats台湾:寻找附近提供送餐服务的餐厅
2018/05/07 全球购物
采购内勤岗位职责
2013/12/10 职场文书
国旗下的讲话演讲稿
2014/05/08 职场文书
小石潭记导游词
2015/02/03 职场文书
项目备案申请报告
2015/05/15 职场文书
离婚代理词范文
2015/05/23 职场文书
事业单位工作人员岗前培训心得体会
2016/01/08 职场文书