## 23.可调用值
> 原文： [http://exploringjs.com/impatient-js/ch_callables.html](http://exploringjs.com/impatient-js/ch_callables.html)
>
> 贡献者：[阿纯](https://github.com/rechun)
### 23.1。各种功能
JavaScript 有两类功能：
* 普通函数 可以扮演几个角色：
* 实际功能（在其他语言中，你只需使用术语“功能”;在 JavaScript 中，我们需要区分角色“真实功能”和可以扮演该角色的实体“普通功能”）
* 方法
* 构造函数
* 专用功能 只能扮演其中一个角色。例如：
* 箭头功能 只能是实际功能。
* 方法 只能是一种方法。
* 类 只能是构造函数。
接下来的部分将解释所有这些内容的含义。
### 23.2。普通功能
以下代码显示了三种方法（大致）相同的事情：创建一个普通的函数。
```js
// Function declaration (a statement)
function ordinary1(a, b, c) {
// ···
}
// Anonymous function expression
const ordinary2 = function (a, b, c) {
// ···
};
// Named function expression
const ordinary3 = function myName(a, b, c) {
// `myName` is only accessible in here
};
```
正如我们在[中看到的关于变量](ch_variables-assignment.html#hoisting)的章节，函数声明被提升，而变量声明（例如通过`const`）则没有。我们将在本章后面探讨其后果。
函数声明和函数表达式的语法非常相似。上下文决定哪个是哪个。有关这种语法歧义的更多信息，请参阅[关于语法](ch_syntax.html#ambiguous-syntax)的章节。
#### 23.2.1。函数声明的一部分
让我们通过一个例子来检查函数声明的各个部分：
```js
function add(x, y) {
return x + y;
}
```
* `add`是函数声明的 _ 名称 _。
* `add(x, y)`是函数声明的 _ 头 _。
* `x`和`y`是 _ 参数 _。
* 花括号（`{`和`}`）以及它们之间的所有东西都是函数声明的 _ 体 _。
* `return`运算符显式返回函数的值。
#### 23.2.2。普通功能的名称
函数表达式的名称只能在函数内部访问，函数可以使用它来引用自身（例如，用于自递归）：
```js
const func = function funcExpr() { return funcExpr };
assert.equal(func(), func);
// The name `funcExpr` only exists inside the function:
assert.throws(() => funcExpr, ReferenceError);
```
相反，函数声明的名称可在当前范围内访问：
```js
function funcDecl() { return funcDecl }
// The name `funcDecl` exists inside the current scope
assert.equal(funcDecl(), funcDecl);
```
#### 23.2.3。普通功能扮演的角色
请考虑上一节中的以下函数声明：
```js
function add(x, y) {
return x + y;
}
```
该函数声明创建一个名为`add`的普通函数。作为一个普通的功能，`add()`可以扮演三个角色：
* 实函数：通过函数调用调用。这是大多数编程语言认为简单的 _ 函数 _。
```js
assert.equal(add(2, 1), 3);
```
* 方法：存储在属性中，通过方法调用调用。
```js
const obj = { addAsMethod: add };
assert.equal(obj.addAsMethod(2, 4), 6);
```
* 构造函数/类：通过`new`调用。
```js
const inst = new add();
assert.equal(inst instanceof add, true);
```
（顺便说一句，类的名称通常以大写字母开头。）
### 23.3。专业功能
专业功能是普通功能的专用版本。他们每个人只扮演一个角色：
* 箭头函数 只能是一个真正的函数：
```js
const arrow = () => { return 123 };
assert.equal(arrow(), 123);
```
* 方法 只能是一种方法：
```js
const obj = { method() { return 'abc' } };
assert.equal(obj.method(), 'abc');
```
* 类 只能是构造函数：
```js
class MyClass { /* ··· */ }
const inst = new MyClass();
```
除了更好的语法之外，每种专用功能还支持新功能，使其在工作中比普通功能更好。
* 本章稍后将解释箭头功能[。](ch_callables.html#arrow-functions)
* 方法在[关于单个对象](ch_single-objects.html#methods)的章节中进行了解释。
* 在[关于原型链和类](ch_proto-chains-classes.html#classes)的章节中解释了类。
TBL。 [18](#tbl:capabilities-of-functions) 列出了普通和专用功能的功能。
Table 18: Capabilities of four kinds of functions.
| | 普通功能 | 箭头功能 | 方法 | 类 |
| --- | --- | --- | --- | --- |
| 函数调用 | `✔` | `✔` | `✔` | `✘` |
| 方法调用 | `✔` | 词汇`this` | `✔` | `✘` |
| 构造函数调用 | `✔` | `✘` | `✘` | `✔` |
#### 23.3.1。专业功能仍然是功能
值得注意的是，箭头函数，方法和类仍然归类为函数：
```js
> (() => {}) instanceof Function
true
> ({ method() {} }.method) instanceof Function
true
> (class SomeClass {}) instanceof Function
true
```
#### 23.3.2。建议：更喜欢专门的功能
通常，您应该优先使用专用函数而不是普通函数，尤其是类和方法。但是，箭头功能和普通功能之间的选择不那么明确：
* 箭头函数没有`this`作为隐式参数。如果你使用真正的函数，这几乎总是你想要的，因为它避免了一个重要的`this`相关的陷阱（详见[关于单个对象](ch_single-objects.html#avoiding-pitfalls-of-this)的章节）。
* 但是，我喜欢语法上的函数声明（它产生一个普通的函数）。如果你不在其中使用`this`，它大部分相当于`const`加箭头功能：
```js
function funcDecl(x, y) {
return x * y;
}
const arrowFunc = (x, y) => {
return x * y;
};
```
#### 23.3.3。箭头功能
Arrow 函数被添加到 JavaScript 中有两个原因：
1. 为创建函数提供更简洁的方法。
2. 更容易使用实际函数：不能在普通函数中引用周围范围的`this`（详见[很快](ch_callables.html#arrow-functins-lexical-this)）。
##### 23.3.3.1。箭头函数的语法
让我们回顾一下匿名函数表达式的语法：
```js
const f = function (x, y, z) { return 123 };
```
（粗略）等效箭头函数如下所示。箭头函数是表达式。
```js
const f = (x, y, z) => { return 123 };
```
这里，箭头函数的主体是一个块。但它也可以是一种表达方式。以下箭头功能与前一个功能完全相同。
```js
const f = (x, y, z) => 123;
```
如果箭头函数只有一个参数且该参数是标识符（不是解构模式），那么您可以省略参数周围的括号：
```js
const id = x => x;
```
将箭头函数作为参数传递给其他函数或方法时，这很方便：
```js
> [1,2,3].map(x => x+1)
[ 2, 3, 4 ]
```
最后一个例子展示了箭头功能的第一个好处 - 简洁。相反，这是相同的方法调用，但带有函数表达式：
```js
[1,2,3].map(function (x) { return x+1 });
```
##### 23.3.3.2。箭头功能：词汇`this`
普通函数既可以是方法，也可以是实际函数。唉，这两个角色是冲突的：
* 由于每个普通函数都可以是一个方法，因此它有自己的`this`。
* 自己的`this`使得无法从普通函数内部访问周围范围的`this`。这对于真正的功能来说是不方便的。
以下代码演示了一种常见的解决方法：
```js
const prefixer = {
prefix: '==> ',
prefixStringArray(stringArray) {
const that = this; // (A)
return stringArray.map(
function (x) {
return that.prefix + x; // (B)
});
},
};
assert.deepEqual(
prefixer.prefixStringArray(['a', 'b']),
['==> a', '==> b']);
```
在 B 行中，我们想要访问`.prefixStringArray()`的`this`。但我们不能，因为周围的普通函数有自己的`this` _ 阴影 _（阻止访问）方法的`this`。因此，我们将方法的`this`保存在额外变量`that`（A 行）中，并在 B 行中使用该变量。
箭头函数没有`this`作为隐式参数，它从周围环境中获取其值。也就是说，`this`的行为与任何其他变量一样。
```js
const prefixer = {
prefix: '==> ',
prefixStringArray(stringArray) {
return stringArray.map(
x => this.prefix + x);
},
};
```
总结一下：
* 在普通函数中，`this`是隐式（_ 动态 _）参数（[中有关单个对象](ch_single-objects.html#methods)的章节中的详细信息）。
* 箭头函数从其周围的范围获得`this`（_ 词法 _）。
##### 23.3.3.3。语法陷阱：从箭头函数返回一个对象字面值
如果希望箭头函数的表达式主体是对象字面值，则必须将字面值放在括号中：
```js
const func1 = () => ({a: 1});
assert.deepEqual(func1(), { a: 1 });
```
如果不这样，JavaScript 认为，箭头函数有一个块体（不返回任何内容）：
```js
const func2 = () => {a: 1};
assert.deepEqual(func2(), undefined);
```
`{a: 1}`被解释为[标签`a:`](ch_control-flow.html#labels) 和表达式语句`1`的块。
这个陷阱是由[语法模糊](ch_syntax.html#ambiguous-syntax)引起的：对象字面值和代码块具有相同的语法，我们必须帮助 JavaScript 区分它们。
### 23.4。吊装功能
函数声明是 _ 悬挂 _（内部移动到顶部）：
```js
assert.equal(foo(), 123); // OK
function foo() { return 123; }
```
提升允许您在声明之前调用`foo()`。
变量声明不会被挂起：在以下示例中，您只能在声明后使用`bar()`。
```js
assert.throws(
() => bar(), // before declaration
ReferenceError);
const bar = () => { return 123; };
assert.equal(bar(), 123); // after declaration
```
类声明不会悬挂，也可以：
```js
assert.throws(
() => new MyClass(),
ReferenceError);
class MyClass {}
assert.equal(new MyClass() instanceof MyClass, true);
```
#### 23.4.1。在没有吊装的情况下提前召唤
注意函数`f()`仍然可以在声明之前调用非提升函数`g()` - 如果在声明`g()`之后调用`f()`：
```js
const f = () => g();
const g = () => 123;
// We call f() after g() was declared:
assert.equal(f(), 123);
```
通常在执行模块的完整主体之后调用模块的功能。因此，您很少需要担心模块中的函数顺序。
#### 23.4.2。吊装的陷阱
如果您在声明之前依赖于提升来调用函数，那么您需要注意它不能访问非提升数据。
```js
hoistedFunc();
const MY_STR = 'abc';
function hoistedFunc() {
assert.throws(
() => MY_STR,
ReferenceError);
}
```
和以前一样，如果你在最后调用函数`hoistedFunc()`，问题就会消失。
### 23.5。从函数返回值
使用`return`运算符从函数返回值：
```js
function func() {
return 123;
}
assert.equal(func(), 123);
```
另一个例子：
```js
function boolToYesNo(bool) {
if (bool) {
return 'Yes';
} else {
return 'No';
}
}
assert.equal(boolToYesNo(true), 'Yes');
assert.equal(boolToYesNo(false), 'No');
```
如果在函数末尾没有显式返回任何内容，JavaScript 会为您返回`undefined`：
```js
function noReturn() {
// No explicit return
}
assert.equal(noReturn(), undefined);
```
### 23.6。参数处理
#### 23.6.1。术语：参数(parameters)与参数(arguments)
术语 参数 (parameters) 和术语 参数 (arguments)基本上意思相同。如果您愿意，可以进行以下区分：
* 参数 (parameters) 是函数定义的一部分。它们也被称为 形式参数 (formal parameters )和 形式参数 (formal arguments.)。
* 参数 (arguments) 是函数调用的一部分。它们也被称为 实际参数 actual parameters 和 实际参数 actual arguments.。
#### 23.6.2。术语：回调
_ 回调 _ 或 _ 回调函数 _ 是作为参数传递给另一个函数或方法的函数。此术语经常在 JavaScript 社区中广泛使用。
以下是回调的示例：
```js
const myArray = ['a', 'b'];
const callback = (x) => console.log(x);
myArray.forEach(callback);
// Output:
// 'a'
// 'b'
```
#### 23.6.3。参数太多或不够
如果函数调用提供的参数数量不同于函数定义所预期的数量，则 JavaScript 不会抱怨：
* 额外的参数被忽略。
* 缺少的参数设置为`undefined`。
例如：
```js
function foo(x, y) {
return [x, y];
}
// Too many arguments:
assert.deepEqual(foo('a', 'b', 'c'), ['a', 'b']);
// The expected number of arguments:
assert.deepEqual(foo('a', 'b'), ['a', 'b']);
// Not enough arguments:
assert.deepEqual(foo('a'), ['a', undefined]);
```
#### 23.6.4。参数默认值
参数默认值指定在未提供参数时要使用的值。例如：
```js
function f(x, y=0) {
return [x, y];
}
assert.deepEqual(f(1), [1, 0]);
assert.deepEqual(f(), [undefined, 0]);
```
`undefined`也会触发默认值：
```js
assert.deepEqual(
f(undefined, undefined),
[undefined, 0]);
```
#### 23.6.5。休息参数
通过在标识符前面添加三个点（`...`）来声明 rest 参数。在函数或方法调用期间，它接收包含所有剩余参数的数组。如果最后没有额外的参数，那么它是一个空数组。例如：
```js
function f(x, ...y) {
return [x, y];
}
assert.deepEqual(
f('a', 'b', 'c'),
['a', ['b', 'c']]);
assert.deepEqual(
f(),
[undefined, []]);
```
##### 23.6.5.1。通过 rest 参数强制执行一定数量的参数
您可以使用 rest 参数来强制执行一定数量的参数。例如，以下功能。
```js
function bar(a, b) {
// ···
}
```
这就是我们强制调用者总是提供两个参数的方法：
```js
function bar(...args) {
if (args.length !== 2) {
throw new Error('Please provide exactly 2 arguments!');
}
const [a, b] = args;
// ···
}
```
#### 23.6.6。命名参数
当有人调用函数时，调用者提供的参数将分配给被调用者接收的参数。执行映射的两种常用方法是：
1. 位置参数：如果参数具有相同的位置，则将参数分配给参数。仅具有位置参数的函数调用如下所示。
```js
selectEntries(3, 20, 2)
```
2. 命名参数：如果参数具有相同的名称，则将参数分配给参数。 JavaScript 没有命名参数，但您可以模拟它们。例如，这是一个只有（模拟）命名参数的函数调用：
```js
selectEntries({start: 3, end: 20, step: 2})
```
命名参数有几个好处：
* 它们导致更加自我解释的代码，因为每个参数都有一个描述性标签。只需比较`selectEntries()`的两个版本：使用第二个版本，可以更容易地看到发生了什么。
* 参数顺序无关紧要（只要名称正确）。
* 处理多个可选参数更方便：调用者可以轻松提供所有可选参数的任何子集，而不必知道它们省略的那些（使用位置参数，您必须使用`undefined`填写前面的可选参数]）。
#### 23.6.7。模拟命名参数
JavaScript 没有真正的命名参数。模拟它们的官方方法是通过对象字面值：
```js
function selectEntries({start=0, end=-1, step=1}) {
return {start, end, step};
}
```
此函数使用 _ 解构 _ 来访问其单个参数的属性。它使用的模式是以下模式的缩写：
```js
{start: start=0, end: end=-1, step: step=1}
```
这种解构模式适用于空对象字面值：
```js
> selectEntries({})
{ start: 0, end: -1, step: 1 }
```
但是如果你在没有任何参数的情况下调用函数它就不起作用：
```js
> selectEntries()
TypeError: Cannot destructure property `start` of 'undefined' or 'nu
```
您可以通过为整个模式提供默认值来解决此问题。此默认值与更简单的参数定义的默认值相同：如果缺少该参数，则使用默认值。
```js
function selectEntries({start=0, end=-1, step=1} = {}) {
return {start, end, step};
}
assert.deepEqual(
selectEntries(),
{ start: 0, end: -1, step: 1 });
```
#### 23.6.8。将（`...`）传播到函数调用中
spread 参数的前缀（`...`）与 rest 参数的前缀相同。在调用函数或方法时使用前者。它的操作数必须是可迭代的对象。迭代的值转换为位置参数。例如：
```js
function func(x, y) {
console.log(x);
console.log(y);
}
const someIterable = ['a', 'b'];
func(...someIterable);
// Output:
// 'a'
// 'b'
```
因此，扩展参数和 rest 参数用于相反的目的：
* 定义函数或方法时使用 Rest 参数。他们在数组中收集参数。
* 调用函数或方法时使用 Spread 参数。他们将可迭代对象转换为参数。
##### 23.6.8.1。示例：传播到`Math.max()`
`Math.max()`返回其零个或多个参数中最大的一个。唉，它不能用于数组，但传播给了我们一条出路：
```js
> Math.max(-1, 5, 11, 3)
11
> Math.max(...[-1, 5, 11, 3])
11
> Math.max(-1, ...[-5, 11], 3)
11
```
##### 23.6.8.2。示例：传播到`Array.prototype.push()`
类似地，Array 方法`.push()`破坏性地将其零个或多个参数添加到其 Array 的末尾。 JavaScript 没有破坏性地将数组附加到另一个数组的方法，但我们再次通过传播保存：
```js
const arr1 = ['a', 'b'];
const arr2 = ['c', 'd'];
arr1.push(...arr2);
assert.deepEqual(arr1, ['a', 'b', 'c', 'd']);
```
 **练习：参数处理**
* 位置参数：`exercises/callables/positional_parameters_test.js`
* 命名参数：`exercises/callables/named_parameters_test.js`
 **测验**
参见[测验应用程序](ch_quizzes-exercises.html#quizzes)。
- I.背景
- 1.关于本书（ES2019 版）
- 2.常见问题：本书
- 3. JavaScript 的历史和演变
- 4.常见问题：JavaScript
- II.第一步
- 5.概览
- 6.语法
- 7.在控制台上打印信息（console.*）
- 8.断言 API
- 9.测验和练习入门
- III.变量和值
- 10.变量和赋值
- 11.值
- 12.运算符
- IV.原始值
- 13.非值undefined和null
- 14.布尔值
- 15.数字
- 16. Math
- 17. Unicode - 简要介绍（高级）
- 18.字符串
- 19.使用模板字面值和标记模板
- 20.符号
- V.控制流和数据流
- 21.控制流语句
- 22.异常处理
- 23.可调用值
- VI.模块化
- 24.模块
- 25.单个对象
- 26.原型链和类
- 七.集合
- 27.同步迭代
- 28.数组（Array）
- 29.类型化数组：处理二进制数据（高级）
- 30.映射（Map）
- 31. WeakMaps（WeakMap）
- 32.集（Set）
- 33. WeakSets（WeakSet）
- 34.解构
- 35.同步生成器（高级）
- 八.异步
- 36. JavaScript 中的异步编程
- 37.异步编程的 Promise
- 38.异步函数
- IX.更多标准库
- 39.正则表达式（RegExp）
- 40.日期（Date）
- 41.创建和解析 JSON（JSON）
- 42.其余章节在哪里？