javascript - 变量不能位于函数内部

Question

嘿，有人可以向我解释一下为什么如果变量“white”位于函数内部，这段代码将不起作用吗？

var button = document.querySelector("button");
var body = document.querySelector("body");
var white = true;

button.addEventListener("click", function() {
  if (white) {
    body.style.backgroundColor="pink"; 
  } else {
    body.style.backgroundColor="white";  
  }   
  white = !white;
});

Answer 1

在这种情况下:

var button = document.querySelector("button");
var body = document.querySelector("body");
var white = true;

button.addEventListener("click", function() {
  if (white) {
    body.style.backgroundColor="pink"; 
  } else {
    body.style.backgroundColor="white";  
  }   
  white = !white;
});

<button>Click</button>

您更改全局变量white，函数执行后它将变为true或false，因此该函数将触发颜色为另一种颜色(如果它是白色的，点击后它会变成粉红色，反之亦然)。

但在这种情况下:

var button = document.querySelector("button");
var body = document.querySelector("body");

button.addEventListener("click", function() {
  var white = true;
  if (white) {
    body.style.backgroundColor="pink"; 
  } else {
    body.style.backgroundColor="white";  
  }   
  white = !white;
});

<button>Click</button>

函数执行完成后，所有局部函数变量都会被删除。您的 white 变量在函数启动时始终为 true，因此第一个 if 语句每次都有效(仅将背景更改为粉红色)。