详解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 冒泡排序 正序和倒序实现代码
Dec 14 Javascript
node.js中的fs.createReadStream方法使用说明
Dec 17 Javascript
javacript使用break内层跳出外层循环分析
Jan 12 Javascript
js实现向右横向滑出的二级菜单效果
Aug 27 Javascript
DropDownList控件绑定数据源的三种方法
Dec 24 Javascript
JavaScript 栈的详解及实例代码
Jan 22 Javascript
mui上拉加载功能实例详解
Apr 13 Javascript
表格展示利器 Bootstrap Table实例代码
Sep 06 Javascript
JS+CSS实现滚动数字时钟效果
Dec 25 Javascript
微信小程序页面间传值与页面取值操作实例分析
Apr 30 Javascript
vue界面发送表情的实现代码
Sep 11 Javascript
详解前端任务构建利器Gulp.js使用指南
Apr 30 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
推荐文章系统(一)
2006/10/09 PHP
求PHP数组最大值,最小值的代码
2011/10/31 PHP
PHP输出多个元素的排列或组合的方法
2017/03/14 PHP
根据分辨率不同,调用不同的css文件
2006/07/07 Javascript
js导出table数据到excel即导出为EXCEL文档的方法
2013/10/10 Javascript
Js判断CSS文件加载完毕的具体实现
2014/01/17 Javascript
window.open()实现post传递参数
2015/03/12 Javascript
JavaScript获取当前日期是星期几的方法
2015/04/06 Javascript
JavaScript使表单中的内容显示在屏幕上的方法
2015/06/29 Javascript
Bootstrap网格系统详解
2016/04/26 Javascript
JavaScript中的Object对象学习教程
2016/05/20 Javascript
详解VueRouter进阶之导航钩子和路由元信息
2017/09/13 Javascript
微信小程序使用Socket的实例
2017/09/19 Javascript
js 只比较时间大小的实例
2017/10/26 Javascript
Webpack实战加载SVG的方法
2017/12/26 Javascript
Angular 开发学习之Angular CLI的安装使用
2017/12/31 Javascript
使用live-server快速搭建本地服务器+自动刷新的方法
2018/03/09 Javascript
微信小程序实现人脸识别
2018/05/25 Javascript
vue3.0 CLI - 2.6 - 组件的复用入门教程
2018/09/14 Javascript
详解NodeJS Https HSM双向认证实现
2019/03/12 NodeJs
jquery.pager.js分页实现详解
2019/07/29 jQuery
python局部赋值的规则
2013/03/07 Python
Python request设置HTTPS代理代码解析
2018/02/12 Python
python3读取excel文件只提取某些行某些列的值方法
2018/07/10 Python
Python3 chardet模块查看编码格式的例子
2019/08/14 Python
解决python 读取excel时 日期变成数字并加.0的问题
2019/10/08 Python
Python 网络编程之UDP发送接收数据功能示例【基于socket套接字】
2019/10/11 Python
Pytest参数化parametrize使用代码实例
2020/02/22 Python
印尼综合在线预订网站:Tiket.com(机票、酒店、火车、租车和娱乐)
2018/10/11 全球购物
什么是网络协议
2016/04/07 面试题
好的自荐信包括什么内容
2013/11/07 职场文书
《中彩那天》教学反思
2014/02/22 职场文书
社区交通安全实施方案
2014/03/22 职场文书
物理课外活动总结
2014/08/27 职场文书
前台接待岗位职责范本
2015/04/03 职场文书
社区禁毒宣传活动总结
2015/05/07 职场文书