详解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 append() html时的小问题的解决方法
Dec 16 Javascript
JavaScript获得表单target属性的方法
Apr 02 Javascript
学习javascript的闭包,原型,和匿名函数之旅
Oct 18 Javascript
jquery日历插件datepicker用法分析
Jan 22 Javascript
JavaScript 最佳实践:帮你提升代码质量
Dec 03 Javascript
js如何判断是否在iframe中及防止网页被别站用iframe嵌套
Jan 11 Javascript
vue中改变选中当前项的显示隐藏或者状态的实现方法
Feb 08 Javascript
在vue中解决提示警告 for循环报错的方法
Sep 28 Javascript
vue Tab切换以及缓存页面处理的几种方式
Nov 05 Javascript
JS在Array数组中按指定位置删除或添加元素对象方法示例
Nov 19 Javascript
解决ant design vue 表格a-table二次封装,slots渲染的问题
Oct 28 Javascript
js中Map和Set的用法及区别实例详解
Feb 15 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中Fatal error session_start()错误解决步骤
2014/08/05 PHP
PHP的CURL方法curl_setopt()函数案例介绍(抓取网页,POST数据)
2016/12/14 PHP
YII2 实现多语言配置的方法分享
2017/01/11 PHP
PHP大文件分片上传的实现方法
2018/10/28 PHP
JavaScript面向对象编程
2008/03/02 Javascript
IE和Firefox在JavaScript应用中的兼容性探讨
2008/04/01 Javascript
JavaScript 关键字屏蔽实现函数
2009/08/02 Javascript
JavaScript null和undefined区别分析
2009/10/14 Javascript
基于jquery实现图片广告轮换效果代码
2011/07/07 Javascript
jquery 实现窗口的最大化不论什么情况
2013/09/03 Javascript
js格式化货币数据实现代码
2013/09/04 Javascript
js实现带圆角的两级导航菜单效果代码
2015/08/24 Javascript
JavaScript基本语法学习教程
2016/01/14 Javascript
jquery及js实现动态加载js文件的方法
2016/01/21 Javascript
动态创建按钮的JavaScript代码
2016/01/29 Javascript
js从数组中删除指定值(不是指定位置)的元素实现代码
2016/09/13 Javascript
谈谈target=_new和_blank的不同之处
2016/10/25 Javascript
Vue2.0组件间数据传递示例
2017/03/07 Javascript
jQuery插件zTree实现删除树节点的方法示例
2017/03/08 Javascript
JavaScript实现二叉树的先序、中序及后序遍历方法详解
2017/10/26 Javascript
Vue前端开发规范整理(推荐)
2018/04/23 Javascript
使用koa2创建web项目的方法步骤
2019/03/12 Javascript
简单分析js中的this的原理
2019/08/31 Javascript
ant-design表单处理和常用方法及自定义验证操作
2020/10/27 Javascript
nginx配置域名后的二级目录访问不同项目的配置操作
2020/11/06 Javascript
Python运行报错UnicodeDecodeError的解决方法
2016/06/07 Python
Python 常用 PEP8 编码规范详解
2017/01/22 Python
Pycharm取消py脚本中SQL识别的方法
2018/11/29 Python
Python中按值来获取指定的键
2019/03/04 Python
Python迭代器iterator生成器generator使用解析
2019/10/24 Python
应届实习生的自我评价范文
2014/01/05 职场文书
大一新生期末自我评价
2014/09/12 职场文书
个人三严三实对照检查材料
2014/09/25 职场文书
2016年4月份红领巾广播稿
2015/12/21 职场文书
PHP连接MSSQL数据库案例,PHPWAMP多个PHP版本连接SQL Server数据库
2021/04/16 PHP
Android中的Launch Mode详情
2022/06/05 Java/Android