浅谈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 相关文章推荐
JavaScript 异步调用框架 (Part 1 - 问题 &amp; 场景)
Aug 03 Javascript
url 编码 js url传参中文乱码解决方案
Apr 11 Javascript
在js文件中如何获取basePath处理js路径问题
Jul 10 Javascript
js函数名与form表单元素同名冲突的问题
Mar 07 Javascript
EasyUI,点击开启编辑框,并且编辑框获得焦点的方法
Mar 01 Javascript
jquery对所有input type=text的控件赋值实现方法
Dec 02 Javascript
js实现常见的工具条效果
Mar 02 Javascript
js仿淘宝商品放大预览功能
Mar 15 Javascript
d3.js入门教程之数据绑定详解
Apr 28 Javascript
AngularJS点击添加样式、点击变色设置的实例代码
Jul 27 Javascript
layui实现checkbox的目录树tree的例子
Sep 12 Javascript
js异步接口并发数量控制的方法示例
Nov 22 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
UCenter 批量添加用户的php代码
2012/07/17 PHP
PHP pear安装配置教程
2016/05/14 PHP
thinkPHP+mysql+ajax实现的仿百度一下即时搜索效果详解
2019/07/15 PHP
基于Laravel 5.2 regex验证的正确写法
2019/09/29 PHP
用js+xml自动生成表格的东西
2006/12/21 Javascript
在IE中调用javascript打开Excel的代码(downmoon原作)
2007/04/02 Javascript
两个listbox实现选项的添加删除和搜索
2013/03/01 Javascript
简略说明Javascript中的= =(等于)与= = =(全等于)区别
2013/04/16 Javascript
Jquery动态进行图片缩略的原理及实现
2013/08/13 Javascript
jquery获得option的值和对option进行操作
2013/12/13 Javascript
js+div实现图片滚动效果代码
2014/02/10 Javascript
jQuery 插件开发指南
2014/11/14 Javascript
JavaScript 对象详细整理总结
2016/09/29 Javascript
Dropzone.js实现文件拖拽上传功能(附源码下载)
2016/11/22 Javascript
基于vue.js实现图片轮播效果
2016/12/01 Javascript
vue+express 构建后台管理系统的示例代码
2018/07/19 Javascript
使用Vue CLI创建typescript项目的方法
2019/08/09 Javascript
微信小程序登陆注册功能的实现代码
2019/12/10 Javascript
详细分析vue响应式原理
2020/06/22 Javascript
python三元运算符实现方法
2013/12/17 Python
python使用fork实现守护进程的方法
2017/11/16 Python
详解python实现小波变换的一个简单例子
2019/07/18 Python
python 列表、字典和集合的添加和删除操作
2019/12/16 Python
kafka-python 获取topic lag值方式
2019/12/23 Python
如何用Matplotlib 画三维图的示例代码
2020/07/28 Python
Python‘==‘ 及 ‘is‘相关原理解析
2020/09/05 Python
python操作toml文件的示例代码
2020/11/27 Python
CSS3中使用RGBa来调节透明度的教程
2016/05/09 HTML / CSS
Erwin Müller穆勒家居瑞士官网:您整个家庭的邮购公司
2019/12/28 全球购物
报到证丢失证明
2014/01/11 职场文书
财务科长个人对照检查材料
2014/09/18 职场文书
初中家长评语和期望
2014/12/26 职场文书
教师个人成长总结
2015/02/11 职场文书
本溪水洞导游词
2015/02/11 职场文书
Python批量将csv文件转化成xml文件的实例
2021/05/10 Python
虚拟机linux端mysql数据库无法远程访问的解决办法
2021/05/26 MySQL