浅谈JavaScript function函数种类


Posted in Javascript onDecember 29, 2014

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

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的function函数有所了解了呢,有疑问就给我留言吧。

Javascript 相关文章推荐
jQuery-Tools-overlay 使用介绍
Jul 14 Javascript
jquery $.each()使用探讨
Sep 23 Javascript
javascript实现网页背景烟花效果的方法
Aug 06 Javascript
详解javascript中的事件处理
Nov 06 Javascript
jQuery动态生成Bootstrap表格
Nov 01 Javascript
MUI顶部选项卡的用法(tab-top-webview-main)详解
Oct 08 Javascript
AngularJS实现的输入框字数限制提醒功能示例
Oct 26 Javascript
详解Vue文档中几个易忽视部分的剖析
Mar 24 Javascript
jQuery实现动态添加和删除input框代码实例
Mar 29 jQuery
javascript实现超好看的3D烟花特效
Jan 01 Javascript
解决微信授权成功后点击按返回键出现空白页和报错的问题
Jun 08 Javascript
使用jquery实现轮播图效果
Jan 02 jQuery
JavaScript异步加载浅析
Dec 28 #Javascript
JavaScript设计模式之工厂方法模式介绍
Dec 28 #Javascript
JavaScript设计模式之抽象工厂模式介绍
Dec 28 #Javascript
JavaScript设计模式之单件模式介绍
Dec 28 #Javascript
理解javascript回调函数
Dec 28 #Javascript
JavaScript设计模式之建造者模式介绍
Dec 28 #Javascript
如何编写高质量JS代码
Dec 28 #Javascript
You might like
php 一元分词算法
2009/11/30 PHP
PHP Try-catch 语句使用技巧
2016/02/28 PHP
php发送http请求的常用方法分析
2016/11/08 PHP
PHP实现的无限分类类库定义与用法示例【基于thinkPHP】
2018/08/06 PHP
分享几种好用的PHP自定义加密函数(可逆/不可逆)
2020/09/15 PHP
JQuery写动态树示例代码
2013/07/31 Javascript
jQuery实现强制cookie过期方法汇总
2015/05/22 Javascript
JavaScript操作XML文件之XML读取方法
2015/06/09 Javascript
js实现无缝循环滚动
2020/06/23 Javascript
jQuery EasyUI 页面加载等待及页面等待层
2017/02/06 Javascript
javascript修改浏览器title方法 JS动态修改浏览器标题
2017/11/30 Javascript
jQuery实现简单的下拉菜单导航功能示例
2017/12/07 jQuery
详解使用React.memo()来优化函数组件的性能
2019/03/19 Javascript
python 字符串转列表 list 出现\ufeff的解决方法
2017/06/22 Python
python爬虫_实现校园网自动重连脚本的教程
2018/04/22 Python
python+pandas分析nginx日志的实例
2018/04/28 Python
numpy中loadtxt 的用法详解
2018/08/03 Python
Python 单元测试(unittest)的使用小结
2018/11/14 Python
Linux上使用Python统计每天的键盘输入次数
2019/04/17 Python
Python 中的 import 机制之实现远程导入模块
2019/10/29 Python
Python通过fnmatch模块实现文件名匹配
2020/09/30 Python
德国PC硬件网站:CASEKING
2016/10/20 全球购物
美国高品质个性化珠宝销售网站:Jewlr
2018/05/03 全球购物
巴西服装和鞋子购物网站:Marisa
2018/10/25 全球购物
小区门卫工作职责
2013/12/14 职场文书
青年创业培训欢迎词
2014/01/08 职场文书
单位领导证婚词
2014/01/14 职场文书
学习标兵获奖感言
2014/02/20 职场文书
《中国梦我的梦》大学生演讲稿
2014/08/20 职场文书
奥巴马经典演讲稿
2014/09/13 职场文书
地下停车场租赁协议范本
2014/10/07 职场文书
社区务虚会发言材料
2014/10/20 职场文书
搞笑的婚礼主持词
2015/06/29 职场文书
nginx如何将http访问的网站改成https访问
2021/03/31 Servers
python基础学习之生成器与文件系统知识总结
2021/05/25 Python
纯html+css实现打字效果
2021/08/02 HTML / CSS