当您可以在函数中定义时，定义 var 是否重要？

Question

我对在 Javascript 中定义 var 有疑问。
Here is a JS Bin

var newText=document.getElementById("myinput").value;

document.getElementById("changebutton").onclick=function(){
  newText=document.getElementById("myinput").value;
  document.getElementById("firstdiv").innerHTML=newText;
};

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <input id="myinput" type="text" value="test" />
  <button id="changebutton">Change!</button>
  <div id="firstdiv">This is some text</div>
</body>
</html>

在这段代码中，我想在我可以输入内容的框旁边显示内容。上面的代码运行良好，即使在 JS 部分的第一行中没有 var newText=document.getElementById("myinput").value;。

那么有必要定义变量吗？在其他一些情况下会怎样？

Answer 1

通常你 "dirty" 你的全球范围越小越好。在这种情况下，您将在匿名函数内专门调用该变量，因此答案是：在您的函数内定义它。你可能会奇怪地不定义变量，大多数 javascript 引擎会为你做，但这不是一个明确的方法。

黄金法则：只有在外部作用域或多个 "inner" 作用域中需要时才在外部作用域中定义变量。

在这种情况下，您不必要地弄脏了外部范围。

编辑：在你的情况下：

document.getElementById("changebutton").addEventListener('click',function(){
    var newText=document.getElementById("myinput").value;
    document.getElementById("firstdiv").innerHTML=newText;
});

另请注意，我已将 .onclick 替换为 addEventListener('click', function () {... -> 这样您就可以为单个事件绑定多个侦听器。

Answer 2

您还可以这样做：

document.getElementById("changebutton").onclick=function(){
  var newText=document.getElementById("myinput").value;
  document.getElementById("firstdiv").innerHTML=newText;
};

当您可以在函数中定义时，定义 var 是否重要？

Is it important to define a var when you can define in a function?

javascript

var