javascript 匿名函数的理解（透彻版)

Javascript 匿名函数的理解

在 JavaScript 中，函数是一个非常重要的概念，而匿名函数是其中一个常用的形式。本文主要讲解 JavaScript 中匿名函数的原理、使用方法及相关注意事项。

什么是匿名函数

匿名函数又称为无名函数，是 JavaScript 中定义一个函数的一种方式。通常情况下，我们定义函数时都会给函数取名字，在调用函数时可以通过函数名调用。但是匿名函数没有名字，我们无法通过函数名调用，仅能通过函数对象本身调用。

为什么需要匿名函数

在某些情况下，我们可能只在一个特定的地方需要定义一个函数并调用它，这时候就可以使用匿名函数。

举个例子，我们在网页中添加一个按钮，当点击这个按钮时，需要弹出一个提示框，用户确认后才能执行某个操作。这个提示框我们只会在这个按钮的点击事件中使用，不需要单独定义一个函数，在这种情况下，可以使用匿名函数。

如何定义匿名函数

匿名函数的定义方式如下：

function() {
  // 函数体
}

在函数定义后面加上一对小括号，就可以立即调用匿名函数，如下：

(function() {
  // 函数体
})()

上述代码中，我们使用了一个小技巧，在整个函数体的外面加上一对小括号，使得 JavaScript 引擎把函数体当做一个表达式来处理，在处理表达式时就可以立即调用该函数。

匿名函数的用途

匿名函数常用于以下情况：

1. 封装代码

我们可以用匿名函数来封装一段代码，避免全局变量的定义污染全局命名空间。例如：

(function() {
  // 这里面的变量和函数都是在这个匿名函数内部有效的
  var message = "Hello World";
  alert(message);
})();

2. 解决命名冲突

当多个 JavaScript 文件引用同一个库时，可能会因为变量名重复而导致命名冲突的问题。可以使用匿名函数来封装这个库，避免命名冲突。例如：

var myLibrary = (function() {
  // 这里定义了一些变量和函数
  var message = "Hello World";

  function showMessage() {
    alert(message);
  }

  // 在这里返回一个对象，包含了需要对外暴露的变量和函数
  return {
    showMessage: showMessage
  };
})();

在上述代码中，我们使用了一个匿名函数把整个库封装在一个作用域中，避免了命名冲突的问题。同时，在匿名函数的最后，我们返回了一个对象，这个对象包含了需要对外暴露的变量和函数。

注意事项

在使用匿名函数时，有一些需要注意的问题：

1. 匿名函数中的 this

匿名函数没有名字，因此在函数内部使用 this 时，可能会出现一些意外的结果。例如：

var obj = {
  message: "Hello",
  showMessage: function() {
    alert(this.message);
  }
};

obj.showMessage(); // 输出 "Hello"

var showMessage2 = obj.showMessage;
showMessage2(); // 报错，this 指向全局对象

在上述代码中，我们定义了一个对象 obj，这个对象包含了一个 showMessage 方法，在 showMessage 方法内部使用了 this 关键字。在 obj.showMessage() 调用时，this 指向 obj 对象，结果输出了 obj.message 的值 "Hello"。但是在定义完 showMessage 方法后，我们把这个方法赋值给了一个变量 showMessage2，然后在调用 showMessage2() 时，this 却指向了全局对象，因此会报错。

为了避免这种问题，我们可以使用 Function.prototype.call 或 Function.prototype.apply 来指定函数内部的 this 关键字。

var showMessage2 = obj.showMessage;
showMessage2.call(obj); // 输出 "Hello"

2. 匿名函数中的参数

匿名函数可以带任意数量的参数，在函数内部可以通过 arguments 对象访问这些参数。例如：

(function(a, b) {
  alert(a + b);
})(1, 2); // 输出 3

在上述代码中，我们定义了一个匿名函数，这个函数有两个参数 a 和 b，然后在调用这个匿名函数时，给 a 传入了 1，给 b 传入了 2，函数内部通过 a 和 b 计算得到 3，最终输出 3。

示例

示例一：使用匿名函数封装代码

(function() {
  // 获取页面上所有的 a 标签，然后遍历每个标签
  var links = document.getElementsByTagName("a");
  for (var i = 0; i < links.length; i++) {
    // 给每个标签添加一个点击事件处理函数
    links[i].addEventListener("click", function(event) {
      // 阻止默认行为
      event.preventDefault();
      // 弹出链接地址
      alert(this.href);
    });
  }
})();

在上述代码中，我们使用一个匿名函数把整个代码封装在一个作用域中，确保变量 links 和变量 i 不会污染全局命名空间。然后我们遍历页面上所有的 a 标签，给每个标签添加一个点击事件处理函数，当用户点击链接时，会弹出链接地址。

示例二：使用匿名函数解决命名冲突

var myLibrary = (function() {
  // 这里定义了一个变量 count
  var count = 0;

  // 定义了一个函数 next，每次执行完 count+1，然后返回 count 的值
  function next() {
    return ++count;
  }

  // 在这里返回一个对象，包含了需要对外暴露的变量和函数
  return {
    next: next
  };
})();

// 这里调用了 myLibrary 对象的 next 方法，输出 1
console.log(myLibrary.next());

// 再次调用 next 方法，输出 2
console.log(myLibrary.next());

在上述代码中，我们使用一个匿名函数把我们需要封装的代码封装在一个作用域中，避免了 count 变量的命名冲突。在匿名函数的最后，我们返回一个对象，这个对象包含了对外暴露的 next 方法，每次调用 next 方法都能返回一个递增的整数。