详解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算法学习(直接插入排序)
Apr 12 Javascript
映彩衣的js随笔(js图片切换效果)
Jul 31 Javascript
jquery的ajax()函数传值中文乱码解决方法介绍
Nov 08 Javascript
jquery uploadify 在FF下无效的解决办法
Sep 26 Javascript
javascript中sort()的用法实例分析
Jan 30 Javascript
2种jQuery 实现刮刮卡效果
Feb 01 Javascript
简介AngularJS中使用factory和service的方法
Jun 17 Javascript
js仿百度音乐全选操作
Jan 13 Javascript
layui分页效果实现代码
May 19 Javascript
Webpack 之 babel-loader文件预处理器详解
Mar 23 Javascript
Async/Await替代Promise的6个理由
Jun 15 Javascript
Vue和Flask通信的实现
May 19 Vue.js
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 自定义错误处理函数的使用详解
2013/05/10 PHP
php简单计算页面加载时间的方法
2015/06/19 PHP
PHP定时执行任务的3种方法详解
2015/12/21 PHP
php+ajax实现无刷新文件上传功能(ajaxuploadfile)
2018/02/11 PHP
JS简单实现多级Select联动菜单效果代码
2015/09/06 Javascript
jQuery实现悬浮在右上角的网页客服效果代码
2015/10/24 Javascript
JavaScript实现点击单元格改变背景色的方法
2016/02/12 Javascript
jQuery实现的多张图无缝滚动效果【测试可用】
2016/09/12 Javascript
JS实现禁止鼠标右键的功能
2016/10/15 Javascript
jQuery实现radio第一次点击选中第二次点击取消功能
2017/05/15 jQuery
深入理解react-router@4.0 使用和源码解析
2017/05/23 Javascript
Javascript实现一个简单的输入关键字添加标签效果实例
2017/06/01 Javascript
用javascript获取任意颜色的更亮或更暗颜色值示例代码
2017/07/21 Javascript
node+express+ejs使用模版引擎做的一个示例demo
2017/09/18 Javascript
利用Angular2 + Ionic3开发IOS应用实例教程
2018/01/15 Javascript
vue将对象新增的属性添加到检测序列的方法
2018/02/24 Javascript
Vue.js中的computed工作原理
2018/03/22 Javascript
小程序实现录音上传功能
2019/11/22 Javascript
微信小程序实现上传多个文件 超过10个
2020/03/30 Javascript
[49:31]TFT vs Mski Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
初步理解Python进程的信号通讯
2015/04/09 Python
玩转python爬虫之cookie使用方法
2016/02/17 Python
python批量实现Word文件转换为PDF文件
2018/03/15 Python
Python3导入CSV文件的实例(跟Python2有些许的不同)
2018/06/22 Python
python使用turtle绘制分形树
2018/06/22 Python
pandas筛选某列出现编码错误的解决方法
2018/11/07 Python
Python爬虫实现获取动态gif格式搞笑图片的方法示例
2018/12/24 Python
新奇的小玩意:IWOOT
2016/07/21 全球购物
孕妇内衣和胸罩:Cake Maternity
2018/07/16 全球购物
安全生产责任书
2014/03/12 职场文书
交警作风整顿剖析材料
2014/10/11 职场文书
工程质检员岗位职责
2015/04/08 职场文书
python关于集合的知识案例详解
2021/05/30 Python
React实现动效弹窗组件
2021/06/21 Javascript
python 使用tkinter与messagebox写界面和弹窗
2022/03/20 Python
GTX1660显卡搭配显示器推荐
2022/04/19 数码科技