详解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 相关文章推荐
JS 图片缩放效果代码
Jun 09 Javascript
javascript学习笔记(十五) js间歇调用和超时调用
Jun 20 Javascript
前端必备神器 Snap.svg 弹动效果
Nov 10 Javascript
JS实现网站菜单拖拽移位效果的方法
Sep 24 Javascript
网页从弹窗页面单选框传值至父页面代码分享
Sep 29 Javascript
跟我学习javascript的循环
Nov 18 Javascript
js命名空间写法示例
Dec 18 Javascript
jQuery实现的简单百分比进度条效果示例
Aug 01 Javascript
mui上拉加载功能实例详解
Apr 13 Javascript
详解Vue.js iview实现树形权限表(可扩展表)
Sep 30 Javascript
使用vue-cli3 创建vue项目并配置VS Code 自动代码格式化 vue语法高亮问题
May 14 Javascript
Vue全局事件总线你了解吗
Feb 24 Vue.js
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 采集程序原理分析篇
2010/03/05 PHP
在PHP中实现Javascript的escape()函数代码
2010/08/08 PHP
基于PHP中的常用函数回顾
2013/07/11 PHP
对PHP新手的一些建议(PHP学习经验总结)
2014/08/20 PHP
PHP Echo字符串的连接格式
2016/03/07 PHP
PHP创建文件,并向文件中写入数据,覆盖,追加的实现代码
2016/03/25 PHP
PHP+ajax实现获取新闻数据简单示例
2018/05/08 PHP
网页里控制图片大小的相关代码
2006/06/13 Javascript
论坛里点击别人帖子下面的回复,回复标题变成“回复 24# 的帖子”
2009/06/14 Javascript
jquery 单击li防止重复加载的实现代码
2010/12/24 Javascript
JavaScript中清空数组的三种方法分享
2011/04/07 Javascript
深入浅析Bootstrap列表组组件
2016/05/03 Javascript
全面解析Bootstrap中tooltip、popover的使用方法
2016/06/13 Javascript
jquery实现简单的瀑布流布局
2016/12/11 Javascript
使用Bootstrap美化按钮实例代码(demo)
2017/02/03 Javascript
Nodejs进阶之服务端字符编解码和乱码处理
2017/09/04 NodeJs
微信小程序文章详情页面实现代码
2018/09/10 Javascript
关于JS模块化的知识点分享
2019/10/16 Javascript
解决三元运算符 报错“SyntaxError: can''t assign to conditional expression”
2020/02/12 Javascript
Element Popover 弹出框的使用示例
2020/07/26 Javascript
Python中使用第三方库xlrd来读取Excel示例
2015/04/05 Python
Python使用Scrapy爬取妹子图
2015/05/28 Python
python3.5使用tkinter制作记事本
2016/06/20 Python
python 使用get_argument获取url query参数
2017/04/28 Python
Python基于回溯法子集树模板解决找零问题示例
2017/09/11 Python
浅谈用Python实现一个大数据搜索引擎
2017/11/28 Python
Pycharm+Scrapy安装并且初始化项目的方法
2019/01/15 Python
Python标准库:内置函数max(iterable, *[, key, default])说明
2020/04/25 Python
python编写一个会算账的脚本的示例代码
2020/06/02 Python
html5 viewport使用方法示例详解
2013/12/02 HTML / CSS
意大利火车票和铁路通行证专家:ItaliaRail
2019/01/22 全球购物
电大学习个人自我评价范文
2013/10/04 职场文书
学校办公室主任职责
2013/12/27 职场文书
司机岗位职责范本
2015/04/10 职场文书
首都博物馆观后感
2015/06/05 职场文书
golang interface判断为空nil的实现代码
2021/04/24 Golang