Javascript变量未在内部函数中定义

Question

我正在制作一个基于JavaScript的生活游戏，并且我正在尝试为此建立一个平衡系统。当我单击调用我的函数balance（）的按钮时，控制台将找不到我定义的变量，则会发生错误。请帮忙，这是我的代码：

var balance;

function balance() {
  let newbalance = balance + 100;
  let balance = newbalance;
  document.getElementById("balance").innerHTML = (balance);
}

<link href="https://fonts.googleapis.com/css?family=Mukta+Malar" rel="stylesheet">
<center>
  <h1 class="title">Life Game</h1>
</center>
<table>
  <tr>
    <td class="mainTd">
      <h1 id="balance">0</h1>
    </td>
    <td class="mainTd">
      <h1 id="state">Begger</h1>
    </td>
  </tr>
</table>
<button onclick="balance()">Click Me</button>

Answer 1

您已将函数balance命名为将变量隐藏在外部。

在更改函数名称后，将一些默认值设置为balance， var balance = 0;

Answer 2

有三个问题。

未初始化余额变量

如果没有其他问题，该代码将仍然无法使用。您无需设置变量即可创建变量balance，因此它将为undefined。因此，将其加上100将得到NaN

> var balance
undefined
> balance + 100
NaN

重新分配余额变量

首先，您定义一个全局未初始化变量balance，用于存储余额值。然后定义函数balance，该函数将分配给同一变量。因此，变量balance从现在开始将指向一个函数。

> var balance;
undefined
> balance
undefined
> function balance() {}
undefined
> balance
[Function: balance]

隐藏余额变量

在函数内部，您定义了一个块范围为{let）的变量balance。这将是一个仅存在于函数内部的全新变量，因此您对其执行的任何操作均不会影响函数外部的balance变量。这就是所谓的阴影，棉短绒应该对此发出警告。

> var balance = 11;
undefined
> function calc() {
... let balance = 22;
... return balance;
... }
undefined
> balance
11
> calc()
22
> balance 
11 <- original balance is still the same

固定代码

var balance = 0; // set initial value

function calculateBalance() { // use unique name for function
  let newbalance = balance + 100;
  balance = newbalance; // use the global variable instead of defining a new one 
  document.getElementById("balance").innerHTML = (balance);
}

<link href="https://fonts.googleapis.com/css?family=Mukta+Malar" rel="stylesheet">
<center>
  <h1 class="title">Life Game</h1>
</center>
<table>
  <tr>
    <td class="mainTd">
      <h1 id="balance">0</h1>
    </td>
    <td class="mainTd">
      <h1 id="state">Begger</h1>
    </td>
  </tr>
</table>
<button onclick="calculateBalance()">Click Me</button>