js函数表达式与函数声明

科技术语系列 (Tech Jargon Series)

It’s likely you already know how to write functions in both these ways. function doStuff() {} and () => {} are characters we type all day. But how are they different and why use one over the other?

您可能已经知道如何以这两种方式编写函数。 function doStuff() {}和() => {}是我们整天键入的字符。 但是它们有何不同？为什么要在另一个之上使用？

Note: Examples are given in JavaScript. Your Mileage May Vary with other languages.

注意：示例在JavaScript中给出。 Ÿ我们的并购 ileage 中号 AY V进制与其他语言。

第一个区别：名字 (The first difference: a name)

When you create a function with a name, that is a function declaration. The name may be omitted in function expressions, making that function “anonymous”.

使用名称创建函数时，即为函数声明 。 该名称可以在函数表达式中省略，从而使该函数“匿名”。

Function declaration:

函数声明：

function doStuff() {};

Function expression:

函数表达式：

const doStuff = function() {}

We often see anonymous functions used with ES6 syntax like so:

我们经常看到与ES6语法一起使用的匿名函数，如下所示：

const doStuff = () => {}

吊装 (Hoisting)

Hoisting refers to the availability of functions and variables “at the top” of your code, as opposed to only after they are created. The objects are initialized at compile time and available anywhere in your file.

提升是指函数和变量在代码“顶部”的可用性，而不是仅在它们创建之后。 这些对象在编译时初始化，并且可以在文件中的任何位置使用。

Function declarations are hoisted but function expressions are not.

函数声明被悬挂，但函数表达式未被悬挂。

It’s easy to understand with an example:

用一个例子很容易理解：

doStuff();

function doStuff() {};

The above does not throw an error, but this would:

上面没有抛出错误，但是会：

doStuff();

const doStuff = () => {};

函数表达式的情况 (The case for function expressions)

It might seem like function declarations, with their powerful hoisting properties, are going to edge out function expressions for usefulness. But choosing one over the other requires thinking about when and where the function is needed. Basically, who needs to know about it?

函数声明及其强大的提升属性似乎会使函数表达式失去实用性。 但是要选择一个，则需要考虑何时何地需要该功能 。 基本上，谁需要知道？

Function expressions are invoked to avoid polluting the global scope. Instead of your program being aware of many different functions, when you keep them anonymous, they are used and forgotten immediately.

调用函数表达式可以避免污染全局范围 。 当您使它们保持匿名状态时，它们会立即被使用和忘记，而不是您的程序意识到许多不同的功能。

国际教育展 (IIFE)

The name — immediately invoked function expressions — pretty much says it all here. When a function is created at the same time it is called, you can use an IIFE, which looks like this:

名称- 立即调用的函数表达式 -在这里几乎说明了一切。 在同时调用一个函数时，可以使用如下所示的IIFE：

(function() => {})()

or:

要么：

(() => {})()

For an in-depth look at IIFEs, check out this comprehensive article.

要深入了解IIFE，请查看这篇综合文章 。

回呼 (Callbacks)

A function passed to another function is often referred to as a “callback” in JavaScript. Here’s an example:

传递给另一个函数的函数在JavaScript中通常称为“回调”。 这是一个例子：

function mapAction(item) {// do stuff to an item
}
array.map(mapAction)

array.map(mapAction)

The problem here is that mapAction will be available to your entire application — there’s no need for that. If that callback is a function expression, it will not be available outside of the function that uses it:

这里的问题是mapAction将可用于您的整个应用程序- mapAction 。 如果该回调是函数表达式，则在使用它的函数之外将无法使用它：

array.map(item => { //do stuff to an item })

or

要么

const mapAction = function(item) {// do stuff to an item
}
array.map(mapAction)

array.map(mapAction)

though mapAction will be available to code below its initialization.

尽管mapAction将可用于其初始化下方的代码。

摘要 (Summary)

In short, use function declarations when you want to create a function on the global scope and make it available throughout your code. Use function expressions to limit where the function is available, keep your global scope light, and maintain clean syntax.

简而言之，当您要在全局范围内创建函数并使之在整个代码中可用时，请使用函数声明。 使用函数表达式可限制该函数在何处可用，使全局作用域保持清淡并维护简洁的语法。

参考文献 (References)

• Function declaration, MDN docs.

  函数声明 ，MDN文档。

• Function expression, MDN docs.

  函数表达式 ，MDN文档。

• Hoisting, MDN glossary.

  吊装 ，MDN术语表。

科技术语系列 (The Tech Jargon Series)

There are so many phrases that get thrown around at tech meetups and conferences, assuming that everyone is already down with the lingo. I’m often not down with the lingo. It’s common for developers to act astonished that I lack a piece of knowledge.

假设每个人都已经对这种术语感到沮丧，那么在技术聚会和会议上会出现很多短语。 我常常不喜欢行话。 开发人员惊讶地发现我缺乏知识，这很常见。

The truth is, I often just don’t know the right word for it. As humans, but especially developer humans, we love to dismiss those who don’t “talk the talk”, so this series is about getting a solid understanding of programming concepts that one “should know”.

事实是，我常常只是不知道正确的词。 作为人类，尤其是开发人员，我们喜欢解雇那些不“谈论”的人，因此本系列文章旨在对人们“应该知道”的编程概念有扎实的理解。

This is the second article in the series. The first was higher-order functions. Look out for more as I go to meetups and conferences and pretend to know what my fellow techies are talking about, but then have to go home and Google it.

这是该系列的第二篇文章。 首先是高阶函数 。 当我去参加聚会和会议时要注意更多，并假装知道其他技术人员在谈论什么，但随后必须回家并使用Google。

翻译自: https://www.freecodecamp.org/news/when-to-use-a-function-declarations-vs-a-function-expression-70f15152a0a0/

js函数表达式与函数声明