javascript - 将变量移出函数或移出函数。我缺少什么？

Question

我不确定如何查找这个问题的答案，所以这就是我想要弄清楚的:我对 javascript 还很陌生，所以请原谅任何不成熟的逻辑和编码。我正在学习回调，但我想通过以下方式进一步了解我的示例javascript 生成一个动态句子，该句子会根据调用的函数而变化。例如:

“这两个数字:115 加上 35 = 150。”，或
“这两个数字:115减35 = 80。”，或
“这两个数字:115乘35 = 4025。”，或
“这两个数字:115除以35 = 3.2857。”

在网页中，我有一个 ID 为“callback-answer”的 html 元素:

    <p id="callback-answer">The answer should appear here. If not, the script is broken.</p>

我找不到通过函数名称设置变量的直接方法，因此我编写了另一个函数来执行此操作并返回值“操作数”。

如果您运行此命令，您可以看到主函数中的 console.log 返回我想要的值，但即使我在全局范围级别声明了变量名称，我似乎也无法从任何函数中获取它。最终的innerHTML语句只显示“undefined”，而不是我设置的操作数。该函数已经返回值，所以我认为我不能将该值放在同一行中。如何在函数之外访问该变量？我还需要“操作”功能吗？一些非常好的人可以提出更好的方法或任何想法吗？

轻点，我正在练习。

    var answer = document.querySelector("#callback-answer");    var number1 = 115, number2 = 35;    var operand;    var operation = function (op) {        if (op === add) {operand = "plus";}        else if (op === subtract) {operand = "minus";}        else if (op === multiply) {operand = "times";}        else {operand = "divided by";}        return operand;    };    var add = function (a,b) {return a + b;};    var subtract = function (a,b) {return a - b;};    var multiply = function (a,b) {return a * b;};    var divide = function (a,b) {return a / b;};    var calc = function (num1, num2, callback) {        "use strict";        operation(callback);        console.log("The operand is: " + operand);        if (typeof callback === "function") {            return callback(num1,num2);        }    };    answer.innerHTML = "These two numbers: " + number1 + " " + operand + " " + number2 + " = " + calc(number1, number2, multiply);

Answer 1

在您的代码中，operand 开始时未初始化。您确实在 calc 函数中设置了 operand 的值，但这就是您的问题:在代码的最后一行中，calc 被称为 < em>在使用操作数之后。这意味着在调用 calc 函数之前，operand 没有值，这就是为什么您可以 console.log 并在 calc 中获取其值>，但不在最后一行代码中。

一个快速而简单的修复方法是在使用操作数之前调用 calc 并将结果放入变量中，如下所示:

var calcResult = calc(number1, number2, multiply);
answer.innerHTML = "These two numbers: " + number1 + " " + operand + " " + number2 + " = " + calcResult;

我被教导要尽可能避免全局变量。如果可以的话，通常最好让实用函数仅接受值并返回结果，而不是将结果设置为全局变量然后使用全局变量。在这种情况下，这可能意味着需要更多的代码，但更不容易出现程序员错误。

以下是对 Javascript 代码的编辑，不使用全局 操作数 变量:

var answer = document.querySelector("#callback-answer");
var number1 = 115, number2 = 35;

var operation = function (op) {
  var operand;
  if (op === add) {operand = "plus";}
  else if (op === subtract) {operand = "minus";}
  else if (op === multiply) {operand = "times";}
  else {operand = "divided by";}
  return operand;
};

var add = function (a,b) {return a + b;};
var subtract = function (a,b) {return a - b;};
var multiply = function (a,b) {return a * b;};
var divide = function (a,b) {return a / b;};

var calc = function (num1, num2, callback) {
  "use strict";
  if (typeof callback === "function") {
    return callback(num1,num2);
  }
};

var operand = multiply;
var operandString = operation(operand);
var calcResult = calc(number1, number2, operand);
answer.innerHTML = "These two numbers: " + number1 + " " + operandString + " " + number2 + " = " + calcResult;