JavaScript深入浅出第2课：函数是一等公民是什么意思呢？

一时失言乱红尘 2022-01-07 01:41 198阅读 0赞

**摘要：** 听起来很炫酷的一等公民是啥？

**《JavaScript深入浅出》系列**：

*  [JavaScript深入浅出第1课：箭头函数中的this究竟是什么鬼？][JavaScript_1_this]
 *  [JavaScript深入浅出第2课：函数是一等公民是什么意思呢？][JavaScript_2]

看到一篇讲JavaScript历史的[文章][Link 1]里面提到：**JavaScript借鉴Scheme语言，将函数提升到"一等公民"（first class citizen）的地位**。

**一等公民**这个名字听起来很高大上，但是也相当晦涩，这个与翻译也没什么关系，因为**first class citizen**很多人包括我也不知所云。

JavaScript函数是一等公民，是什么意思呢？我来与大家探讨一下，抛砖引玉。

### 一等公民的定义 ###

根据维基百科，编程语言中一等公民的概念是由英国计算机学家[Christopher Strachey][]提出来的，时间则早在上个世纪60年代，那个时候还没有个人电脑，没有互联网，没有浏览器，也没有JavaScript。

大概很多人和我一样，没听说过Christopher Strachey，并且他也只是提出了一等公民的概念，没有给出严格的定义。

关于一等公民，我找到一个权威的定义，来自于一本书[《Programming Language Pragmatics》][Programming Language Pragmatics]，这本书是很多大学的程序语言设计的教材。

> In general, a value in a programming language is said to have ﬁrst-class status if it can be passed as a parameter, returned from a subroutine, or assigned into a variable.

也就是说，在编程语言中，**一等公民可以作为函数参数，可以作为函数返回值，也可以赋值给变量**。

例如，字符串在几乎所有编程语言中都是一等公民，字符串可以做为函数参数，字符串可以作为函数返回值，字符串也可以赋值给变量。

对于各种编程语言来说，函数就不一定是一等公民了，比如[Java 8之前的版本][Java 8]。

对于JavaScript来说，函数可以赋值给变量，也可以作为函数参数，还可以作为函数返回值，因此JavaScript中函数是一等公民。

### 函数作为函数参数 ###

回调函数（callback）是JavaScript异步编程的基础，其实就是把函数作为函数参数。例如，大家常用的setTimeout函数的第一个参数就是函数：

setTimeout(function() { 
        console.log("Hello, Fundebug!");
    }, 1000);

JavaScript函数作为函数参数，或者说回调函数，作为实现异步的一种方式，大家都写得多了，其实它还有其他应用场景。

[Array.prototype.sort()][Array.prototype.sort]在对一些复杂数据结构进行排序时，可以使用**自定义的比较函数**作为参数：

这样写看起来没什么大不了的，但是对于JavaScript引擎来说就省事多了，因为它不需要为每一种数据类型去实现一个排序API，它只需要实现一个排序API就够了，至于数组元素大小怎么比较，交给用户去定义，用户如果非得说2大于1，那也不是不可以。

换句话说，如果Array.prototype.sort()只能实现简单数据（比如Number与String）的排序的话，那它就太弱了，正因为可以使用函数作为参数，使它的功能强大了很多。

顺便提一下，实现一个Array.prototype.sort()，可不是什么简单的事情，大家可以看看[V8是怎样实现数组排序的][V8]。

### 将函数赋值给变量 ###

JavaScript是可以定义匿名函数的，当我们定义有名字的函数时，通常是这样写的：

function hello() { 
        console.log("Hello, Fundebug!");
    }

当然，也可以将函数赋值给变量：

var hello = function() { 
        console.log("Hello, Fundebug!");
    };
    
    console.log(typeof hello); // 打印 function

可知，hello变量的类型是"function"。

在其他的一些[First-class function][]的定义中，还要求函数可以保存到其他数据结构，比如数组和对象中，这一点JavaScript也是支持的。

> In computer science, a programming language is said to have first-class functions if it treats functions as first-class citizens. This means the language supports passing functions as arguments to other functions, returning them as the values from other functions, and assigning them to variables or storing them in data structures.

函数可以保存到Object中，就意味着函数成为了Object的方法。我在[《JavaScript深入浅出第1课：箭头函数中的this究竟是什么鬼？》][JavaScript_1_this]中提过，当函数作为Object的方法被调用时，它的this值就是该Object，这1点与Java等面向对象语言是一致的。因此JavaScript在没有[Class][]之前，就在一定程度上是支持面向对象编程的，当然比较弱。

### 函数作为函数返回值 ###

通常来讲，函数的返回值比较简单，比如数字、字符串、布尔值或者Object。由于JavaScript函数是第一公民，因此我们也可以在函数中返回函数。

当我们调用sayHello函数时，它返回值sayHelloToFundebug实际是一个函数，我们需要调用所返回的sayHelloToFundebug函数，它才会执行，打印对应的信息：“Hello, Fundebug!”。

我猜这个地方有人会抬杠，因为示例代码没有必要这么写，因为有更简单的写法：

function sayHello(message) { 
        console.log(`Hello, ${ message}`);
    }
    
    sayHello("Fundebug!"); // 打印Hello, Fundebug!
    sayHello("Google!"); // 打印Hello, Google!

但是这只是一个简单的示例，在一些复杂的实际场景中，在函数返回函数还是很有用的。下面给大家一个简单的示例。

我们Fundebug在[微信小程序BUG监控插件][BUG]的时候，把不同[API][]的定义拆分在不同的文件，但是这些API需要共享一些全局属性，比如用户的[个性化配置][Link 2]。微信小程序是没有全局变量window的，就算是网页端有window其实最好也不要用，会污染全局作用域。这时候该怎么办？给大家看看定义[fundebug.test()][fundebug.test]是怎样定义的吧：

我们使用了一个外层函数defineTestApi来共享全局配置对象config，函数中定义的testApi函数则通过return返回。

这里其实也用到了**闭包**，因为defineTestApi函数执行结束之后，testApi函数仍然可以使用config变量，因此config变量的生命周期超越了defineTestApi函数。关于闭包的详细介绍，我会在这个系列的后续文章中介绍。

因此，**在函数中返回函数，还是很有用的**。

开发者对待每一个技术点，比如闭包，应该保持谦卑，不要觉得这个也没有用，那个也没有用，其实只是你还没遇到使用场景而已。关于这一点，大家可以看看我的博客[《聊聊我的第一篇10万+，同时反驳某些评论》][10]。

### 函数为第一公民是函数式编程的基础 ###

函数为第一公民的3个特性我都介绍了，它们确实让JavaScript更加强大，然后呢？JavaScript的骚操作大家见得多了，也不会觉得有什么神奇之处。

其实，函数是第一公民，与大家都听过的**函数式编程**有着密切的关系。

> First-class functions are a necessity for the functional programming style, in which the use of higher-order functions is a standard practice.

也就是说，**函数为第一公民是函数式编程的必要条件**。higher-order functions，即高阶函数，就是使用函数作为参数的函数，它在函数式编程中很常见。

至于什么是函数式编程，不是我一句话能讲清楚的，这可以一直聊到计算机的开山鼻祖图灵。要知后事如何，请听下回分解。

关于JS，我打算开始写一个系列的博客，大家还有啥不太清楚的地方？不妨留言一下，我可以研究一下，然后再与大家分享一下。也大家欢迎添加我的个人微信(KiwenLau)，我是[Fundebug][]的技术负责人，一个对JS又爱又恨的程序员。

### 参考 ###

*  [Javascript诞生记][Link 1]
 *  [Is JavaScript a (true) OOP language?][Is JavaScript a _true_ OOP language]
 *  [First-class functions in Java 8][Java 8]
 *  [《聊聊我的第一篇10万+，同时反驳某些评论》][10]

### 关于Fundebug ###

[Fundebug][]专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java线上应用实时BUG监控。 自从2016年双十一正式上线，Fundebug累计处理了10亿+错误事件，付费客户有阳光保险、核桃编程、荔枝FM、掌门1对1、微脉、青团社等众多品牌企业。欢迎大家[免费试用][Link 3]！

[![img][]][img]

转载时请注明作者[ Fundebug][Fundebug 1]以及本文地址：

[https://blog.fundebug.com/2019/06/25/javascript-first-class-function/][JavaScript_2]

[JavaScript_1_this]: https://blog.fundebug.com/2019/06/18/arrow-function-this/
[JavaScript_2]: https://blog.fundebug.com/2019/06/25/javascript-first-class-function/
[Link 1]: http://www.ruanyifeng.com/blog/2011/06/birth_of_javascript.html
[Christopher Strachey]: https://en.wikipedia.org/wiki/Christopher_Strachey
[Programming Language Pragmatics]: http://www.cs.rochester.edu/~scott/pragmatics/
[Java 8]: https://www.youtube.com/watch?v=Rd-sqHjmfB0
[Array.prototype.sort]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/sort
[V8]: https://v8.dev/blog/array-sort
[First-class function]: https://en.wikipedia.org/wiki/First-class_function
[Class]: http://es6.ruanyifeng.com/#docs/class
[BUG]: https://docs.fundebug.com/notifier/wxjs/version.html
[API]: https://docs.fundebug.com/notifier/wxjs/api/
[Link 2]: https://docs.fundebug.com/notifier/wxjs/customize/
[fundebug.test]: https://docs.fundebug.com/notifier/wxjs/api/test.html
[10]: https://blog.fundebug.com/2019/05/20/the-first-blog-over-100-thousand-pv/
[Fundebug]: https://www.fundebug.com/
[Is JavaScript a _true_ OOP language]: https://medium.com/@andrea.chiarelli/is-javascript-a-true-oop-language-c87c5b48bdf0
[Link 3]: https://www.fundebug.com/team/create
[img]: /images/20211227/5781130dd7a24bcb8f5ab81665f6771a.png
[Fundebug 1]: https://blog.fundebug.com/