详解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中Array 对象相关的几个方法
Dec 22 Javascript
JS中如何判断传过来的JSON数据中是否存在某字段
Aug 18 Javascript
Jquery通过JSON字符串创建JSON对象
Aug 24 Javascript
JavaScript实现按Ctrl键打开新页面
Sep 04 Javascript
JS+CSS实现可以凹陷显示选中单元格的方法
Mar 02 Javascript
javascript实现淘宝幻灯片广告展示效果
Apr 27 Javascript
jQuery实现仿QQ在线客服效果的滚动层代码
Oct 15 Javascript
Easyui 之 Treegrid 笔记
Apr 29 Javascript
Angular之指令Directive用法详解
Mar 01 Javascript
Vue设置长时间未操作登录自动到期返回登录页
Jan 22 Javascript
vue flex 布局实现div均分自动换行的示例代码
Aug 05 Javascript
js实现可爱的气泡特效
Sep 05 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中看实例学正则表达式
2006/12/25 PHP
php微信公众号开发之二级菜单
2018/10/20 PHP
PHP isset empty函数相关面试题及解析
2020/12/11 PHP
基于jquery的修改当前TAB显示标题的代码
2010/12/11 Javascript
很棒的学习jQuery的12个网站推荐
2011/04/28 Javascript
点击弹出层外区域关闭弹出层jquery特效示例
2013/08/25 Javascript
js实现漂浮回顶部按钮实例
2015/05/06 Javascript
JavaScript常用字符串与数组扩展函数小结
2016/04/24 Javascript
浅谈vue中.vue文件解析流程
2018/04/24 Javascript
zepto.js 实时监听输入框的方法
2018/12/04 Javascript
redux.js详解及基本使用
2019/05/24 Javascript
JavaScript中的函数式编程详解
2020/08/22 Javascript
简单理解Python中基于生成器的状态机
2015/04/13 Python
详解Python pygame安装过程笔记
2017/06/05 Python
python机器学习理论与实战(四)逻辑回归
2018/01/19 Python
简述Python2与Python3的不同点
2018/01/21 Python
python实现简单井字棋游戏
2020/03/04 Python
python实现引用其他路径包里面的模块
2020/03/09 Python
如何安装并在pycharm使用selenium的方法
2020/04/30 Python
KIKO美国官网:意大利的平价彩妆品牌
2017/05/16 全球购物
美国隐形眼镜网:Major Lens
2018/02/09 全球购物
Ajax请求总共有多少种Callback
2016/07/17 面试题
测量实习生自我鉴定
2013/09/19 职场文书
个人委托书范本
2014/04/02 职场文书
听课评语大全
2014/04/30 职场文书
环保专项行动方案
2014/05/12 职场文书
初中生旷课检讨书范文
2014/10/06 职场文书
党员四风问题个人对照检查材料
2014/10/26 职场文书
2014年客服工作总结与计划
2014/12/09 职场文书
医生个人年终总结
2015/02/28 职场文书
员工年度工作总结2015
2015/05/18 职场文书
《我们的民族小学》教学反思
2016/02/19 职场文书
如何利用js在两个html窗口间通信
2021/04/27 Javascript
Golang 使用Map实现去重与set的功能操作
2021/04/29 Golang
Mongo服务重启异常问题的处理方法
2021/07/01 MongoDB
HTML页面中使两个div并排显示的实现
2022/05/15 HTML / CSS