本文包括以下内容:

理解函数为何如此主要

函数为何是第一类工具

function函数htmlJavaScript新手的第一堂函数课界说与参数文末福利 CSS

定义函数的办法

参数赋值之谜

在本文这一部分谈论JavaScript根本时,大概你会感到惊异,我们的第一个论点是函数(function)而非工具(object)。
当然,第3部分会用大量笔墨阐明工具,但归根结底,你要理解一些基本事实,像普通人一样编写代码和像“忍者”一样编写代码的最大差别在于是否把JavaScript作为函数式措辞(functional language)来理解。
对这一点的认知水平决定了你编写的代码水平。

如果你正在阅读这本文,那么你该当不是一位初学者。
对付后续内容,我们假设你已经足够理解面向工具根本(当然,我们会在往后章节详细谈论工具的高等观点),但真正理解JavaScript中的函数才是你能利用的唯一一件主要武器。
函数是如此主要,以是本文及接下来两章将带领你彻底理解JavaScript中的函数。

JavaScript中最关键的观点是:函数是第一类工具(first-class objects),或者说它们被称作一等公民(first-class citizens)。
函数与工具共存,函数也可以被视为其他任意类型的JavaScript工具。
函数和那些更普通的JavaScript数据类型一样,它能被变量引用,能以字面量形式声明,乃至能被作为函数参数进行通报。
本文一开始会先容面向函数编程带来的差异,你会创造,在须要调用某函数的位置定义该函数,能让我们编写更紧凑、更易懂的代码。
其次,我们还会探索如何把函数用作第一类工具来编写高性能函数。
你能学到多种不同的函数定义办法,乃至包括一些新类型,例如箭头(arrow)函数,它能帮你编写更优雅的代码。
末了,我们会学习函数形参和函数实参的差异,并重点关注ES6的新增特性,例如剩余参数和默认参数。

让我们通过理解函数式编程的优点来开始学习吧。

你知道吗?

回调函数在哪种情形下会同步调用,或者异步调用呢?

箭头函数和函数表达式的差异是什么?

你为什么须要在函数中利用默认参数?

1.1 函数式的不同点到底是什么

函数及函数式观点之以是如此主要,其缘故原由之一在于函数是程序实行过程中的紧张模块单元。
除了全局JavaScript代码是在页面构建的阶段实行的,我们编写的所有的脚本代码都将在一个函数内实行。

由于我们的大多数代码会作为函数调用来实行,因此,我们在编写代码时,通用强大的布局器能授予代码很大的灵巧性和掌握力。
本文的大部分内容阐明了如何利用函数作为第一类工具的特性获益。
首先浏览一下工具中我们能利用的功能。
JavaScript中工具有以下几种常用功能。

工具可通过字面量来创建{}。

工具可以赋值给变量、数组项,或其他工具的属性。

1var ninja = {};  ?--- 为变量赋值一个新工具

2ninjaArray.push({});   ?--- 向数组中增加一个新工具

3ninja.data = {};  ?--- 给某个工具的属性赋值为一个新工具

工具可以作为参数通报给函数。

1function hide(ninja){

2  ninja.visibility = false;

3}

4hide({});  ?--- 一个新创建的工具作为参数通报给函数

工具可以作为函数的返回值。

1function returnNewNinja() {

2 return {};  ?--- 从函数中返回了一个新工具

3}

工具能够具有动态创建和分配的属性。

1var ninja = {};

2ninja.name = \"大众Hanzo\"大众;  ?--- 为工具分配一个新属性

实在,不同于很多其他编程措辞,在JavaScript中,我们险些能够用函数来实现同样的事。

1.1.1 函数是第一类工具

JavaScript中函数拥有工具的所有能力,也因此函数可被作为任意其他类型工具来对待。
当我们说函数是第一类工具的时候,便是说函数也能够实现以下功能。

通过字面量创建。

1function ninjaFunction() {}

赋值给变量,数组项或其他工具的属性。

1var ninjaFunction = function() {};  ?--- 为变量赋值一个新函数

2ninjaArray.push(function(){});   ?--- 向数组中增加一个新函数

3ninja.data = function(){};  ?--- 给某个工具的属性赋值为一个新函数

作为函数的参数来通报。

1function call(ninjaFunction){

2 ninjaFunction();

3}

4call(function(){});   ?--- 一个新函数作为参数通报给函数

作为函数的返回值。

1function returnNewNinjaFunction() {

2 return function(){};   ?--- 返回一个新函数

3}

具有动态创建和分配的属性。

1var ninjaFunction = function(){};

2ninjaFunction.ninja = \"大众Hanzo\公众;  ?--- 为函数增加一个新属性

工具能做的任何一件事,函数也都能做。
函数也是工具,唯一的分外之处在于它是可调用的(invokable),即函数会被调用以便实行某项动作。

{JavaScript中的函数式编程!} 

把函数作为第一类工具是函数式编程(functional programming)的第一步,函数式编程是一种编程风格,它通过书写函数式(而不是指定一系列实行步骤,就像那种更主流的命令式编程)代码来办理问题。
函数式编程可以让代码更随意马虎测试、扩展及模块化。
不过这是一个很大的话题,因此本文仅对这个特性做了肯定。
如果你对如何在JavacScript中利用函数式编程感兴趣,推举阅读Luis Atencio著(由Manning出版社2016年出版)的《JavaScript函数式编程》,购买办法见www.manning.com/ books/functional-programming- in-JavaScript。

第一类工具的特点之一是,它能够作为参数传入函数。
对付函数而言,这项特性也表明:如果我们将某个函数作为参数传入另一个函数,传入函数会在运用程序实行的未来某个韶光点才实行。
大家所知道的更一样平常的观点是回调函数(callback function)。
下面我们来学习这个主要观点。

1.1.2 回调函数

每当我们建立了一个将在随后调用的函数时,无论是在事宜处理阶段通过浏览器还是通过其他代码,我们都是在建立一个回调(callback)。
这个术语源自于这样一个事实,即在实行过程中,我们建立的函数会被其他函数在稍后的某个得当韶光点“再回来调用”。

有效利用JavaScript的关键在于回调函数,相信你已经在代码中利用了很多回调函数——不论是单击一次按钮、从做事端吸收数据,还是UI动画的一部分。

本节我们会看一些实际利用回调函数的范例例子,例如处理事宜、大略的排序凑集。
这部分内容会有点繁芜,以是在深入学习之前,先透彻、完全地理解回调函数的观点,用最大略的形式来展现它。
下面我们用一个大略例子来阐明这个观点,此例中的函数完备没什么实际用途,它的参数吸收另一个函数的引用,并作为回调调用该函数:

1function useless(ninjaCallback) {

2 return ninjaCallback();

3}

这个函数可能没什么用,但它反响了函数的一种能力,即将函数作为另一个函数的参数,随后通过参数来调用该函数。

我们可以在清单1.1中测试一下这个名为useless的函数。

清单1.1 大略的回调函数例子

1var text = \"大众Domo arigato!\公众;

2report(\"大众Before defining functions\"大众);

3function useless(ninjaCallback) {

4  report(\"大众In useless function\"大众);

5  return ninjaCallback();

6}  ?--- 函数定义,参数为一个回调函数,其函数体内会立即调用该回调函数

7function getText() {

8 report(\"大众In getText function\"大众);

9 return text;

10}  ?--- 大略的函数定义,仅返回一个全局变量

11report(\"大众Before making all the calls\公众);

12assert(useless(getText) === text,

13     \公众The useless function works! \公众 + text);   ?--- 把gerText作为回调函数传入上面的useless函数

14report(\公众After the calls have been made\公众);

在这个代码清单中,我们利用自定义函数report(在本文附录B中定义)来输出代码实行过程中的信息,这样一来我们就能通过这些信息来跟踪程序的实行过程。
我们还利用了第1章中的断言函数assert。
该函数常日利用两个参数。
第一个参数是用于断言的表达式。
本例中,我们须要确定利用参数getText调用useless函数返回的值与变量text是否相等(useless(getText) === text)。
若第一个参数的实行结果为true,断言通过;反之,断言失落败。
第二个参数是与断言干系联的信息,常日会根据通过/失落败来输出到日志上。
(附录B中概括地磋商了测试,以及我们对assert函数和report函数的大略实现)。

这段代码实行完毕后,实行结果如图1.1所示。
可以看到,利用getText参数调用useless回调函数后,得到了期望的返回值。

图1.1 清单1.1中代码的实行结果

我们还可以看看这个大略的回调函数详细是如何实行的。
如图1.2所示,getText函数作为参数传入了useless函数。
从该图中可以看到,在useless函数体内,通过callback参数可以取得getText函数的引用。
随后,回调函数callback()的调用让getText函数得到实行,而我们作为参数传入的getText函数则通过useless函数被回调。

图1.2 实行useless(getText)调用后的实行流。
getText作为参数传入useless函数并调用。
useless函数体内对传入函数进行调用,本例中触发了getText函数的实行(即我们对getText函数进行回调)。

完成这个过程是很随意马虎的,缘故原由就在于JavaScript的函数式实质让我们能把函数作为第一类工具。
更进一步说,我们的代码可以写成如下形式:

1<pre class=\公众代码无行号\"大众><code>var text = 'Domo arigato!';

2function useless(ninjaCallback) {

3 return ninjaCallback();

4}

5assert(useless(<strong>function () { return text;}</strong>) === text,  ?--- 直接以参数形式定义回调函数

6    \"大众The useless function works! \"大众 + text); </code></pre>

JavaScript的主要特色之一是可以在表达式涌现的任意位置创建函数,除此之外这种办法能使代码更紧凑和易于理解(把函数定义放在函数利用处附近)。
当一个函数不会在代码的多处位置被调用时,该特性可以避免用非必须的名字污染全局命名空间。

在回调函数的前述例子中,我们调用的是我们自己的回调。
除此之外浏览器也会调用回调函数,回忆一下第2章中的下述例子:

1document.body.addEventListener(\"大众mousemove\"大众, function() {

2

3 var second = document.getElementById(\公众second\"大众)

4;

5 addMessage(second, \"大众Event: mousemove\"大众

6);

7});

上例同样是一个回调函数,作为mousemove事宜的事宜处理器,当事宜发生时,会被浏览器调用。

{把稳 } 

本小节先容的回调函数是其他代码会在随后的某个得当韶光点“回过来调用”的函数。
你已经学习了我们自己的代码调用回调(useless函数例子),也看到了当某事宜发生时浏览器发起调用(mousemove例子)。
把稳这些很主要,不同于我们的例子,一些人认为回调会被异步调用,因此第一个例子不是一个真正的回调。
这里之以是提到这些因此防万一你偶尔会遇见这类激烈的辩论。

现在让我们看一个回调函数的用法,它能极大地简化凑集的排序。

利用比较器排序

一样平常情形下只要我们拿到了一组数据集,就很可能须要对它进行排序。
假如有一组随机序列的数字数组:0, 3, 2, 5, 7, 4, 8, 1。
大概这个顺序没什么问题,但很可能早晚须要重新排列它。

常日来说,实现排序算法并不是编程任务中最微不足道的;我们须要为手中的事情选择最佳算法,实现它以适应当前的须要(使这些选项是按照特定顺序排列),并且须要小心仔细不能引入故障。
除此之外,唯一特定于运用程序的任务是排列顺序。
幸运的是,所有的JavaScript数组都能用sort方法。
利用该方法可以只定义一个比较算法,比较算法用于指示按什么顺序排列。

这才是回调函数所要参与的!
不同于让排序算法来决定哪个值在前哪个值在后,我们将会供应一个函数来实行比较。
我们会让排序算法能够获取这个比较函数作为回调,使算法在其须要比较的时候,每次都能够调用回调。
该回调函数的期望返回值为:如果传入值的顺序须要被调换,返回正数;不须要调换,返回负数;两个值相等,返回0。
对付排序上述数组,我们比拟较值做减法就能得到我们所须要的值。

1<pre class=\"大众代码无行号\公众><code>var values = [0, 3, 2, 5, 7, 4, 8, 1];

2values.sort<strong>(function(value1, value2) {</strong>

3 return value1 - value2;

4<strong>}</strong>);</code></pre>

没有必要思考排序算法的底层细节(乃至是选择了什么算法)。
JavaScript引擎每次须要比较两个值的时候都会调用我们供应的回调函数。

函数式办法让我们能把函数作为一个单独实体来创建,正像我们对待其他类型一样,创建它、作为参数传入一个方法并将它作为一个参数来吸收。
函数就这样显示了它一等公民的地位。

1.2 函数作为工具的乐趣

本节我们会稽核函数和其他工具类型的相似之处。
大概让你感到惊异的相似之处在于我们可以给函数添加属性:

1var ninja = {};

2ninja.name = \"大众hitsuke\"大众;  ?--- 创建新工具并为其分配一个新属性

3var wieldSword = function(){};

4wieldSword.swordType = \"大众katana\公众;  ?--- 创建新函数并为其分配一个新属性

我们再来看看这种特性所能做的更有趣的事:

在凑集中存储函数使我们轻易管理干系联的函数。
例如,某些特定情形下必须调用的回调函数。

影象让函数能记住上次打算得到的值,从而提高后续调用的性能。

让我们行动起来吧。

1.2.1 存储函数

某些例子中(例如,我们须要管理某个事宜发生后须要调用的回调函数凑集),我们会存储元素唯一的函数凑集。
当我们向这样的凑集中添加函数时,会面临两个问题:哪个函数对付这个凑集来说是一个新函数,从而须要被加入到该凑集中?又是哪个函数已经存在于凑集中,从而不须要再次加入到凑集中?一样平常来说,管理回调函数凑集时,我们并不肯望存在重复函数,否则一个事宜会导致同一个回调函数被多次调用。

一种显著有效的大略方法是把所有函数存入一个数组,通过循环该数组来检讨重复函数。
令人遗憾的是,这种方法的性能较差,尤其作为一个“忍者”要把事情干得俊秀而不仅是做到能用。
我们可以利用函数的属性,用适当的繁芜度来实现它,如清单1.2所示。

清单1.2 存储唯一函数凑集

1var store = {

2 nextId: 1,  ?--- 跟踪下一个要被复制的函数

3 cache: {},  ?--- 利用一个工具作为缓存,我们可以在个中存储函数

4 add: function(fn) { 

5   if (!fn.id) {

6    fn.id = this.nextId++;

7    this.cache[fn.id] = fn;

8    return true;

9  }

10 }  ?--- 仅当函数唯一时,将该函数加入缓存

11};

12function ninja(){}

13assert(store.add(ninja), 

14     \公众Function was safely added.\"大众);

15assert(!store.add(ninja),

16     \"大众But it was only added once.\"大众);   ?--- 测试上面代码按预期事情

在这个清单中,我们创建了一个工具赋值给变量store,这个变量中存储的是唯一的函数凑集。
这个工具有两个数据属性:其一是下一个可用的id,其余一个缓存着已经保存的函数。
函数通过add()方法添加到缓存中。

1add: function(fn) {

2  if (!fn.id) {

3   fn.id = this.nextId++;

4   this.cache[fn.id] = fn;

5   return true;

6  }

7...

在add函数内,我们首先检讨该函数是否已经存在id属性。
如果当前的函数已经有id属性,我们则假设该函数已经被处理过了,从而忽略该函数,否则为该函数分配一个id(同时增加nextId)属性,并将该函数作为一个属性增加到cache上,id作为属性名。
紧接着该函数的返回值为true,从而可得知调用了add()后,函数是什么时候被添加到存储中的。

在浏览器中运行该程序后,页面显示:测试程序考试测验两次添加ninja()函数,而该函数只被添加一次到存储中,如图1.3所示。
第9章展示了用于操作合集的更好技能,它利用了ES6的新的工具类型凑集(Set)。

图1.3 给函数附加一个属性后,我们就能够引用该属性。
本例通过这种办法可以确保该ninja函数仅被添加到函数中一次

其余一种有用的技巧是当利用函数属性时,可以通过该属性修正函数自身。
这个技能可以用于影象前一个打算得到的值,为之后打算节省韶光。

1.2.2 自影象函数

犹如前面所提到的,影象化(memoization)是一种构建函数的处理过程,能够记住上次打算结果。
在这个果壳里,当函数打算得到结果时就将该结果按照参数存储起来。
采取这种办法时,如果其余一个调用也利用相同的参数,我们则可以直接返回上次存储的结果而不是再打算一遍。
像这样避免既重复又繁芜的打算可以显著地提高性能。
对付动画中的打算、搜索不常常变革的数据或任何耗时的数学打算来说,影象化这种办法是十分有用的。

看看下面的这个例子,它利用了一个大略的(也的确是效率不高的)算法来打算素数。
只管这是一个繁芜打算的大略例子,但它常常被运用到大打算量的场景中(例如可以引申到通过字符串天生MD5算法),这里不便展示。

从外表来说,这个函数和任何普通函数一样,但在内部我们会构建一个结果缓存,它会保存函数每次打算得到的结果,如清单1.3所示。

清单1.3 打算先前得到的值

1function isPrime(value) {

2 if (!isPrime.answers) {

3  isPrime.answers = {};

4 }  ?--- 创建缓存

5 if (isPrime.answers[value] !== undefined) {

6  return isPrime.answers[value];

7 }  ?--- 检讨缓存的值

8 var prime = value !== 0 && value !== 1; // 1 is not a prime

9 for (var i = 2; i < value; i++) {

10   if (value % i === 0) {

11    prime = false;

12    break;

13   }

14 }

15 return isPrime.answers[value] = prime;   ?--- 存储打算的值

16}

17assert(isPrime(5), \"大众5 is prime!\"大众);

18assert(isPrime.answers[5], \"大众The answer was cached!\"大众);   ?--- 测试该函数是否正常事情

在isPrime函数中,首先通过检讨它的answers属性来确认是否已经创建了一个缓存,如果没有创建,则新建一个:

1if (!isPrime.answers) {

2  isPrime.answers = {};

3}

只有第一次函数调用才会创建这个初始空工具,之后这个缓存就已经存在了。
然后我们会检讨参数中传的值是否已经存储到缓存中:

1if (isPrime.answers[value] !== undefined) {

2 return isPrime.answers[value];

3}

这个缓存会针对参数中的值value来存储该值是否为素数(true或false)。
如果我们在缓存中找到该值,函数会直接返回。

1return isPrime.answers[value] = prime;

这个缓存是函数自身的一个属性,以是只要该函数还存在,缓存也就存在。

末了的测试结果可以看到影象函数生效了。

1assert(isPrime(5), \公众5 is prime!\公众);

2assert(isPrime.answers[5], \"大众The answer was cached!\公众);

这个方法具有两个优点。

由于函数调用时会探求之前调用所得到的值,以是用户终极会乐于看到所得到的性能收益。

它险些是无缝地发生在后台,终极用户和页面作者都不须要实行任何分外要求,也不须要做任何额外初始化,就能顺利进行事情。

当然这种方法并不是像玫瑰和提琴一样完美,还是要权衡利弊。

任何类型的缓存都一定会为性能捐躯内存。

纯粹主义者会认为缓存逻辑不应该和业务逻辑稠浊,函数或方法只须要把一件事做好。
但不必担心,在第8章你会理解到如何办理这类问题。

对付这类问题很难做负载测试或估计算法繁芜度,由于结果依赖于函数之前的输入。

现在你看到了函数作为第一类公民的一些实例,接下来看看不同的函数定义的办法。

1.3 函数定义

JavaScript函数常日由函数字面量(function literal)来创建函数值,就像数字字面量创建一个数字值一样。
要记住这一点,作为第一类工具,函数是可以用在编程措辞中的值,就像例句字符串或数字的值。
无论你是否意识到了这一点,你一贯都是这样做的。

JavaScript供应了几种定义函数的办法,可以分为4类。

函数定义(function declarations)和函数表达式(function expressions)——最常用,在定义函数上却有奇妙不同的的两种办法。
人们常日不会独立地看待它们,但正如你将看到的,意识到两者的不同能帮我们理解函数何时能够被调用。

1function myFun(){ return 1;}

箭头函数(常日被叫做lambda函数)——ES6新增的JavaScript标准,能让我们以只管即便简洁的语法定义函数。

1myArg => myArg2

函数布局函数—— 一种不常利用的函数定义办法,能让我们以字符串形式动态布局一个函数,这样得到的函数是动态天生的。
这个例子动态地创建了一个函数,其参数为a和b,返回值为两个数的和。

1new Function('a', 'b', 'return a + b')

天生器函数——ES6新增功能,能让我们创建不同于普通函数的函数,在运用程序实行过程中,这种函数能够退出再重新进入,在这些再进入之间保留函数内变量的值。
我们可以定义天生器版本的函数声明、函数表达式、函数布局函数。

1function myGen(){ yield 1; }

理解这几种办法的不同很主要,由于函数创建的办法很大程度地影响了函数可被调用的韶光、函数的行为以及函数可以在哪个工具上被调用。

这一节中,我们将会探索函数定义、函数表达式和箭头函数。
你将学到它们的语法和它们的事情办法,我们也将会在本文中多次回顾它们的细节。
另一方面,天生器函数则有一点独特,它不同于普通函数。
在第6章我们会再来学习它们的细节。

剩下的JavaScript特性——函数布局函数我们将全部跳过。
只管它具有某些有趣的运用处景,尤其是在动态创建和实行代码时,但我们依然认为它是JavaScript措辞的边缘功能。
如果你想知道更多关于函数布局函数的信息,请访问http://mng.bz/ZN8e。

让我们先用最大略、最传统的办法定义函数吧:函数声明和函数表达式。

1.3.1 函数声明和函数表达式

JavaScript中定义函数最常用的办法是函数声明和函数表达式。
这两种技能非常相似,有时乃至难以区分,但在后续章节中你将看到,它们之间还是存在着奇妙的差别。

函数声明

JavaScript定义函数的最基本办法是函数声明(见图1.4)。
正如你所见,每个函数声明以逼迫性的function开头,其后紧接着逼迫性的函数名,以及括号和括号内一列以逗号分隔的可选参数名。
函数体是一列可以为空的表达式,这些表达式必须包含在花括号内。
除了这种形式以外,每个函数声明还必须包含一个条件:作为一个单独的JavaScript语句,函数声明必须独立(但也能够被包含在其他函数或代码块中,不才一小节中你将会准确理解其含义)。

图1.4 函数声明是独立的,是独立的JavaScript代码块(它可以被包含在其他函数中)

清单1.4展示了两条函数声明例子。

清单1.4 函数声昭示例

1function samurai() {

2 return \"大众samurai here\公众;  ?--- 在全局代码中定义samurai函数

3}

4function ninja() {  ?--- 在全局代码中定义ninja函数

5 function hiddenNinja() {

6  return \"大众ninja here\公众;

7 }  ?--- 在ninja函数内定义hiddenNinja函数

8 return hiddenNinja();

9}

如果你对函数式措辞没有太多理解,仔细看一看,你可能会创造你并不习气这种利用办法: 一个函数被定义在另一个函数之中!

1function ninja() {

2 function hiddenNinja() {

3   return \"大众ninja here\公众;

4 }

5 return hiddenNinja();

6}

在JavaScript中,这是一种非常通用的利用办法,这里用它作为例子是为了再次强调JavaScript中函数的主要性。

{把稳 } 

让函数包含在另一个函数中可能会由于忽略浸染域的标识符解析而引发一些有趣的问题,但现在可以先留下这个问题,第5章会重新回顾这个问题的细节。

函数表达式

正如我们多次所提到的,JavaScript中的函数是第一类工具,除此以外也就意味着它们可以通过字面量创建,可以赋值给变量和属性,可以作为通报给其他函数的参数或函数的返回值。
正由于函数有如此的根本构造,以是JavaScript能让我们把函数和其他表达式同等看待。
例如,如下例子中我们可以利用数字字面量:

1var a = 3;

2myFunction(4);

同样,在相同位置可以用函数字面量:

1var a = function() {};

2myFunction(function(){});

这种总是其他表达式的一部分的函数(作为赋值表达式的右值,或者作为其他函数的参数)叫作函数表达式。
函数表达式非常主要,在于它能准确地在我们须要利用的地方定义函数,这个过程能让代码易于理解。
清单1.5展示了函数声明和函数表达式的不同之处。

清单1.5 函数声明和函数表达式

1<pre class=\"大众代码无行号\"大众><code>function myFunctionDeclaration(){  ?--- 独立的函数声明

2 function innerFunction() {}  ?--- 内部函数声明

3}

4var myFunc = function(){};  ?--- 函数表达式作为变量声明赋值语句中的一部分

5myFunc(function(){  ?--- 函数表达式作为一次函数调用中的参数

6  return function(){};  ?--- 函数表达式作为函数返回值

7});

8(function <strong>namedFunctionExpression</strong> () {

9})();  ?--- 作为函数调用的一部分,命名函数表达式会被立即调用

10+function(){}();

11-function(){}();

12!function(){}();

13~function(){}();  ?--- 函数有达式可以作为一元操作符的参数立即调用</code></pre>

示例代码的开头是标准函数声明,其包含一个内部函数声明:

1function myFunctionDeclaration(){

2 function innerFunction() {}

3}

从这个示例中你能够看到,函数声明是如何作为JavaScript代码中的独立表达式的,但它也能够包含在其他函数体内。
与之比较的是函数表达式,它常日作为其他语句的一部分。
它们被放在表达式级别,作为变量声明(或者赋值)的右值:

1var myFunc = function(){};

或者作为另一个函数调用的参数或返回值。

1myFunc(function() {

2 return function(){};

3});

函数声明和函数表达式除了在代码中的位置不同以外,还有一个更主要的不同点是:对付函数声明来说,函数名是逼迫性的,而对付函数表达式来说,函数名则完备是可选的。

函数声明必须具有函数名是由于它们是独立语句。
一个函数的基本哀求是它该当能够被调用,以是它必须具有一种被引用办法,于是唯一的办法便是通过它的名字。

从另一方面来看,函数表达式也是其他JavaScript表达式的一部分,以是我们也就具有了调用它们的替代方案。
例如,如果一个函数表达式被赋值给了一个变量,我们可以用该变量来调用函数。

1var doNothing = function(){};

2doNothing();

或者,如果它是其余一个函数的参数,我们可以在该函数中通过相应的参数名来调用它。

1function doSomething(action) {

2 action();

3}

立即函数

函数表达式可以放在初看起来有些奇怪的位置上,例如常日认为是函数标识符的位置。
接下来仔细看看这个布局(如图1.5所示)。

图1.5 标准函数的调用和函数表达式的立即调用的比拟

当想进行函数调用时,我们须要利用能够求值得到函数的表达式,其后随着一对函数调用括号,括号内包含参数。
在最基本的函数调用中,我们把求值得到函数的标识符作为左值(如图1.5所示)。
不过用于被括号调用的表达式不必只是一个大略的标识符,它可以是任何能够求值得到函数的表达式。
例如,指定一个求值得到函数的表达式的最大略办法是利用函数表达式。
如图1.5中右图所示,我们首先创建了一个函数,然后立即调用这个新创建的函数。
这种函数叫作立即调用函数表达式(IIFE),或者简写为立即函数。
这一特性能够仿照JavaScript中的模块化,故可以说它是JavaScript开拓中的主要理念。
第11章中汇合中谈论IIFE的运用。

{加括号的函数表达式!} 

还有一件可能困扰你的是上面例子中我们立即调用的函数表达式办法:函数表达式被包裹在一对括号内。
为什么这样做呢?其缘故原由是纯语法层面的。
JavaScript解析器必须能够轻易区分函数声明和函数表达式之间的差异。
如果去掉包裹函数表达式的括号,把立即调用作为一个独立语句function() {}(3),JavaScript开始解析时便会结束,由于这个独立语句以function开头,那么解析器就会认为它在处理一个函数声明。
每个函数声明必须有一个名字(然而这里并没有指定名字),以是程序实行到这里会报错。
为了避免缺点,函数表达式要放在括号内,为JavaScript解析器指明它正在处理一个函数表达式而不是语句。

还有一种相对大略的替代方案(function(){}(3))也能达到相同目标(然而这种方案有些奇怪,故不常利用)。
把立即函数的定义和调用都放在括号内,同样可以为JavaScript解析器指明它正在处理函数表达式。

表1.5中末了4个表达式都是立即调用函数表达式主题的4个不同版本,在JavaScript库中会常常见到这几种形式:

1+function(){}();

2-function(){}();

3!function(){}();

4~function(){}();

不同于用加括号的办法区分函数表达式和函数声明,这里我们利用一元操作符+、-、!和~。
这种做法也是用于向JavaScript引擎指明它处理的是表达式,而不是语句。
从打算机的角度来讲,把稳运用一元操作符得到的结果没有存储到任何地方并不主要,只有调用IIFE才主要。
现在我们已经学会了JavaScript中两种基本的函数定义办法(函数声明和函数表达式)的细节。
接下来开始探索JavaScript标准中的新增特性:箭头函数。

1.3.2 箭头函数

把稳:

箭头函数是JavaScript标准中的ES6新增项(浏览器兼容性可参考http://mng.bz/8bnH)。

由于JavaScript中会利用大量函数,增加简化创建函数办法的语法十分故意义,也能让我们的开拓者生活更愉快。
在很多办法中,箭头函数是函数表达式的简化版。
一起来回顾一下本文开始的排序例子。

1var values = [0, 3, 2, 5, 7, 4, 8, 1];

2values.sort(function(value1,value2){

3 return value1 – value2;

4});

这个例子中,数组工具的排序方法的参数传入了一个回调函数表达式,JavaScript引擎会调用这个回调函数以降序排序数组。
现在来看看如何用箭头函数来做完备相同的事情:

1var values = [0, 3, 2, 5, 7, 4, 8, 1];

2

3values.sort((

4

5value1,value2) => value1 – value2

6

7);

看到这是多么简洁了吧?

这种写法不会产生任何由于书写function关键字、大括号或者return语句导致的混乱。
箭头函数语句有着比函数表达式更为大略的办法:函数传入两个参数并返回其差值。
把稳这个新操作符——胖箭头符号=>(等号后面随着大于号)是定义箭头函数的核心。

现在来解析箭头函数的语法,首先看看它的最简形式:

1param => expression

这个箭头函数吸收一个参数并返回表达式的值,如下面的清单1.6就利用了这种语法。

清单1.6 比较箭头函数和函数表达式

1var greet = name => \公众Greetings \"大众 + name;  ?--- 定义箭头函数

2

3assert(greet(\公众Oishi\"大众) === \"大众Greetings Oishi\公众, \公众Oishi is properly greeted\"大众)

4;

5

6var anotherGreet = function(nam

7e){

8 return \"大众Greetings \"大众 + n

9ame;

10};  ?--- 定义

11函数表达式

12assert(anotherGreet(\公众Oishi\公众) === \公众Greetings O

13ishi\"大众,

14     \"大众Again, Oishi is properly greeted\"大众);

稍作欣赏,利用箭头函数的代码即简洁又清楚。
这是箭头函数的最简语法,但一样平常情形下,箭头函数会被定义成两种办法,如图1.6所示。

稍作欣赏,利用箭头函数的代码即简洁又清楚。
这是箭头函数的最简语法,但一样平常情形下,箭头函数会被定义成两种办法,如图1.6所示。

图1.6 箭头函数的语法

如你所见,箭头函数的定义以一串可选参数名列表开头,参数名以逗号分隔。
如果没有参数或者多余一个参数时,参数列表就必须包裹在括号内。
但如果只有一个参数时,括号就不是必须的。
参数列表之后必须随着一个胖箭头符号,以此向我们和JavaScript引擎指示当前处理的是箭头函数。

胖箭头操作符后面有两种可选办法。
如果要创建一个大略函数,那么可以把表达式放在这里(可以是数学运算、其他的函数调用等),则该函数的返回值即为此表达式的返回值。
例如,第一个箭头函数的示例如下:

1var greet = name => \"大众Greetings \"大众 + name;

这个箭头函数的返回值是字符串“Greetings”和参数name的结合。
在其他案例中,当箭头函数没那么大略从而须要更多代码时,箭头操作符后则可以跟一个代码块,例如:

1var greet = name => {

2 var helloString = 'Greetings ';

3 return helloString + name;

4};

这段代码中箭头函数的返回值和普通函数一样。
如果没有return语句,返回值是undefined;反之,返回值便是return表达式的值。

在本文中我们会多次回顾箭头函数。
除此之外,我们还会展示箭头函数的一些额外功能,它能帮助我们规避一些在很多标准函数中可能碰着的难以捉摸的毛病。
箭头函数和很多其他函数一样,可以通过吸收参数来实行任务。
接下来看看当向函数内传入参数后,该参数值发生了什么。

本文摘自《JavaScript忍者秘籍(第2版)》

《JavaScript忍者秘籍 第2版》

[美] John,Resig(莱西格),Bear,Bibeault(贝比奥特),Josip ... 著

点击封面购买纸书

JavaScript 正以惊人的速率成为各种运用程序的通用措辞,包括 Web、桌面、云和移动设备上的运用程序。
当成为 JavaScript 专业开拓者时,你将拥有可运用于所有这些领域的、强大的技能集。

《JavaScript 忍者秘籍(第2版)》利用实际的案例清晰地诠释每一个核心观点和技能。
本书向读者先容了如何节制 JavaScript 核心的观点,诸如函数、闭包、工具、原型和 promise,同时还先容了 JavaScript API, 包括 DOM、事宜和计时器。
你将学会测试、跨浏览器开拓,所有这些都是高等JavaScript开拓者该当节制的技能。

小福利

关注【异步社区】做事号,转发本文至朋友圈或 50 人以上微信群,截图发送至异步社区做事号后台,并在文章底下留言,分享你的JavaScript开拓履历或者本书的试读体验,我们将选出3名读者赠予《JavaScript 忍者秘籍(第2版)》1本,赶紧积极参与吧!

活动截止韶光:2018 年3月15日

在“异步社区”后台回答“关注”,即可免费得到2000门在线视频课程;推举朋友关注根据提示获取赠书链接,免费得异步图书一本。
赶紧来参加哦!

扫一扫上方二维码,回答“关注”参与活动!

阅读原文,购买《JavaScript 忍者秘籍(第2版》

阅读原文