详解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 相关文章推荐
csdn 论坛技术区平均给分功能
Nov 07 Javascript
js原型链原理看图说明
Jul 07 Javascript
jquery 快速回到页首的方法
Dec 05 Javascript
关于jquery中全局函数each使用介绍
Dec 10 Javascript
js使用onmousemove和onmouseout获取鼠标坐标的方法
Mar 31 Javascript
AngularJS实现树形结构(ztree)菜单示例代码
Sep 18 Javascript
基于angular实现三级联动的生日插件
May 12 Javascript
python爬取安居客二手房网站数据(实例讲解)
Oct 19 Javascript
JS实现百度搜索接口及链接功能实例代码
Feb 02 Javascript
详解基于vue的服务端渲染框架NUXT
Jun 20 Javascript
Vue项目全局配置页面缓存之按需读取缓存的实现详解
Aug 01 Javascript
vue axios封装httpjs,接口公用配置拦截操作
Aug 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
使用Limit参数优化MySQL查询的方法
2008/11/12 PHP
ThinkPHP跳转页success及error模板实例教程
2014/07/17 PHP
File文件控件,选中文件(图片,flash,视频)即立即预览显示
2009/04/09 Javascript
读jQuery之八 包装事件对象
2011/06/21 Javascript
javascript字符串替换及字符串分割示例代码
2013/12/12 Javascript
javascript基于HTML5 canvas制作画箭头组件
2014/06/25 Javascript
javascript中call和apply的用法示例分析
2015/04/02 Javascript
JavaScript返回0-1之间随机数的方法
2015/04/06 Javascript
JS实现浏览器状态栏显示时间的方法
2015/10/27 Javascript
jQuery中get方法用法分析
2016/12/07 Javascript
详解微信小程序中的页面代码中的模板的封装
2017/10/12 Javascript
Vuejs 2.0 子组件访问/调用父组件的方法(示例代码)
2018/02/08 Javascript
详解Vue.js中.native修饰符
2018/04/24 Javascript
微信小程序使用form表单获取输入框数据的实例代码
2018/05/17 Javascript
Vuejs2 + Webpack框架里,模拟下载的实例讲解
2018/09/05 Javascript
微信小程序结合Storage实现搜索历史效果
2019/05/18 Javascript
原生javascript自定义input[type=radio]效果示例
2019/08/27 Javascript
详解JavaScript数据类型和判断方法
2020/09/04 Javascript
[02:35]DOTA2英雄基础教程 末日使者
2013/12/04 DOTA
Python 查看文件的读写权限方法
2018/01/23 Python
python验证码识别教程之利用投影法、连通域法分割图片
2018/06/04 Python
对Tensorflow中的矩阵运算函数详解
2018/07/27 Python
Python爬虫实现验证码登录代码实例
2019/05/10 Python
python flask解析json数据不完整的解决方法
2019/05/26 Python
深入了解Django View(视图系统)
2019/07/23 Python
Pytorch中index_select() 函数的实现理解
2019/11/19 Python
python按顺序重命名文件并分类转移到各个文件夹中的实现代码
2020/07/21 Python
纯CSS打造(无图像无js)的非常流行的讲话(语音)气泡效果
2012/12/28 HTML / CSS
JPA面试常见问题
2016/11/14 面试题
什么是Remote Module
2016/06/10 面试题
银行优秀员工事迹
2014/02/06 职场文书
2014年旅游局法制宣传日活动总结
2014/11/01 职场文书
2014年售票员工作总结
2014/11/19 职场文书
酒店财务经理岗位职责
2015/04/08 职场文书
重阳节主题班会
2015/08/17 职场文书
写作指导:怎么书写竞聘演讲稿?
2019/07/04 职场文书