JavaScript 中匿名函数有什么用

发布时间：2021-07-01 15:17:46 作者：Leah
来源：亿速云阅读：201

这篇文章将为大家详细讲解有关JavaScript 中匿名函数有什么用，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。

本文源自知乎的一个提问：

同样都是在运行时才能确定函数，为什么 b 是匿名函数？

这个看似简单的问题，我在浏览器里捣鼓了一个多小时。而且好像发现了 FireFox/Chrome Devtools 的 2 个疑似 bug。

在 ES 规范中，有一个内部函数 IsAnonymousFunctionDefinition() 用来判断一个函数是否为匿名函数，但是这个函数只在规范中使用，通过 JS 代码并不能调用，很多 JS 引擎会在内部实现这个函数（非强制要求）。

当我们谈到匿名函数时，其实有 2 种不同的含义：

函数没有名字
函数的 name 属性是 "anonymous"

由于函数的 name 是继承自 Function.prototype.name ，因此没有名字的函数的 name 属性是空字符 "" 。

在大部分调试工具中，没有名字的函数会显示为 <anonymous> ，也就是我们经常说的匿名函数。

我们把题目中的代码改写一下：

  
    
  
  
  var a = () => () => { throw new Error('foo') }

不论是 a()() ，还是 var b = a(); b() ，在 Chrome 中执行：

JavaScript 中匿名函数有什么用

可以清楚的看到，这个函数是匿名函数。（忽略最下面的匿名函数，那个是 Global Scope ）

在 FireFox 的的调用栈都是：

JavaScript 中匿名函数有什么用

这就太迷了。不论如何调用 b 函数， a 都不应该出现在调用栈中，我觉得这应该可以算是 FireFox 的一个 bug 了。

如果使用 new Function 定义函数，错误栈里是没有尖括号的。因为根据规范，使用 Function 定义的函数是有名字的，名字就是 "anonymous" 。就好比一个人叫无名氏，并不是因为他没有名字，而是他姓无，叫名氏。

在对于这个的处理上，Firefox 略胜一筹吧：

  
    
  
  
  var a = new Function('throw new Error("bar")')a()

FireFox 截图：

JavaScript 中匿名函数有什么用

我们再看一下 Chrome Devtools：

JavaScript 中匿名函数有什么用

有点迷惑，可能是把引擎内部的调用栈 dump 出来了吧。我觉得这个也可以被认为是一个 bug 了。

题主的疑惑是，为什么 var a = () => () => 1 的函数名是 a ，而 var b = a() 就是匿名函数。

简单解释就是， var a = () => 1 包含了 2 个阶段，箭头函数定义和赋值操作。所有的箭头函数都是匿名函数，在箭头函数的定义中，规范内部的 hasName 属性直接设置为了 false 。然后 IsAnonymousFunctionDefinition(expr) 判定此函数是匿名函数：

If IsFunctionDefinition of expr is false , return false .
Let hasName be HasName of expr.
If hasName is true , return false .
Return true .

当赋值时，会先判断右值是否为匿名函数。如果是的话，重新设置函数名。

我们再来看看另一个语句： var b = a() 。这个也包含了赋值操作，还有一个函数调用操作。

只有匿名函数(静态语义)执行赋值操作时，才会为变量( rval )重新设置 name 属性，即函数名。这里的a() 只是一个函数调用，并不是函数定义，所以不会重新设置函数名。

类似的：

  
    
  
  
  var a = (1, () => 'foo')a = [() => 1][0]var a = eval('()=>1')

关于JavaScript 中匿名函数有什么用就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。

JavaScript 中匿名函数有什么用

相关阅读