JavaScript function函数种类介绍

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

1.普通函数介绍

1.1 示例

1
2
3
function ShowName(name) {
    alert(name);
}

1.2 Js中同名函数的覆盖

在Js中函数是没有重载,定义相同函数名、不同参数签名的函数,后面的函数会覆盖前面的函数。调用时,只会调用后面的函数。

1
2
3
4
5
6
7
8
9
10
11
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,操作可变参数:传入函数的参数数量大于定义时的参数数量。

1
2
3
4
5
6
7
function showNames(name) {
    alert(name);//张三
    for (var i = 0; i < arguments.length; i++) {
        alert(arguments[i]);//张三、李四、王五
    }
}
showNames('张三','李四','王五');

1.4 函数的默认范围值

若函数没有指明返回值,默认返回的是'undefined'

1
2
3
function showMsg() {
}
alert(showMsg());//输出:undefined

  

2.匿名函数

2.1 变量匿名函数

2.1.1 说明

可以把函数赋值给变量、事件。

2.1.2 示例

1
2
3
4
5
//变量匿名函数,左侧可以为变量、事件等
var anonymousNormal = function (p1, p2) {
    alert(p1+p2);
}
anonymousNormal(3,6);//输出9

2.1.3 适用场景

①避免函数名污染。若先声明个带名称的函数,再赋值给变量或事件,就造成了函数名的滥用。

2.2 无名称匿名函数

2.2.1 说明

即在函数声明时,在后面紧跟参数。Js语法解析此函数时,里面代码立即执行。

2.2.2 示例

1
2
3
(function (p1) {
    alert(p1);
})(1);

2.2.3 适用场景

①只需执行一次的。如浏览器加载完,只需要执行一次且后面不执行的功能。

3. 闭包函数

3.1 说明

假设,函数A内部声明了个函数B,函数B引用了函数B之外的变量,并且函数A的返回值为函数B的引用。那么函数B就是闭包函数。

3.2 示例

3.2.1 示例1:全局引用与局部引用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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:有参闭包函数

1
2
3
4
5
6
7
8
9
10
11
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内的变量共享

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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的变量。

==================================系列文章==========================================

本篇文章:3.2  JavaScript function函数种类介绍

Web开发之路系列文章

1.HTML

  1.1 HTML页面源代码布局介绍

  1.2 HTML基础控件介绍

  1.3 iframe 和 frameset 的区别

  1.4 name、id、class 的区别

  1.5 table、form表单标签的介绍以及get和post提交方式

2.CSS 层叠样式表

  2.1 CSS 选择器及各样式引用方式介绍

  2.2 CSS HTML元素布局及Display属性介绍

  2.3 CSS Float 浮动属性介绍

  2.4 CSS Position 定位属性介绍

3.JavaScript介绍

  3.1 JavaScript var关键字、变量的状态、异常处理、命名规范等介绍

  3.2 JavaScript function函数种类介绍

  3.3 Json对象、类、数组、字典操作

4.Dom

  4.1 Window对象 : 对浏览器的当前窗口进行操作。

  4.2 Navigator对象 :对浏览器进行操作。包括获取浏览器的名称、平台、版本信息等等。

  4.3 Screen对象 :对显示器屏幕进行操作。包括获取屏幕的高度、宽度。

  4.4 Location对象 :对当前页面的URL进行操作。

  4.5 Document对象 : 对HTML内的元素进行操作。

  4.6 Event对象 :HTML元素的事件操作。

5.Jquery

  5.1 Jquery选择器

  5.2 常用的方法

  5.3 对数组、字典进行操作

  5.4 指定一个对象,获取相邻元素

  5.5 动态操作HTML元素

  5.6 事件操作

  5.7 动画操作

  5.8 Css操作

  5.9 扩展插件

6.EasyUI 框架

7.其他技术

  7.1 Ajax

  7.2 正则表达式

  

只是记录了自己在学习、使用Web前端内容时的心得和碰到的问题。内容里的很多部分参考自 http://www.w3school.com.cn/

 
 
 
标签: Web

JavaScript function函数种类介绍的更多相关文章

  1. JavaScript function函数种类(转)

    转自:http://www.cnblogs.com/polk6/p/3284839.html JavaScript function函数种类 本篇主要介绍普通函数.匿名函数.闭包函数 目录 1. 普通 ...

  2. JavaScript function函数种类

    本篇主要介绍普通函数.匿名函数.闭包函数 目录 1. 普通函数:介绍普通函数的特性:同名覆盖.arguments对象.默认返回值等. 2. 匿名函数:介绍匿名函数的特性:变量匿名函数.无名称匿名函数. ...

  3. javascript:function 函数声明和函数表达式 详解

    函数声明(缩写为FD)是这样一种函数: 有一个特定的名称 在源码中的位置:要么处于程序级(Program level),要么处于其它函数的主体(FunctionBody)中 在进入上下文阶段创建 影响 ...

  4. JavaScript Function 函数深入总结

    整理了JavaScript中函数Function的各种,感觉函数就是一大对象啊,各种知识点都能牵扯进来,不单单是 Function 这个本身原生的引用类型的各种用法,还包含执行环境,作用域,闭包,上下 ...

  5. JavaScript Function(函数表达式)

    创建函数 创建函数的方式有两种:1.函数声明,2.函数表达式 函数声明的语法为 functionName(); //不会报错,函数声明提升function functionName(arg0,arg1 ...

  6. 简单介绍Javascript匿名函数和面向对象编程

    忙里偷闲,简单介绍一下Javascript中匿名函数和闭包函数以及面向对象编程.首先简单介绍一下Javascript中的密名函数. 在Javascript中函数有以下3中定义方式: 1.最常用的定义方 ...

  7. 【转】JavaScript里Function函数实现可变参数

    转载:  http://www.oschina.net/question/54100_15938 使用javascript类库函数时,经常会遇到一个函数,可以使用不同个数的参数的情况 比如:exp(v ...

  8. JavaScript中Function函数与Object对象的关系

    函数对象和其他内部对象的关系 除了函数对象,还有很多内部对象,比如:Object.Array.Date.RegExp.Math.Error.这些名称实际上表示一个 类型,可以通过new操作符返回一个对 ...

  9. JavaScript之Function函数深入总结

    整理了JavaScript中函数Function的各种,感觉函数就是一大对象啊,各种知识点都能牵扯进来,不单单是 Function 这个本身原生的引用类型的各种用法,还包含执行环境,作用域,闭包,上下 ...

随机推荐

  1. python_在windows下安装配置python开发环境及Ulipad开发工具

    最近开始学习Python,在网上寻找一下比较好的IDE.因为以前用C#做开发的,用Visual Studio作为IDE,鉴于用惯了VS这么强大的IDE,所以对IDE有一定的依赖性. Python的ID ...

  2. 左右JAVA示例代码事件分发和监督机制来实现-绝对原创有用

    文章标题:左右JAVA示例代码事件分发和监督机制来实现 文章地址: http://blog.csdn.net/5iasp/article/details/37054171 作者: javaboy201 ...

  3. HDU 2070 Fibbonacci Number

    Fibbonacci Number Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others ...

  4. 性能优化(一个)Hibernate 使用缓存(一个、两、查询)提高系统性能

    在hibernate有三种类型的高速缓存,我们使用最频繁.分别缓存.缓存和查询缓存.下面我们使用这三个缓存中的项目和分析的优点和缺点. 缓存它的作用在于提高性能系统性能,介于应用系统与数据库之间而存在 ...

  5. java阅读器hdfs单纯demo

    周围环境:eclipse + eclipse hadoop插入. hadoop + rhel6.4 package test; import java.io.IOException; import j ...

  6. Spark集群搭建简配+它到底有多快?【单挑纯C/CPP/HADOOP】

    最近耳闻Spark风生水起,这两天利用休息时间研究了一下,果然还是给人不少惊喜.可惜,笔者不善JAVA,只有PYTHON和SCALA接口.花了不少时间从零开始认识PYTHON和SCALA,不少时间答了 ...

  7. Python 2.7.3 Time与DateTime格式化

    import time import datetime class TimeX: '''时间工具,目前用于格式化时间''' @staticmethod def GetLocalTimeString_T ...

  8. View中的Razor使用

    View中的Razor使用   上一节:ASP.NET MVC5 + EF6 入门教程 (5) Model和Entity Framework 源码下载:点我下载 一.Razor简介 在解决方案资源管理 ...

  9. SQL点滴1—SET QUOTED_IDENTIFIER OFF语句的作用

    原文:SQL点滴1-SET QUOTED_IDENTIFIER OFF语句的作用 先看下面几个sql语句 代码   SELECT * FROM [USER]    WHERE a= 'netasp' ...

  10. Canvas入门(3):图像处理和渲染文本

    资源:http://www.ido321.com/997.html 一.图像处理(非特别说明,全部结果均来自最新版Google) 在HTML 5中,不仅能够使用Canvas API绘制图形,也能够用于 ...