JavaScript函数基础与匿名函数实例详解

JavaScript函数基础与匿名函数实例详解

本文通过具体实例详细解析JavaScript中匿名函数的应用方法，旨在为读者提供参考与学习思路。

内容摘要：

本文聚焦于JavaScript中最基础且至关重要的函数概念。撰写此文的初衷源于面试中涉及的考点，旨在通过回顾与梳理，达到温故知新的效果。

首先展示一个示例代码，若能理解该示例，即表明已掌握本文核心要点。

var f = (function() {
function f() {return 10;}
return f();
function f() {return 20;}
var f = 30;
})();
console.log(f);

《JavaScript高级程序设计》中指出，函数用于封装多条语句，可在任意位置、任意时刻被调用执行。此前介绍的严格模式（strict mode）对函数施加了特定限制：

① 禁止将函数命名为eval或arguments ② 禁止将参数命名为eval或arguments ③ 禁止出现两个命名参数同名的情况

若违反上述任一规定，将导致语法错误，致使代码无法执行。

函数定义与参数处理机制

函数定义方式

函数的定义主要包含三种形式：

1、使用构造函数方式

var fun = new Funciton();

2、使用普通声明方式

function fun() {}

3、使用函数表达式（函数式）方式

var fun = function() {};

上述三种方式均可用于定义名为fun的函数。

参数处理机制

JavaScript函数对传入参数的数量和类型均不设限制。即使函数定义仅接收两个参数，调用时仍可传递一个、三个或零个参数。这是因为函数内部通过数组形式表示参数，在函数体内可通过arguments对象访问该参数数组。举例说明：

function sayHi() {
alert("Hello " + arguments[0] + "," + arguments[1]);
}

可通过访问arguments对象的length属性来确定传入参数的数量。此外，函数的length属性会返回函数定义时的参数个数。

需注意：所有参数均以值传递方式传入，无法通过引用传递参数。

函数不支持重载，仅支持重写

若定义多个同名函数，该名称将归属于最后定义的函数。示例如下：

function add(num) {
return num + 100;
}
function add(num) {
return num + 200;
}
var result = add(100) //300

需注意：函数在执行完return语句后立即停止执行并退出。

函数分类与匿名函数调用方法

函数分类

函数可分为两类：有名函数与匿名函数。以下为一个有名函数的示例：

function fun() {
}

调用时，只需执行fun()即可。

匿名函数，顾名思义即没有函数名称。例如：

function() {}

函数调用通常依赖函数名，那么匿名函数如何调用？一种方法是将匿名函数赋值给一个变量，由该变量充当函数名进行调用；另一种方法是使用括号进行调用，以下列举三种方法：

1、(function() {return;}());

2、(function() {return;})();

3、function() {return;}();

具体示例：

(function(x, y) {
alert(x + y);
})(2,3);
//alert(5)

数值2和3将作为参数传递给x和y。

复杂示例解析：变量提升与闭包

接下来解析文章开头的示例，该示例涉及闭包概念，后续将对此进行说明。

首先定义变量f，并赋值为一个匿名函数。此处需注意，函数内所有变量声明均会被前置，因此匿名函数内的执行顺序如下：

var f = (function() {
var f = 30;
function f() {return 10;}
function f() {return 20;}
return f();
})();

外部变量f与内部变量f处于不同作用域（闭包），彼此互不影响。由于函数不支持重载，外部变量f最终等于(function f() {return 20;})();，因此最终输出结果为20。

希望本文所述内容能对您的JavaScript程序设计有所帮助。