浅谈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插件简单实现代码
Apr 19 Javascript
javascript学习笔记(八) js内置对象
Jun 19 Javascript
jquery.messager.js插件导致页面抖动的解决方法
Jul 14 Javascript
js常用系统函数用法实例分析
Jan 12 Javascript
JavaScript和HTML DOM的区别与联系及Javascript和DOM的关系
Nov 15 Javascript
微信小程序实现皮肤功能(夜间模式)
Jun 18 Javascript
JS从非数组对象转数组的方法小结
Mar 26 Javascript
基于Vue实现拖拽效果
Apr 27 Javascript
解决Vue中引入swiper,在数据渲染的时候,发生不滑动的问题
Sep 27 Javascript
如何用RxJS实现Redux Form
Dec 29 Javascript
vue 获取url里参数的两种方法小结
Nov 12 Javascript
详解JS WebSocket断开原因和心跳机制
May 07 Javascript
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中rename函数用法分析
2014/11/15 PHP
浅析php原型模式
2014/11/25 PHP
PHP图像处理类库MagickWand用法实例分析
2015/05/21 PHP
设置下载不需要倒计时cookie(倒计时代码)
2008/11/19 Javascript
ExtJs3.0中Store添加 baseParams 的Bug
2010/03/10 Javascript
jQuery编写widget的一些技巧分享
2010/10/28 Javascript
处理及遍历XML文档DOM元素属性及方法整理
2013/08/23 Javascript
关闭浏览器时提示onbeforeunload事件
2013/12/25 Javascript
Node.js 学习笔记之简介、安装及配置
2015/03/03 Javascript
使用JQuery在线制作ppt并在线演示源码特效
2015/09/08 Javascript
浅谈javascript的Touch事件
2015/09/27 Javascript
Bootstrap框架的学习教程详解(二)
2016/10/18 Javascript
如何提高javascript加载速度
2016/12/26 Javascript
JavaScript之浏览器对象_动力节点Java学院整理
2017/07/03 Javascript
详解nodejs的express如何自动生成项目框架
2017/07/12 NodeJs
JS/HTML5游戏常用算法之碰撞检测 像素检测算法实例详解
2018/12/12 Javascript
详解Node.js amqplib 连接 Rabbit MQ最佳实践
2019/01/24 Javascript
layer ui插件显示tips时,修改字体颜色的实现方法
2019/09/11 Javascript
关于layui flow loading占位图的实现方法
2019/09/21 Javascript
JS实现动态无缝轮播
2020/01/11 Javascript
Python递归遍历列表及输出的实现方法
2015/05/19 Python
Python脚本实现自动将数据库备份到 Dropbox
2017/02/06 Python
python使用多进程的实例详解
2018/09/19 Python
总结Python图形用户界面和游戏开发知识点
2019/05/22 Python
django admin.py 外键,反向查询的实例
2019/07/26 Python
Keras—embedding嵌入层的用法详解
2020/06/10 Python
利用PyQt5+Matplotlib 绘制静态/动态图的实现代码
2020/07/13 Python
浅析Python 序列化与反序列化
2020/08/05 Python
详解python中的闭包
2020/09/07 Python
Hotels.com香港酒店网:你的自由行酒店订房专家
2018/01/22 全球购物
飞利浦法国官网:Philips法国
2019/07/10 全球购物
医学生实习自我鉴定
2013/09/27 职场文书
《只有一个地球》教学反思
2014/02/14 职场文书
大学学风建设方案
2014/05/04 职场文书
如何写求职信
2014/05/24 职场文书
2014年向国旗敬礼活动方案
2014/09/27 职场文书