作者: 她不美却常驻我心 博客地址: https://blog.csdn.net/qq_39506551 微信公众号：老王的前端分享 每篇文章纯属个人经验观点，如有错误疏漏欢迎指正。转载请附带作者信息及出处。

从零开始学前端 - 20. JS匿名函数

JS匿名函数详解一、什么是匿名函数二、 匿名函数的声明方式1. 通过函数表达式声明2. 自执行函数3. 赋值给事件 三、匿名函数的应用场景1. 表达式2. 对象3. 事件4. 回调函数5. 闭包

JS匿名函数详解

一、什么是匿名函数

  首先我们知道常规函数的声明应该是由关键字 function 来声明：

function fn(){ console.log("这是一个普通函数"); }

  那么匿名函数呢？顾名思义，匿名函数就是没有名字的函数：

function (){ console.log("这是一个匿名函数") }

  但我们发现这并不符合 JS 的语法规范，不用运行我们的代码，IDE 就会先提示我们代码存在错误，所以我们要使用正确的方式来声明。

二、 匿名函数的声明方式

1. 通过函数表达式声明

  我们可以直接将其赋值给一个变量，这也是我们平时最常用的定义方式：

var fn = function(){ console.log("这是一个匿名函数"); } fn();

  这种形式看起来像是常规的变量赋值语句，即创建一个函数并将它赋值给变量 fn ，但这种情况下创建的函数其实是一个匿名函数，因为函数本身其实并没有名字，而是通过函数表达式将其赋值给了一个变量，fn 是变量的名字，并不是函数的名字。

  使用匿名函数表达式时，使用前必须先赋值。 我们在前面已经讲过声明提前的问题，使用 var 进行声明时，声明操作会被提升到代码执行环境的顶部，赋值操作停留在原本的位置。所以这里与普通函数略有区别，函数表达式的调用语句，必须放在函数声明语句之后，否则会报错：fn is not a function。   如果对声明提前有不理解，可以 戳这里查看

2. 自执行函数

// 也可以使用 ~ 等运算符来替代 ! !function(){ console.log("这是一个自动执行的匿名函数"); }() (function () { console.log("这是一个自动执行的匿名函数"); })() (function () { console.log("这是一个自动执行的匿名函数"); }())

  自执行函数就是立即运行函数的意思，上方三种声明方式的作用是一样的，每个匿名函数后面的小括号 () 起到的作用是为了让当前的匿名函数立即执行，其实就是一个函数调用，并可以在其中传递参数，例：

!function(a){ console.log(a); // 1 }(1)

  但当我们希望匿名函数返回一个具体的数值时，采用这种方式声明匿名函数，会对函数的返回值进行运算：

var result = !function (a) { console.log(a); // 打印 4 return a; }(4) console.log(result); // 返回值为 false

  这就导致最终的结果和我们想要得到结果不一致，如果我们希望从这个匿名函数中得到一个返回值时，应该使用函数表达式的方式。如果函数没有返回值的话，那当然是没有什么问题的了。

3. 赋值给事件

var oBtn = document.getElementById("btn"); oBtn.onClick = function(){ console.log("给按钮绑定一个点击事件，当用户点击时执行当前的匿名函数"); }

  这种声明方式其实和第二种很相似，只不过将何时执行函数的权利交给了按钮，由按钮是否被点击决定是否执行。

三、匿名函数的应用场景

1. 表达式

var fn = function(){ // do something; }

2. 对象

var obj = { a : 1, b : 2, fn : function(){ return (this.a + this.b); // this 总是指向当前调用函数的对象 ，在对象中指向的就是对象本身。 } } obj.fn(); // 3

3. 事件

window.onload = function(){ // do something; }

4. 回调函数

arr.sort(function(a,b){ return a - b; })

5. 闭包

function fn(){ return function(){ console.log("作为一个返回值") } }

---

种一棵树，最好的时间是十年前，其次是现在。人的一生，总的来说就是不断学习的一生。 蚕吐丝，蜂酿蜜。人不学，不如物。与其纠结学不学，学了有没有用，不如学了再说。

---

每篇文章纯属个人经验观点，如有错误疏漏欢迎指正。转载请附带作者信息及出处。您的评论和关注是我更新的动力! 请大家关注我的微信公众号，我会定期更新前端的相关技术文章，欢迎大家前来讨论学习。 都看到这里了，三连一下呗~~~。点个收藏，少个 Bug 。