详解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 相关文章推荐
Java 正则表达式学习总结和一些小例子
Sep 13 Javascript
js在输入框屏蔽按键,只能键入数字的示例代码
Jan 03 Javascript
Js类的静态方法与实例方法区分及jQuery拓展的两种方法
Jun 03 Javascript
如何使用Vuex+Vue.js构建单页应用
Oct 27 Javascript
AngularJS入门教程之模块化操作用法示例
Nov 02 Javascript
Vue中"This dependency was not found"问题的解决方法
Jun 19 Javascript
vue router 跳转后回到顶部的实例
Aug 31 Javascript
微信小程序如何获取手机验证码
Nov 04 Javascript
vue实现可视化可拖放的自定义表单的示例代码
Mar 20 Javascript
javascript的hashCode函数实现代码小结
Aug 11 Javascript
elementUI同一页面展示多个Dialog的实现
Nov 19 Javascript
JavaScript选择器函数querySelector和querySelectorAll
Nov 27 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
ThinkPHP3.2.2的插件控制器功能简述
2014/07/09 PHP
PHP中new static()与new self()的区别异同分析
2014/08/22 PHP
非常实用的php验证码类
2016/05/15 PHP
PHP实现动态添加XML中数据的方法
2018/03/30 PHP
PHP 代码简洁之道(小结)
2019/10/16 PHP
javascript 遍历验证所有文本框的值
2009/08/27 Javascript
setTimeout和setInterval的区别你真的了解吗?
2011/03/31 Javascript
重构Javascript代码示例(重构前后对比)
2013/01/23 Javascript
js数组Array sort方法使用深入分析
2013/02/21 Javascript
跟我学习JScript的Bug与内存管理
2015/11/18 Javascript
jQuery与Ajax以及序列化
2016/02/01 Javascript
JS中的eval 为什么加括号
2016/04/13 Javascript
AngularJS基础 ng-include 指令简单示例
2016/08/01 Javascript
AngularJS教程 ng-style 指令简单示例
2016/08/03 Javascript
Vue.js组件tabs实现选项卡切换效果
2016/12/01 Javascript
Vue 实现列表动态添加和删除的两种方法小结
2018/09/07 Javascript
Vue中的$set的使用实例代码
2018/10/08 Javascript
NodeJS使用Range请求实现下载功能的方法示例
2018/10/12 NodeJs
vue 中Virtual Dom被创建的方法
2019/04/15 Javascript
微信小程序学习总结(五)常见问题实例小结
2020/06/04 Javascript
jQuery实现简单轮播图效果
2020/12/27 jQuery
python 3.0 模拟用户登录功能并实现三次错误锁定
2017/11/01 Python
python3 unicode列表转换为中文的实例
2018/10/26 Python
pandas进行时间数据的转换和计算时间差并提取年月日
2019/07/06 Python
意大利奢侈品网站:Italist
2016/08/23 全球购物
Clarks西班牙官方在线商店:clarks鞋
2019/05/03 全球购物
英国门销售网站:Green Tree Doors
2020/01/07 全球购物
几道PHP的面试题
2012/05/19 面试题
公司会计主管岗位责任制
2014/03/01 职场文书
幼儿园教研活动总结
2014/04/30 职场文书
夫妻分居协议书范本(有子女版)
2014/11/01 职场文书
2015教师年度思想工作总结
2015/04/30 职场文书
数据结构课程设计心得体会
2016/01/15 职场文书
Golang之sync.Pool使用详解
2021/05/06 Golang
pytorch fine-tune 预训练的模型操作
2021/06/03 Python
vue实现拖拽交换位置
2022/04/07 Vue.js