JavaScript编写两数比较返回最大值的函数运行异常排查

• 函数定义与调用逻辑不匹配：将函数赋值给largest变量时，额外加的命名large属于命名函数表达式的内部名称，全局作用域无法访问这个名字；且调用largest()时没有传入任何参数，函数内部的形参a、b会是undefined，根本无法完成数值比较。
• 返回值拼接逻辑有误：原代码return语句里直接硬拼字符串"num1"、"num2"，没有加空格分隔，比如num1值为5时，返回内容会变成"num15 is greater"，输出格式混乱。
• 输出逻辑错误：document.write(large)输出的是函数本身的引用，而非函数执行后的返回结果；且large在全局作用域根本不存在，会直接触发引用报错。
• 作用域混淆：函数内部定义的var num1 = a、var num2 = b是函数私有变量，和外层脚本里接收用户输入的num1、num2不属于同一个作用域，就算漏了传参，外层的输入值也无法被函数读取使用。

<head>
  <script type="text/javascript">
    // 去掉冗余的内部函数命名，通过largest变量绑定函数逻辑
    var largest = function (a, b) {
      if (a > b) {
        return `${a} is greater`;
      } else if (b > a) {
        return `${b} is greater`;
      } else {
        return `两个数值相等，均为 ${a}`;
      }
    }
  </script>
</head>

<body>
  <script type="text/javascript">
    // 接收用户输入并转为整数，重命名变量避免和函数内部变量名混淆
    var inputNum1 = parseInt(prompt("Please enter a number"));
    var inputNum2 = parseInt(prompt("Please enter a number"));
    // 调用函数时传入实际数值参数，接收返回结果后再渲染到页面
    var compareResult = largest(inputNum1, inputNum2);
    document.write(compareResult);
  </script>
</body>

• 检查函数调用时是否按要求传入了对应数量的参数，空参调用是写JS函数最容易踩的坑。
• 确认要输出的内容是不是函数的返回值，而不是函数本身的引用。
• 全局作用域和函数作用域的变量是相互独立的，要让函数拿到外部的变量值，必须通过参数传递的方式，不能靠同名变量直接跨作用域读取。

内容的提问来源于stack exchange，提问作者canadensis