javascript - Head First JavaScript 中关于 Javascript 练习的问题

Question

这是我的第一篇 stackoverflow 帖子!如果我搞砸了如何发帖的协议(protocol)，我很抱歉。如果有请告诉我:-)

我正在 Head First Javascript 中完成这个练习，但我不知道为什么替代方案不起作用。

我们遍历乘客以查找机票类型。根据机票的不同，我们将提供不同的提醒:头等舱或其他舱。

在本练习中，在函数 createDrinkOrders 中，我们调用一个函数 (orderFunction) 以提供警报。

如果我不在 createDrinkOrders 中使用 orderFunctions，为什么这不起作用？

我删除了createDrinkOrders中的orderFunctions，但它提醒了两三次。如果我在 createDrinkOrders 中包含 orderFunctions，它会提醒 12 次。为什么我们需要 orderFunctions 函数？

我想在迭代之后，无论有没有 orderFunction，警报都会产生相同的结果，但这不是为什么？

let passengers = [{
    name: "Jane Doloop",
    paid: true,
    ticket: "coach"
  },
  {
    name: "Dr. Evael",
    paid: true,
    ticket: "firstclass"
  },
  {
    name: "Sue Propert",
    paid: false,
    ticket: "firstclass"
  },
  {
    name: "John Funcall",
    paid: true,
    ticket: "coach"
  }
];

function createDrinkOrders(passenger) {
  let orderFunction;
  if (passenger.ticket === "firstclass") {
    orderFunction = function() {
      alert("Would you like a cocktail or wine?")
    }
  } else {
    orderFunction = function() {
      alert("Your choice is cola or nothing!")
    };
  }
  return orderFunction;
};



function serveCustomer(passenger) {
  let getDrinkOrderFunction = createDrinkOrders(passenger);
  getDrinkOrderfunction();
  getDrinkOrderFunction();
  getDrinkOrderFunction();
  getDrinkOrderFunction();



};

function servePassengers(passengers) {
  for (let i = 0; passengers.length; i++) {
    serveCustomer(passengers[i]);
  }
};

servePassengers(passengers);

现在没有 orderFunction 的代码...请参阅 createDrinkOrders(passengers)。

let passengers =[{name: "Jane Doloop", paid: true, ticket: "coach"},
                 {name: "Dr. Evael", paid: true, ticket: "firstclass"},
                 {name: "Sue Propert", paid: false, ticket: "firstclass"},
                 {name: "John Funcall", paid: true, ticket:"coach"}];

    function createDrinkOrders(passenger){

        if(passenger.ticket === "firstclass"){

            alert("Would you like a cocktail or wine?")

        }else{

            alert("Your choice is cola or nothing!")

        }

    };



    function serveCustomer (passenger){


       getDrinkOrderfunction();
       getDrinkOrderfunction();

       getDrinkOrderfunction();

       getDrinkOrderfunction();



    };

    function servePassengers (passengers){
        for(let i = 0; passengers.length; i++){
            serveCustomer(passengers[i]);
        }
    };

    servePassengers(passengers);

Answer 1

在第二个示例中，您正在调用 createDrinkOrders

let getDrinkOrderfunction = createDrinkOrders(passenger);

然后尝试通过将其分配给 getDrinkOrderfunction 来使用它的返回值。 看一下 createDrinkOrders 的实现，您会发现它实际上没有返回任何内容。因此，getDrinkOrderfunction 的值是undefined。

接下来的第一次调用 getDrinkOrderfunction() 将失败并抛出错误。

createDrinkOrders 的原始代码实际上并不执行 alert - 而是向调用者返回一个正确的函数(哪个函数取决于参数)。 如果变量getDrinkOrderfunction包含一个函数，则可以通过编写getDrinkOrderfunction()来执行任意多次。这将启动实际的警报通知。

让我通过简化代码来更详细地解释最后一段: 让我们看一下 createDrinkOrders 的以下替代实现:

function createDrinkOrders() {
    let myFunction = function() {
        alert("Hello World");
    };
    return myFunction;
};

调用createDrinkOrders();实际上做了什么？

1. 在第一行的右侧创建一个函数；它的声明被分成多行
2. 该函数被分配给第一行左侧的变量 myFunction
3. myFunction 的值返回给调用者；该值是实际的函数!

请注意，在执行 createDrinkOrders() 期间创建的内部函数没有执行。

怎么看？ 如果在生成函数的表达式后面附加 ()，函数就会被执行。 当创建/声明某个值时，我们总是立即使用它或将其存储在变量中。 正如您可以通过编写 a+b 在变量中使用数字，您也可以通过编写 myFunction() 来调用变量 myFunction 中的函数。

希望我们现在明白 createDrinkOrders() 会产生一个值，该值最终是一个函数。

如果我们写

let foobar = createDrinkOrders();

我们现在在变量 foobar 中拥有该值，并且可以调用它了。

foobar(); // call the function stored in foobar
foobar(); // calls it again