详解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 相关文章推荐
jquery批量控制form禁用的代码
Aug 06 Javascript
JS关键字球状旋转效果的实例代码
Nov 29 Javascript
EasyUI中实现form表单提交的示例分享
Mar 01 Javascript
js实现支持手机滑动切换的轮播图片效果实例
Apr 29 Javascript
JavaScript中的ParseInt("08")和“09”返回0的原因分析及解决办法
May 19 Javascript
AngularJS基础 ng-src 指令简单示例
Aug 03 Javascript
js addDqmForPP给标签内属性值加上双引号的函数
Dec 24 Javascript
微信小程序分享功能之按钮button 边框隐藏和点击隐藏
Jun 14 Javascript
vue多页面项目中路由使用history模式的方法
Sep 23 Javascript
BootstrapValidator验证用户名已存在(ajax)
Nov 08 Javascript
Vue 实现登录界面验证码功能
Jan 03 Javascript
JS前端基于canvas给图片添加水印
Nov 11 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的类树(支持无限分类)
2006/10/09 PHP
域名查询代码公布
2006/10/09 PHP
详谈PHP文件目录基础操作
2014/11/11 PHP
PHP实现的简单日历类
2014/11/29 PHP
PHP生成唯一订单号的方法汇总
2015/04/16 PHP
lnmp安装多版本PHP共存的方法详解
2018/08/02 PHP
PHP面向对象类型约束用法分析
2019/06/12 PHP
HTML复选框和单选框 checkbox和radio事件介绍
2012/12/12 Javascript
JQuery-tableDnD 拖拽的基本使用介绍
2013/07/04 Javascript
浅析JavaScript中的typeof运算符
2013/11/30 Javascript
Javascript控制input输入时间格式的方法
2015/01/28 Javascript
jQuery实现文本展开收缩特效
2015/06/03 Javascript
JavaScript检测原始值、引用值、属性
2016/06/20 Javascript
Bootstrap登陆注册页面开发教程
2016/07/12 Javascript
NodeJS仿WebApi路由示例
2017/02/28 NodeJs
JS多个表单数据提交下的serialize()应用实例分析
2019/08/27 Javascript
JavaScript利用键盘码控制div移动
2020/03/19 Javascript
如何基于filter实现网站整体变灰功能
2020/04/17 Javascript
[40:10]2015国际邀请赛全明星表演赛
2015/08/07 DOTA
[34:08]2018DOTA2亚洲邀请赛3月29日 小组赛B组 VP VS EG
2018/03/30 DOTA
[20:30]职业巡回赛回顾
2018/08/09 DOTA
分享python数据统计的一些小技巧
2016/07/21 Python
python3中zip()函数使用详解
2018/06/29 Python
Python判断有效的数独算法示例
2019/02/23 Python
tensorflow 实现数据类型转换
2020/02/17 Python
Python 剪绳子的多种思路实现(动态规划和贪心)
2020/02/24 Python
Python使用requests xpath 并开启多线程爬取西刺代理ip实例
2020/03/06 Python
基于selenium及python实现下拉选项定位select
2020/07/22 Python
澳大利亚在线家具、灯饰和家居装饰店:LivingStyles
2018/11/20 全球购物
C语言笔试集
2012/07/24 面试题
什么是重载?CTS、CLS和CLR分别做何解释
2012/05/06 面试题
领导干部考察材料
2014/02/08 职场文书
常务副总经理任命书
2014/06/05 职场文书
2015年学校关工委工作总结
2015/04/03 职场文书
楚门的世界观后感
2015/06/03 职场文书
Win10/Win11 任务栏替换成经典样式
2022/04/19 数码科技