JavaScript function函数种类（转）

转自：http://www.cnblogs.com/polk6/p/3284839.html

JavaScript function函数种类

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

目录

1. 普通函数：介绍普通函数的特性：同名覆盖、arguments对象、默认返回值等。

2. 匿名函数：介绍匿名函数的特性：变量匿名函数、无名称匿名函数。

3. 闭包函数：介绍闭包函数的特性。

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 JavaScript Array对象

　　3.4 JavaScript Date对象

　　3.5 JavaScript Math和Number对象

　　3.6 JavaScript String对象

　　3.7 JavaScript Object对象

　　3.8 JavaScript 自定义对象

　　3.9 JavaScript 对象属性介绍

　　3.10 JavaScript 开发规范

4.BOM

　　4.1 HTML BOM Browser对象

　　4.2 HTML 获取屏幕、浏览器、页面的高度宽度

5.DOM

　　5.1 HTML DOM 介绍

　　5.2 HTML DOM 对象

　　5.3 HTML 事件(一) 事件的介绍

　　5.4 HTML 事件(二) 事件的注册与注销

　　5.5 HTML 事件(三) 事件流与事件委托

　　5.6 HTML 事件(四) 模拟事件操作

6.HTML5

　　6.1 HTML5 介绍

　  6.2 HTML5 语义元素(一)页面结构

　  6.3 HTML5 语义元素(二)文本内容

　　6.4 HTML5 input元素新的特性

　　6.5 HTML5 progress和meter控件

只是记录了自己在学习、使用Web前端内容时的心得和碰到的问题。

参考文献：

1）http://www.w3school.com.cn/

2）《JavaScript权威指南(第六版)》

时间： 2024-11-06 12:00:40

JavaScript function函数种类（转）的相关文章

JavaScript function函数种类

原文:JavaScript function函数种类 本篇主要介绍普通函数.匿名函数.闭包函数 1.普通函数介绍 1.1 示例 function ShowName(name) { alert(name); } 1.2 Js中同名函数的覆盖 在Js中函数是没有重载,定义相同函数名.不同参数签名的函数,后面的函数会覆盖前面的函数.调用时,只会调用后面的函数. var n1 = 1; function add(value1) { return n1 + 1; } alert(add(n1));//调用

JavaScript Function 函数深入总结

整理了JavaScript中函数Function的各种,感觉函数就是一大对象啊,各种知识点都能牵扯进来,不单单是 Function 这个本身原生的引用类型的各种用法,还包含执行环境,作用域,闭包,上下文,私有变量等知识点的深入理解. 函数中的return return 语句可以不带有任何返回值,在这种情况下( return; 或函数中不含 return 语句时),函数在停止执行后将返回 undefiend 值.这种用法一般在需要提前停止函数执行而又不需要返回值的情况下. return false

JavaScript学习总结（四）function函数部分

转自:http://segmentfault.com/a/1190000000660786 概念 函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块. js 支持两种函数:一类是语言内部的函数(如eval() ),另一类是自己创建的. 在 JavaScript 函数内部声明的变量(使用 var)是局部变量,所以只能在函数内部访问它.(该变量的作用域是局部的). 您可以在不同的函数中使用名称相同的局部变量,因为只有声明过该变量的函数才能识别出该变量. 函数调用 有如下四种调用js函数的方式

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

函数对象和其他内部对象的关系 除了函数对象,还有很多内部对象,比如:Object.Array.Date.RegExp.Math.Error.这些名称实际上表示一个 类型,可以通过new操作符返回一个对象.然而函数对象和其他对象不同,当用typeof得到一个函数对象的类型时,它仍然会返回字符串 "function",而typeof一个数组对象或其他的对象时,它会返回字符串"object".下面的代码示例了typeof不同类型的情况: 以下是引用片段: alert(ty

[JavaScript]function expression(函数陈述式) VS declaration (函数运算式)

摘要:[JavaScript]function expression(函数陈述式) VS declaration (函数运算式) 先前写过一篇[Javascript]Call method(调用函数)关于函数声明,这边进阶一下做一个比较. 但在开始前, 先来回忆一下如何自定一个JS函数 How to create JS custom function 第一种 - declaration (函数运算式) function callTest(){ console.log(123); } callTe

JavaScript系列----函数(Function)篇

1.函数 在W3C中函数的定义是这么说的:函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块.    诚然,从这种抽象的定义中我们得不到什么有价值的东西.下面,举例来列举出函数的几种定义方式: function add(num1, num2) { return num1 + num2; } var add = function (num1, num2) { return num1 + num2; }//这是比较常见的两种 //下面两种比较少见var add=new Function("n

深入理解 JavaScript Function

1.Function Arguments JavaScript 函数的参数 类型可以是 复杂类型如  Object or Array 和简单类型 String Integer null undefined;当参数是 复杂类型的时候,将会把 复杂类型的 引用传出 函数体内,也就是传入函数内的不是 复杂类型的副本,而是其在内存中的指针.当参数是 简单类型的时候,就会直接传值进入函数体内.look the below demostrated: var obj={name:'joe'}; (functi

javascript中函数作用域之”提升“

javascript中函数作用域之变量提升 当我们在函数内部用关键字var声明一个变量的时候,此变量的作用域限制在当前函数. 提升:在一个作用域内部,不管一个变量用var声明的位置在哪里,这个变量属于当前整个作用域,并且在当前作用域的任何位置都可以访问它.在javascript中,这种行为/现象称之为"提升",即一个变量在一个作用域的任何位置用var声明,javascript引擎都会把这些用var声明的变量"移动"到当前作用域的开始处. 谈到javascript这种

javaScript定义函数的三种方式&amp;amp;变量的作用域

一.函数定义 方式1.普通方式定义函数 function 函数名(參数n){ 函数体 } function add(a,b){ return a+b; } 方式2.直接量定义函数 var 函数名=function(參数n){ 函数体 } var add=function(a,b){ return a+b; } 方式三.构造方式定义函数 var 函数名=new Function(參数n,函数体); var add = new Function('a,b','return a+b;'); 二.变量的