正确使用 const 定义函数

Question

对于在 JavaScript 中使用 const 可以设置哪些类型的值有任何限制，尤其是函数？这是有效的吗？当然，它确实有效，但出于任何原因，它是否被认为是不好的做法？

const doSomething = () => {
   ...
}

应该在 ES6 中以这种方式定义所有函数吗？如果是这样的话，这似乎没有流行起来。

Answer 1

你做的没有问题，但是你一定要记住函数声明和函数表达式的区别。

一个函数声明，即：

function doSomething () {}

完全提升到作用域的顶部（和let 和const 一样，它们也是块作用域）。

这意味着以下将起作用：

doSomething() // works!
function doSomething() {}

一个函数表达式，即：

[const | let | var] = function () {} (or () =>

是创建一个匿名函数 (function () {}) 并创建一个变量，然后将该匿名函数赋值给该变量。

因此，围绕范围内变量提升的常规规则——块范围变量（let 和 const）不会像 undefined 一样提升到其块范围的顶部。

这意味着：

if (true) {
    doSomething() // will fail
    const doSomething = function () {}
}

将失败，因为doSomething 未定义。 （它会抛出一个ReferenceError）

如果您切换到使用var，您将获得变量的提升，但它将被初始化为undefined，因此上面的代码块仍然无法工作。 （这将抛出一个TypeError，因为doSomething 在你调用它时不是一个函数）

就标准做法而言，您应该始终使用适合工作的工具。

Axel Rauschmayer 有一篇关于范围和提升（包括 es6 语义）的精彩帖子：Variables and Scoping in ES6

Answer 2

虽然使用const 来定义函数似乎是一种 hack，但它具有一些使其优越的巨大优势（在我看来）

1. 它使函数不可变，因此您不必担心该函数会被其他代码更改。

2. 您可以使用粗箭头语法，它更短且更简洁。

3. 使用箭头函数为您处理this 绑定。

function 示例

// define a function
function add(x, y) { return x + y; }

// use it
console.log(add(1, 2)); // 3

// oops, someone mutated your function
add = function (x, y) { return x - y; };

// now this is not what you expected
console.log(add(1, 2)); // -1

与const 相同的示例

// define a function (wow! that is 8 chars shorter)
const add = (x, y) => x + y;

// use it
console.log(add(1, 2)); // 3

// someone tries to mutate the function
add = (x, y) => x - y; // Uncaught TypeError: Assignment to constant variable.
// the intruder fails and your function remains unchanged

Answer 3

这个问题被问到已经三年了，但我现在才遇到这个问题。由于这个答案离堆栈太远了，请允许我重复一遍：

问：我感兴趣的是对哪些类型的值有任何限制 在 JavaScript 中使用 const 设置——尤其是函数。这是有效的吗？ 诚然它确实有效，但 对于任何人来说都被认为是不好的做法 原因？

在观察到一位多产的 JavaScript 程序员总是使用 const 声明 functions 后，我有动力做一些研究，即使没有明显的原因/好处。

在回答“出于任何原因它被认为是不好的做法吗？”让我说，IMO，是的，或者至少，使用有 优点 function 声明。

在我看来，这主要是偏好和风格的问题。上面提出了一些很好的论点，但没有一个像本文中所做的那样清楚：

Constant confusion: why I still use JavaScript function statements by medium.freecodecamp.org/Bill Sourour，JavaScript 大师、顾问和教师。

我敦促大家阅读那篇文章，即使您已经做出决定。

以下是要点：

函数语句比 [const] 函数有两个明显的优势 表达式：

优势 #1：意图清晰

扫描时 一天几千行代码，能搞清楚是很有用的 尽可能快速轻松地实现程序员的意图。

优势 #2：声明顺序 == 执行顺序

理想情况下，我想或多或少地按照我的顺序声明我的代码 预计它会被执行。

这对我来说是最重要的：使用 const 声明的任何值 关键字在执行到达之前是不可访问的。

我刚刚在上面描述的内容迫使我们编写看起来像 上下翻转。我们必须从最底层的函数开始工作 我们一路向上。

我的大脑不是这样工作的。我想要细节之前的上下文。

大多数代码都是由人类编写的。所以大多数人的想法是有道理的 理解顺序大致遵循大多数代码的执行顺序。

Answer 4

使用const 有一些非常重要的好处，有些人会说应该尽可能使用它，因为它是经过深思熟虑和指示性的。

据我所知，它是 JavaScript 中最具指示性和可预测性的变量声明，也是最有用的声明之一，因为它的约束程度。为什么？因为它消除了var 和let 声明可用的一些可能性。

当您阅读const 时，您能推断出什么？只需阅读const 声明语句，并且无需扫描对该变量的其他引用，您就可以了解以下所有内容：

• 值绑定到该变量（尽管它的底层对象不是完全不可变的）
• 不能在其直接包含的块之外访问它
• 由于时间死区 (TDZ) 规则，在声明之前永远不会访问绑定。

以下引述来自an article 争论let 和const 的好处。它还更直接地回答了您关于关键字约束/限制的问题：

let 和const 提供的约束是一种使代码更易于理解的强大方法。尝试在您编写的代码中累积尽可能多的这些约束。限制一段代码含义的声明性约束越多，人类在未来阅读、解析和理解一段代码就越容易和更快。

当然，const 声明的规则比 var 声明的规则多：块范围，TDZ，在声明时赋值，没有重新赋值。而var 语句仅表示函数范围。然而，规则计数并不能提供很多洞察力。最好根据复杂性来衡量这些规则：规则是增加还是减少复杂性？在const 的情况下，块作用域意味着比函数作用域更窄的作用域，TDZ 意味着我们不需要从声明中向后扫描作用域以便在声明之前发现使用情况，而赋值规则意味着绑定将始终保留相同的引用。

受约束的语句越多，一段代码就越简单。当我们为语句的含义添加约束时，代码变得不那么不可预测了。这是静态类型程序通常比动态类型程序更容易阅读的最大原因之一。静态类型对程序编写者有很大的限制，但它也对程序的解释方式有很大的限制，使其代码更容易理解。

考虑到这些论点，建议您尽可能使用const，因为这是让我们思考的可能性最小的语句。

来源：https://ponyfoo.com/articles/var-let-const

Answer 5

在某些特殊情况下，arrow functions 无法解决问题：

1. 如果我们要更改外部 API 的方法，并且需要对象的引用。

2. 如果我们需要使用 function 表达式独有的特殊关键字：arguments、yield、bind 等。 了解更多信息： Arrow function expression limitations

示例：

我在Highcharts API 中将此函数指定为事件处理程序。 它是由库触发的，因此 this 关键字应该与特定对象匹配。

export const handleCrosshairHover = function (proceed, e) {
  const axis = this; // axis object
  proceed.apply(axis, Array.prototype.slice.call(arguments, 1)); // method arguments
};

使用箭头函数，this 将匹配声明范围，我们将无法访问 API obj：

export const handleCrosshairHover = (proceed, e) => {
  const axis = this; // this = undefined
  proceed.apply(axis, Array.prototype.slice.call(arguments, 1)); // compilation error
};