21.可调用值

• 普通函数 可以扮演几个角色：
  • 实际功能（在其他语言中，你只需使用术语“功能”;在 JavaScript 中，我们需要区分角色“真实功能”和可以扮演该角色的实体“普通功能”）
  • 方法
  • 构造函数
• 专用功能 只能扮演其中一个角色。例如：
  • 箭头功能 只能是实际功能。
  • 方法 只能是一种方法。
  • 类 只能是构造函数。

// 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
};

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

• add是函数声明的 名称。
• add(x, y)是函数声明的 头。
• x和y是 参数。
• 花括号（{和}）以及它们之间的所有东西都是函数声明的 体。
• return运算符显式返回函数的值。

const func = function funcExpr() { return funcExpr };
assert.equal(func(), func);
// The name `funcExpr` only exists inside the function:
assert.throws(() => funcExpr, ReferenceError);

function funcDecl() { return funcDecl }
// The name `funcDecl` exists inside the current scope
assert.equal(funcDecl(), funcDecl);

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

• 实函数：通过函数调用调用。这是大多数编程语言认为简单的 函数。

  assert.equal(add(2, 1), 3);
  

• 方法：存储在属性中，通过方法调用调用。

  const obj = { addAsMethod: add };
  assert.equal(obj.addAsMethod(2, 4), 6);
  

• 构造函数/类：通过new调用。

  const inst = new add();
  assert.equal(inst instanceof add, true);
  

  （顺便说一句，类的名称通常以大写字母开头。）

• 箭头函数 只能是一个真正的函数：

  const arrow = () => { return 123 };
  assert.equal(arrow(), 123);
  

• 方法 只能是一种方法：

  const obj = { method() { return 'abc' } };
  assert.equal(obj.method(), 'abc');
  

• 类 只能是构造函数：

  class MyClass { /* ··· */ }
  const inst = new MyClass();
  

• 本章稍后将解释箭头功能。
• 方法在 25.单实例对象 章节中进行了解释。
• 在 26.原型链和类 章节中解释了类。

> (() => {}) instanceof Function
true
> ({ method() {} }.method) instanceof Function
true
> (class SomeClass {}) instanceof Function
true

• 箭头函数没有this作为隐式参数。如果你使用真正的函数，这几乎总是你想要的，因为它避免了一个重要的this相关的陷阱（详见 25.单实例对象 的章节）。
• 但是，我喜欢语法上的函数声明（它产生一个普通的函数）。如果你不在其中使用this，它大部分相当于const加箭头功能：

  function funcDecl(x, y) {
    return x * y;
  }
  const arrowFunc = (x, y) => {
    return x * y;
  };
  

1. 为创建函数提供更简洁的方法。
2. 更容易使用实际函数：不能在普通函数中引用周围范围的this。

• const f = function (x, y, z) { return 123 };
  

• （粗略）等效箭头函数如下所示。箭头函数是表达式。

• const f = (x, y, z) => { return 123 };
  

• 这里，箭头函数的主体是一个块。但它也可以是一种表达方式。以下箭头功能与前一个功能完全相同。

• const f = (x, y, z) => 123;
  

• 如果箭头函数只有一个参数且该参数是标识符（不是解构模式），那么您可以省略参数周围的括号：

• const id = x => x;
  

• 将箭头函数作为参数传递给其他函数或方法时，这很方便：

• > [1,2,3].map(x => x+1)
  [ 2, 3, 4 ]
  

• 最后一个例子展示了箭头功能的第一个好处 - 简洁。相反，这是相同的方法调用，但带有函数表达式：

• [1,2,3].map(function (x) { return x+1 });
  

• 由于每个普通函数都可以是一个方法，因此它有自己的this。
• 自己的this使得无法从普通函数内部访问周围范围的this。这对于真正的功能来说是不方便的。

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']);

const prefixer = {
  prefix: '==> ',
  prefixStringArray(stringArray) {
    return stringArray.map(
      x => this.prefix + x);
  },
};

• 在普通函数中，this是隐式（动态）参数。
• 箭头函数从其周围的范围获得this（词法）。

const func1 = () => ({a: 1});
assert.deepEqual(func1(), { a: 1 });

const func2 = () => {a: 1};
assert.deepEqual(func2(), undefined);

assert.equal(foo(), 123); // OK
function foo() { return 123; }

assert.throws(
  () => bar(), // before declaration
  ReferenceError);
const bar = () => { return 123; };
assert.equal(bar(), 123); // after declaration

assert.throws(
  () => new MyClass(),
  ReferenceError);
class MyClass {}
assert.equal(new MyClass() instanceof MyClass, true);

const f = () => g();
const g = () => 123;
// We call f() after g() was declared:
assert.equal(f(), 123);

hoistedFunc();
const MY_STR = 'abc';
function hoistedFunc() {
  assert.throws(
    () => MY_STR,
    ReferenceError);
}

function func() {
  return 123;
}
assert.equal(func(), 123);

function boolToYesNo(bool) {
  if (bool) {
    return 'Yes';
  } else {
    return 'No';
  }
}
assert.equal(boolToYesNo(true), 'Yes');
assert.equal(boolToYesNo(false), 'No');

function noReturn() {
  // No explicit return
}
assert.equal(noReturn(), undefined);

• 参数 (parameters) 是函数定义的一部分。它们也被称为 形式参数 (formal parameters )和 形式参数 (formal arguments.)。
• 参数 (arguments) 是函数调用的一部分。它们也被称为 实际参数 actual parameters 和 实际参数 actual arguments.。

const myArray = ['a', 'b'];
const callback = (x) => console.log(x);
myArray.forEach(callback);
// Output:
// 'a'
// 'b'

• 额外的参数被忽略。
• 缺少的参数设置为undefined。

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]);

function f(x, y=0) {
  return [x, y];
}
assert.deepEqual(f(1), [1, 0]);
assert.deepEqual(f(), [undefined, 0]);

assert.deepEqual(
  f(undefined, undefined),
  [undefined, 0]);

function f(x, ...y) {
  return [x, y];
}
assert.deepEqual(
  f('a', 'b', 'c'),
  ['a', ['b', 'c']]);
assert.deepEqual(
  f(),
  [undefined, []]);

function bar(a, b) {
  // ···
}

function bar(...args) {
  if (args.length !== 2) {
    throw new Error('Please provide exactly 2 arguments!');
  }
  const [a, b] = args;
  // ···
}

1. 位置参数：如果参数具有相同的位置，则将参数分配给参数。仅具有位置参数的函数调用如下所示。

   selectEntries(3, 20, 2)
   

2. 命名参数：如果参数具有相同的名称，则将参数分配给参数。 JavaScript 没有命名参数，但您可以模拟它们。例如，这是一个只有（模拟）命名参数的函数调用：

   selectEntries({start: 3, end: 20, step: 2})
   

• 它们导致更加自我解释的代码，因为每个参数都有一个描述性标签。只需比较selectEntries()的两个版本：使用第二个版本，可以更容易地看到发生了什么。
• 参数顺序无关紧要（只要名称正确）。
• 处理多个可选参数更方便：调用者可以轻松提供所有可选参数的任何子集，而不必知道它们省略的那些（使用位置参数，您必须使用undefined填写前面的可选参数]）。

function selectEntries({start=0, end=-1, step=1}) {
  return {start, end, step};
}

{start: start=0, end: end=-1, step: step=1}

> selectEntries({})
{ start: 0, end: -1, step: 1 }

> selectEntries()
TypeError: Cannot destructure property `start` of 'undefined' or 'nu

function selectEntries({start=0, end=-1, step=1} = {}) {
  return {start, end, step};
}
assert.deepEqual(
  selectEntries(),
  { start: 0, end: -1, step: 1 });

function func(x, y) {
  console.log(x);
  console.log(y);
}
const someIterable = ['a', 'b'];
func(...someIterable);
// Output:
// 'a'
// 'b'

• 定义函数或方法时使用 Rest 参数。他们在数组中收集参数。
• 调用函数或方法时使用 Spread 参数。他们将可迭代对象转换为参数。

> Math.max(-1, 5, 11, 3)
11
> Math.max(...[-1, 5, 11, 3])
11
> Math.max(-1, ...[-5, 11], 3)
11

const arr1 = ['a', 'b'];
const arr2 = ['c', 'd'];
arr1.push(...arr2);
assert.deepEqual(arr1, ['a', 'b', 'c', 'd']);