JavaScript函数类型详解：普通函数、匿名函数与闭包机制

本文主要探讨JavaScript中普通函数、匿名函数以及闭包函数的基本概念与特性。

普通函数：解析普通函数的核心特性，包括同名覆盖行为、arguments对象的使用以及默认返回值机制。
匿名函数：探讨匿名函数的两种形式，即赋值给变量的匿名函数和无名称的立即执行匿名函数。
闭包函数：分析闭包函数的定义、工作原理及其在内存管理和变量保护方面的特性。

普通函数特性解析

1. 普通函数 1.1 示例


function ShowName(name) {
  alert(name);
}

1.2 JavaScript中同名函数的覆盖机制

在JavaScript中，函数不支持重载机制。当定义多个同名但参数签名不同的函数时，后定义的函数会覆盖先定义的函数。在调用该函数名时，实际执行的是最后定义的那个函数。


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关键字，用于处理可变数量的参数。当传入函数的参数数量超过函数定义时指定的参数数量时，可以通过arguments对象访问所有传入的参数。


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

1.4 函数的默认返回值

如果函数定义中未明确指定return语句，函数执行完毕后默认返回值为undefined。


function showMsg() {
}
alert(showMsg());//输出：undefined

匿名函数的应用与场景

2. 匿名函数 2.1 变量匿名函数

2.1.1 说明可以将函数表达式赋值给变量，或者作为事件处理程序绑定到DOM元素上。

2.1.2 示例


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

2.1.3 适用场景 ①避免命名空间污染。如果先声明一个具名函数，再将其赋值给变量或事件处理程序，会导致函数名在作用域中重复，造成命名滥用。使用匿名函数赋值给变量可以有效避免这一问题。

2.2 无名称匿名函数（立即执行函数）

2.2.1 说明即在函数声明后紧跟参数列表并立即调用。JavaScript语法解析器在遇到此类结构时，会立即执行函数内部的代码。

2.2.2 示例


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

2.2.3 适用场景 ①适用于只需执行一次的操作。例如，在浏览器页面加载完成后，需要执行一次初始化逻辑且后续不再重复执行的功能场景。

闭包函数原理与内存管理

3. 闭包函数 3.1 说明

假设函数A内部声明了函数B，且函数B引用了函数A作用域内的外部变量，同时函数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等累加的值，因为闭包保留了内部变量i的状态。

执行函数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：父函数内部变量的共享机制


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函数类型详解：普通函数、匿名函数与闭包机制

普通函数特性解析

匿名函数的应用与场景

闭包函数原理与内存管理

实用工具推荐