JavaScript function函数种类详解


Posted in Javascript onFebruary 22, 2016

本篇主要介绍普通函数、匿名函数、闭包函数

目录

  • 普通函数:介绍普通函数的特性:同名覆盖、arguments对象、默认返回值等。
  • 匿名函数:介绍匿名函数的特性:变量匿名函数、无名称匿名函数。
  • 闭包函数:介绍闭包函数的特性。

 

1. 普通函数
1.1 示例

function ShowName(name) {
  alert(name);
}

1.2 Js中同名函数的覆盖

在Js中函数是没有重载,定义相同函数名、不同参数签名的函数,后面的函数会覆盖前面的函数。调用时,只会调用后面的函数。

var n1 = 1;
 
function add(value1) {
  return n1 + 1;
}
alert(add(n1));//调用的是下面的函数,输出:3
 
function add(value1, value2) {
  return value1 + 2;
}
alert(add(n1));//输出:3

1.3 arguments对象

arguments 类似于C#的params,操作可变参数:传入函数的参数数量大于定义时的参数数量。

function showNames(name) {
  alert(name);//张三
  for (var i = 0; i < arguments.length; i++) {
    alert(arguments[i]);//张三、李四、王五
  }
}
showNames('张三','李四','王五');

1.4 函数的默认返回值

若函数没有指明返回值,默认返回的是'undefined'

function showMsg() {
}
alert(showMsg());//输出:undefined

2.匿名函数
2.1 变量匿名函数

2.1.1 说明
可以把函数赋值给变量、事件。

2.1.2 示例

//变量匿名函数,左侧可以为变量、事件等
var anonymousNormal = function (p1, p2) {
  alert(p1+p2);
}
anonymousNormal(3,6);//输出9

2.1.3 适用场景
①避免函数名污染。若先声明个带名称的函数,再赋值给变量或事件,就造成了函数名的滥用。

2.2 无名称匿名函数

2.2.1 说明
即在函数声明时,在后面紧跟参数。Js语法解析此函数时,里面代码立即执行。

2.2.2 示例

(function (p1) {
  alert(p1);
})(1);

2.2.3 适用场景
①只需执行一次的。如浏览器加载完,只需要执行一次且后面不执行的功能。

3. 闭包函数
3.1 说明

 假设,函数A内部声明了个函数B,函数B引用了函数B之外的变量,并且函数A的返回值为函数B的引用。那么函数B就是闭包函数。

3.2 示例

3.2.1 示例1:全局引用与局部引用

function funA() {
  var i = 0;
  function funB() { //闭包函数funB
    i++;
    alert(i)
  }
  return funB;
}
var allShowA = funA(); //全局变量引用:累加输出1,2,3,4等
 
function partShowA() {
  var showa = funA();//局部变量引用:只输出1
  showa();
}

allShowA是个全局变量,引用了函数funA。重复运行allShowA(),会输出1,2,3,4等累加的值。

执行函数partShowA(),因为内部只声明了局部变量showa来引用funA,执行完毕后因作用域的关系,释放showa占用的资源。

闭包的关键就在于作用域:全局变量占有的资源只有当页面变换或浏览器关闭后才会释放。var allShowA = funA() 时,相当于allShowA引用了funB(),从而使funB()里的资源不被GC回收,因此funA()里的资源也不会。 

3.2.2 示例2:有参闭包函数

function funA(arg1,arg2) {
  var i = 0;
  function funB(step) {
    i = i + step;
    alert(i)
  }
  return funB;
}
var allShowA = funA(2, 3); //调用的是funA arg1=2,arg2=3
allShowA(1);//调用的是funB step=1,输出 1
allShowA(3);//调用的是funB setp=3,输出 4

3.2.3 示例3:父函数funA内的变量共享

function funA() {
  var i = 0;
  function funB() {
    i++;
    alert(i)
  }
  allShowC = function () {// allShowC引用匿名函数,与funB共享变量i
    i++;
    alert(i)
  }
  return funB;
}
var allShowA = funA();
var allShowB = funA();//allShowB引用了funA,allShowC在内部重新进行了绑定,与allShowB共享变量i

3.3 适用场景

①保证函数funA内里的变量安全,因为外部不能直接访问funA的变量。

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
jQuery EasyUI API 中文文档 - Draggable 可拖拽
Sep 29 Javascript
使用jQuery在对象中缓存选择器的简单方法
Jun 30 Javascript
jQuery Validate插件实现表单强大的验证功能
Dec 18 Javascript
极易被忽视的javascript面试题七问七答
Feb 15 Javascript
jQuery实现订单提交页发送短信功能前端处理方法
Jul 04 Javascript
js检测离开或刷新页面时表单数据是否更改的方法
Aug 02 Javascript
Javascript 实现匿名递归的实例代码
May 25 Javascript
解决ztree搜索中多级菜单展示不全问题
Jul 05 Javascript
vue 实现axios拦截、页面跳转和token 验证
Jul 17 Javascript
基于Element的组件改造的树形选择器(树形下拉框)
Feb 27 Javascript
AutoJs实现刷宝短视频的思路详解
May 22 Javascript
详解React路由传参方法汇总记录
Nov 29 Javascript
JavaScript+html5 canvas实现图片破碎重组动画特效
Feb 22 #Javascript
jQuery获取字符串中出现最多的数
Feb 22 #Javascript
jQuery基于muipicker实现仿ios时间选择
Feb 22 #Javascript
简单谈谈javascript中this的隐式绑定
Feb 22 #Javascript
javascript实现一个简单的弹出窗
Feb 22 #Javascript
Js的Array数组对象详解
Feb 22 #Javascript
AngularJS中使用HTML5手机摄像头拍照
Feb 22 #Javascript
You might like
PHP Memcached应用实现代码
2010/02/08 PHP
php _autoload自动加载类与机制分析
2012/02/10 PHP
php类声明和php类使用方法示例分享
2014/03/29 PHP
PHP实现CSV文件的导入和导出类
2015/03/24 PHP
php 把数字转换成汉字的代码
2015/07/21 PHP
php页面,mysql数据库转utf-8乱码,utf-8编码问题总结
2015/08/27 PHP
WordPress后台中实现图片上传功能的实例讲解
2016/01/11 PHP
php连接mysql数据库最简单的实现方法
2019/09/24 PHP
JavaScript脚本性能优化注意事项
2008/11/18 Javascript
js 小贴士一星期合集
2010/04/07 Javascript
JS 实现点击a标签的时候让其背景更换
2013/10/15 Javascript
javascript setinterval 的正确语法如何书写
2014/06/17 Javascript
javascript cookie的简单应用
2016/02/24 Javascript
用js实现简单算法的实例代码
2016/09/24 Javascript
文件上传,iframe跨域数据提交的实现
2016/11/18 Javascript
使用vue-cli创建项目的图文教程(新手入门篇)
2018/05/02 Javascript
jQuery实现的老虎机跑动效果示例
2018/12/29 jQuery
vue中各种通信传值方式总结
2019/02/14 Javascript
vue在index.html中引入静态文件不生效问题及解决方法
2019/04/29 Javascript
浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法
2020/07/24 Javascript
vue动态合并单元格并添加小计合计功能示例
2020/11/26 Vue.js
[01:28:56]2014 DOTA2华西杯精英邀请赛 5 24 CIS VS DK
2014/05/26 DOTA
Python的Django框架中的Context使用
2015/07/15 Python
python输入错误密码用户锁定实现方法
2017/11/27 Python
python中利用numpy.array()实现俩个数值列表的对应相加方法
2019/08/26 Python
pytorch 求网络模型参数实例
2019/12/30 Python
利用keras加载训练好的.H5文件,并实现预测图片
2020/01/24 Python
python字典key不能是可以是啥类型
2020/08/04 Python
Python基于Socket实现简易多人聊天室的示例代码
2020/11/29 Python
华为旗下电子商务平台:华为商城
2016/08/06 全球购物
韩国休闲女装品牌网站:ANAIS
2016/08/24 全球购物
Joe Fresh官网:加拿大时尚品牌和零售连锁店
2016/11/30 全球购物
个人求职简历的自我评价
2013/10/19 职场文书
企业标语大全
2014/07/01 职场文书
导游词之麻姑仙境
2019/11/18 职场文书
centos8安装MongoDB的详细过程
2021/10/24 MongoDB