高阶函数和作为参数传递函数答案

【问题标题】：Higher Order Functions and Passing Functions as Arguments高阶函数和作为参数传递函数
【发布时间】：2020-10-04 23:33:54
【问题描述】：

我是 JavaScript 新手，只是想弄清楚这行代码。

据我所知，operator 这个词只是一个随机词，可以是任何东西。但是它怎么知道用户正在引用单词 add/subtract/multiply/divide 而这些单词也可能是其他任何东西，并且可以说它是那个 .js 文件中的一堆其他函数。运算符如何返回正确的输入？

function add(num1, num2) {
    return num1 + num2;
}

function subtract(num1, num2) {
    return num1 - num2;
}

function multiply(num1, num2) {
    return num1 * num2;
}

function divide(num1, num2) {
    return num1 / num2;
}

function calculator(num1, num2, operator) {
    return operator(num1, num2);
}

【问题讨论】：

你的意思是如果你做calculator(1, 2, add)，operator(num1, num2)怎么“知道”operator是add？函数是一个对象。它不需要通过名称来引用。传递的函数可以是没有名字的匿名函数。
你需要更清楚。此代码不返回任何内容，因为没有调用任何函数...
目前，这段代码什么也不做。您需要使用正确的参数调用函数并使用它们的返回值来查看任何效果。

标签： javascript higher-order-functions

【解决方案1】：

您需要致电calculator 才能真正做任何事情。

看看这个 sn-p 是否有帮助：

function add(num1, num2) {
  return num1 + num2;
}
 
function subtract(num1, num2) {
  return num1 - num2;
}
 
function multiply(num1, num2) {
  return num1 * num2;
}
 
function divide(num1, num2) {
  return num1 / num2;
}
 
function calculator(num1, num2, operator) {
  return operator(num1, num2);
}

var a = calculator(3, 2, add);
var b = calculator(3, 3, multiply);
alert('a=' + a + ', b=' + b);

关键是要明白，在JavaScript中，函数（如add）是一等对象，可以像整数（2或3）、字符串等一样用作参数。你可以在这里阅读更多：What is meant by 'first class object'?。

【讨论】：

【解决方案2】：

和随便用变量名一样：

function foo(bar) {
    return bar + 1;
}

const something = foo(123); // 124

您在函数内部使用 bar 名称，即使外部上下文对该名称一无所知。

在 JavaScript 中，您可以将函数作为任何其他值传递，这使得例如在其他函数中使用函数成为可能：

function zoo() {
    return 3;
}

function foo(bar) {
    return bar() + 1;
}

const something = foo(zoo); // 4

在foo() 内部，我们调用something() 函数，即使foo() 对该函数一无所知。一切都与上下文和传递值有关。

【讨论】：

【解决方案3】：

operator 可以是任何函数，而不仅仅是其中列出的函数之一。它甚至可能有副作用。这完全取决于calculator 的调用方式。

例如：

// exactly the same `calculator` function
function calculator(num1, num2, operator) {
    return operator(num1, num2)
}

// new `write` function
function write(num, fontSize) {
    document.write(`<span style="font-size: ${fontSize}px">${num}</span>`)
}

// execution happens here
calculator(99, 200, write)

【讨论】：