详解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对表单元素的取值和赋值操作代码
May 19 Javascript
JS实现仿Windows7风格的网页右键菜单效果代码
Sep 11 Javascript
jQuery焦点图插件SaySlide
Dec 21 Javascript
JS动态生成年份和月份实例代码
Feb 04 Javascript
Mongoose经常返回e11000 error的原因分析
Mar 29 Javascript
利用node.js如何搭建一个简易的即时响应服务器
May 28 Javascript
微信小程序canvas实现刮刮乐效果
Jul 09 Javascript
基于vue cli 通过命令行传参实现多环境配置
Jul 12 Javascript
微信小程序实现卡片左右滑动效果的示例代码
May 01 Javascript
koa中间件核心(koa-compose)源码解读分析
Jun 15 Javascript
vue实现div单选多选功能
Jul 16 Javascript
详解React路由传参方法汇总记录
Nov 29 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
Laravel中扩展Memcached缓存驱动实现使用阿里云OCS缓存
2015/02/10 PHP
Thinkphp关闭缓存的方法
2015/06/26 PHP
PHP 数组基本操作方法详解
2016/06/17 PHP
PHP实现读取文件夹及批量重命名文件操作示例
2019/04/15 PHP
ASP.NET中基于JQUERY的高性能的TreeView补充
2011/02/23 Javascript
select标签模拟/美化方法采用JS外挂式插件
2013/04/01 Javascript
js实例属性和原型属性示例详解
2014/11/23 Javascript
javascript实现点击按钮让DIV层弹性移动的方法
2015/02/24 Javascript
jQuery无刷新上传之uploadify3.1简单使用
2016/06/18 Javascript
js限制输入框只能输入数字(onkeyup触发)
2018/09/28 Javascript
JS遍历JSON数组及获取JSON数组长度操作示例【测试可用】
2018/12/12 Javascript
[00:34]DOTA2上海特级锦标赛 VG战队宣传片
2016/03/04 DOTA
python使用装饰器和线程限制函数执行时间的方法
2015/04/18 Python
python数组复制拷贝的实现方法
2015/06/09 Python
Python实现周期性抓取网页内容的方法
2015/11/04 Python
Python 字典与字符串的互转实例
2017/01/13 Python
python中的随机函数random的用法示例
2018/01/27 Python
Pycharm2017版本设置启动时默认自动打开项目的方法
2018/10/29 Python
django使用LDAP验证的方法示例
2018/12/10 Python
python+selenium实现自动化百度搜索关键词
2019/06/03 Python
python创建子类的方法分析
2019/11/28 Python
python求绝对值的三种方法小结
2019/12/04 Python
Python Pandas 转换unix时间戳方式
2019/12/07 Python
对tensorflow中的strides参数使用详解
2020/01/04 Python
Python getattr()函数使用方法代码实例
2020/08/10 Python
最新版 Windows10上安装Python 3.8.5的步骤详解
2020/11/28 Python
Python爬虫UA伪装爬取的实例讲解
2021/02/19 Python
Python 图片处理库exifread详解
2021/02/25 Python
英国知名美妆护肤在线商城:Zest Beauty
2018/04/24 全球购物
JAVA软件工程师测试题
2014/07/25 面试题
维修工先进事迹
2014/05/29 职场文书
法定代表人授权委托书范文
2014/08/02 职场文书
2015年学校总务工作总结
2015/07/20 职场文书
关于python中readlines函数的参数hint的相关知识总结
2021/06/24 Python
ICOM R71E和R72E图文对比解说
2022/04/07 无线电
vue的项目如何打包上线
2022/04/13 Vue.js