详解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 相关文章推荐
JS使用replace()方法和正则表达式进行字符串的搜索与替换实例
Apr 10 Javascript
JavaScript删除数组元素的方法
Mar 20 Javascript
javascript制作的简单注册模块表单验证
Apr 13 Javascript
JavaScript过滤字符串中的中文与空格方法汇总
Mar 07 Javascript
用jQuery向div中添加Html文本内容的简单实现
Jul 13 Javascript
JavaScript提高网站性能优化的建议(二)
Jul 24 Javascript
AngularJS下对数组的对比分析
Aug 24 Javascript
通过jquery实现页面的动画效果(实例代码)
Sep 18 Javascript
vue.js移动端tab组件的封装实践实例
Jun 30 Javascript
jQuery动画_动力节点节点Java学院整理
Jul 04 jQuery
layer.prompt输入层的例子
Sep 24 Javascript
再也不怕 JavaScript 报错了,怎么看怎么处理都在这儿
Dec 09 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 三维饼图的实现代码
2008/09/28 PHP
PHP正则验证Email的方法
2015/06/15 PHP
PHP基于phpqrcode类生成二维码的方法示例详解
2020/08/07 PHP
服务器安全设置的几个注册表设置
2007/07/28 Javascript
offsetParent 算法分析
2010/04/05 Javascript
JS中toFixed()方法引起的问题如何解决
2012/11/20 Javascript
jQuery替换字符串(实例代码)
2013/11/13 Javascript
JavaScript运行时库属性一览表
2014/03/14 Javascript
node.js中的定时器nextTick()和setImmediate()区别分析
2014/11/26 Javascript
jQuery仅用3行代码实现的显示与隐藏功能完整实例
2015/10/08 Javascript
精彩的Bootstrap案例分享 重点在注释!(选项卡、栅格布局)
2016/07/01 Javascript
微信小程序 MD5的方法详解及实例代码
2017/03/10 Javascript
js从输入框读取内容,比较两个数字的大小方法
2017/03/13 Javascript
Vue-cli proxyTable 解决开发环境的跨域问题详解
2017/05/18 Javascript
基于hover的用法实例(推荐)
2017/07/04 Javascript
微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能
2017/08/16 Javascript
微信小程序tabBar模板用法实例分析【附demo源码下载】
2017/11/28 Javascript
vue+swiper实现侧滑菜单效果
2017/12/28 Javascript
jQuery实现鼠标响应式淘宝动画效果示例
2018/02/13 jQuery
使用node.js实现微信小程序实时聊天功能
2018/08/13 Javascript
微信小程序scroll-view的滚动条设置实现
2020/03/02 Javascript
vue element和nuxt的使用技巧分享
2021/01/14 Vue.js
[52:09]2014 DOTA2华西杯精英邀请赛 5 25 NewBee VS DK第二场
2014/05/26 DOTA
[01:02:10]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第一局
2016/02/26 DOTA
python中pygame针对游戏窗口的显示方法实例分析(附源码)
2015/11/11 Python
Python实现修改文件内容的方法分析
2018/03/25 Python
使用Python实现将list中的每一项的首字母大写
2019/06/11 Python
Python Django 添加首页尾页上一页下一页代码实例
2019/08/21 Python
Python @property原理解析和用法实例
2020/02/11 Python
Python+Selenium实现自动化的环境搭建的步骤(图文)
2020/09/01 Python
记录一下scrapy中settings的一些配置小结
2020/09/28 Python
Ubuntu16安装Python3.9的实现步骤
2020/12/15 Python
幼儿园新年寄语
2014/04/03 职场文书
2015商场元旦促销活动策划方案
2014/12/09 职场文书
MySQL infobright的安装步骤
2021/04/07 MySQL
聊聊pytorch测试的时候为何要加上model.eval()
2021/05/23 Python