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 位置函数offset,innerWidth,innerHeight,outerWidth,outerHeight,scrollTop,scrollLeft
Mar 23 Javascript
jquery实现漂浮在网页右侧的qq在线客服插件示例
May 13 Javascript
动态加载dtree.js树treeview(示例代码)
Dec 17 Javascript
使用js实现数据格式化
Dec 03 Javascript
javascript笛卡尔积算法实现方法
Apr 08 Javascript
Bootstrap每天必学之前端开发框架
Nov 19 Javascript
js如何改变文章的字体大小
Jan 08 Javascript
用JS动态改变表单form里的action值属性的两种方法
May 25 Javascript
jQuery获取file控件中图片的宽高与大小
Aug 04 Javascript
jQuery 的 ready()的纯js替代方法
Nov 20 Javascript
JavaScript注入漏洞的原理及防范(详解)
Dec 04 Javascript
详解微信小程序input标签正则初体验
Aug 18 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
世界收音机发展史
2021/03/01 无线电
safari下载文件自动加了html后缀问题
2018/11/09 PHP
js不是基础的基础
2006/12/24 Javascript
javascript 计算两个整数的百分比值
2009/12/26 Javascript
JavaScript中yield实用简洁实现方式
2010/06/12 Javascript
iframe异步加载实现点击左边菜单加载右边内容实例讲解
2013/03/04 Javascript
探讨在JQuery和Js中,如何让ajax执行完后再继续往下执行
2013/07/09 Javascript
jquery.ui.draggable中文文档(原文翻译)
2013/11/15 Javascript
Linux下使用jq友好的打印JSON技巧分享
2014/11/18 Javascript
浅谈JavaScript中的字符编码转换问题
2015/07/07 Javascript
jQuery代码实现对话框右上角菜单带关闭×
2016/05/03 Javascript
Vue2.x中的Render函数详解
2017/05/30 Javascript
如何理解Vue的render函数的具体用法
2017/08/30 Javascript
jQuery中 DOM节点操作方法大全
2017/10/12 jQuery
JavaScript 判断对象中是否有某属性的常用方法
2018/06/14 Javascript
详解JavaScript 新语法之Class 的私有属性与私有方法
2019/04/23 Javascript
基于JavaScript实现单例模式
2019/10/30 Javascript
通过滑动翻页效果实现和移动端click事件问题
2021/01/26 Javascript
Python 获取新浪微博的最新公共微博实例分享
2014/07/03 Python
Python实现冒泡,插入,选择排序简单实例
2014/08/18 Python
Python数据分析之双色球中蓝红球分析统计示例
2018/02/03 Python
Python爬虫框架Scrapy实例代码
2018/03/04 Python
Python中单线程、多线程和多进程的效率对比实验实例
2019/05/14 Python
python conda操作方法
2019/09/11 Python
Python enumerate内置库用法解析
2020/02/24 Python
Python编程快速上手——强口令检测算法案例分析
2020/02/29 Python
keras load model时出现Missing Layer错误的解决方式
2020/06/11 Python
Python制作一个仿QQ办公版的图形登录界面
2020/09/22 Python
GNC健安喜美国官网:美国第一营养品牌
2016/07/22 全球购物
爱尔兰家电数码商城:Currys PC World爱尔兰
2016/07/23 全球购物
Bally巴利英国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/05/07 全球购物
法国包包和行李箱销售网站:Bagage24.fr
2020/03/24 全球购物
测试工程师职业规划书
2014/02/06 职场文书
入党积极分子自我鉴定范文
2014/03/25 职场文书
2014年个人委托书范本
2014/10/13 职场文书
ant design charts 获取后端接口数据展示
2022/05/25 Javascript