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 UI 1.72 之datepicker
Dec 29 Javascript
用XMLDOM和ADODB.Stream实现base64编码解码实现代码
Nov 28 Javascript
IE6、IE7中获取Button元素的值的bug说明
Aug 28 Javascript
javascript 闭包
Sep 15 Javascript
Javascript写入txt和读取txt文件示例
Feb 12 Javascript
JavaScript打印网页指定区域的例子
May 03 Javascript
javascript学习总结之js使用技巧
Sep 02 Javascript
jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
Mar 21 jQuery
基于Vue实例生命周期(全面解析)
Aug 16 Javascript
vue中设置height:100%无效的问题及解决方法
Jul 27 Javascript
基于JS实现视频上传显示进度条
May 12 Javascript
vue-router之解决addRoutes使用遇到的坑
Jul 19 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
BBS(php &amp; mysql)完整版(六)
2006/10/09 PHP
PHP 组件化编程技巧
2009/06/06 PHP
带你了解PHP7 性能翻倍的关键
2015/11/19 PHP
关于js日期转化为毫秒数“节省20%的效率和和节省9个字符“问题
2012/03/01 Javascript
javascript学习笔记之函数定义
2015/06/25 Javascript
全面解析Bootstrap弹窗的实现方法
2015/12/01 Javascript
浅谈addEventListener和attachEvent的区别
2016/07/14 Javascript
js中的eval()函数把含有转义字符的字符串转换成Object对象的方法
2016/12/02 Javascript
layUI实现列表查询功能
2019/07/27 Javascript
[01:10:58]Spirit vs NB Supermajor小组赛 A组败者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
Python操作json数据的一个简单例子
2014/04/17 Python
Python提取Linux内核源代码的目录结构实现方法
2016/06/24 Python
python WindowsError的错误代码详解
2017/07/23 Python
Python IDLE入门简介
2017/12/08 Python
Python实现合并同一个文件夹下所有PDF文件的方法示例
2018/04/28 Python
Python中反射和描述器总结
2018/09/23 Python
Python实现html转换为pdf报告(生成pdf报告)功能示例
2019/05/04 Python
python实现QQ批量登录功能
2019/06/19 Python
python构造函数init实例方法解析
2020/01/19 Python
Python网页解析器使用实例详解
2020/05/30 Python
Numpy中ndim、shape、dtype、astype的用法详解
2020/06/14 Python
Python使用struct处理二进制(pack和unpack用法)
2020/11/12 Python
pandas实现导出数据的四种方式
2020/12/13 Python
CSS3实现王者匹配时的粒子动画效果
2019/04/12 HTML / CSS
MSC邮轮官方网站:加勒比海、地中海和世界各地的假期
2018/08/27 全球购物
英国排名第一的餐具品牌:Denby Pottery
2019/11/01 全球购物
会计电算化专业毕业生自荐信
2013/12/20 职场文书
老师给学生的表扬信
2014/01/17 职场文书
制药工程专业个人求职自荐信
2014/01/25 职场文书
社团2014年植树节活动总结
2014/03/11 职场文书
工程造价专业求职信
2014/07/17 职场文书
单位在职证明书
2014/09/11 职场文书
超市开店计划书
2014/09/15 职场文书
学校2016年九九重阳节活动总结
2016/04/01 职场文书
利用JavaScript写一个简单计算器
2021/11/27 Javascript
springboot为异步任务规划自定义线程池的实现
2022/06/14 Java/Android