JS中如何在函数内更新全局对象并在另一函数中访问其值？

嘿，你遇到的其实是个很容易忽略的小坑——你的按钮是type="submit"，点击它会触发浏览器的默认表单提交行为，导致页面刷新！

为什么全局对象的修改没生效？ #

虽然doguinho确实是全局上下文声明的对象，你在btn-enviar的点击事件里也正确修改了它的属性值，但页面刷新后，整个JavaScript执行环境会重新初始化，doguinho又会被重置为初始的空属性状态，所以你点击btn-mostrar时看到的还是空字符串。

两种修复方案 #

方案1：修改按钮类型为button #

把两个按钮的type="submit"改成type="button"，这样就不会触发默认的表单提交刷新行为了：

<!DOCTYPE html>
<html>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<input type="text" id="input-nome">
<br/>
<input type="text" id="input-idade">
<br/>
<input type="text" id="input-raca">
<br/>
<input type="text" id="input-coloracao">
<br/>
<button type="button" name="btn-enviar">save</button>
<button type="button" name="btn-mostrar">alert</button>
<script>
var doguinho = { nome : "", idade : "", raca : "", coloracao : "" };
$(document).ready(() => {
  $('button[name="btn-enviar"]').click(() => {
    doguinho.nome = $('input[id="input-nome"]').val();
    doguinho.idade = $('input[id="input-idade"]').val();
    doguinho.raca = $('input[id="input-raca"]').val();
    doguinho.coloracao = $('input[id="input-coloracao"]').val();
  })
  $('button[name="btn-mostrar"]').click(() => {
    alert(doguinho.nome);
  })
} );
</script>
</body>
</html>

方案2：阻止按钮的默认提交行为 #

如果你需要保留submit类型（比如页面真的有表单需要提交逻辑），可以在点击事件里调用event.preventDefault()来阻止页面刷新：

$(document).ready(() => {
  $('button[name="btn-enviar"]').click((event) => {
    // 阻止默认提交行为
    event.preventDefault();
    doguinho.nome = $('input[id="input-nome"]').val();
    doguinho.idade = $('input[id="input-idade"]').val();
    doguinho.raca = $('input[id="input-raca"]').val();
    doguinho.coloracao = $('input[id="input-coloracao"]').val();
  })
  $('button[name="btn-mostrar"]').click(() => {
    alert(doguinho.nome);
  })
} );

补充说明 #

全局对象确实可以在任意函数中访问和修改，你的代码逻辑本身是对的，只是被浏览器的默认表单提交行为打断了。只要阻止了页面刷新，你修改的全局对象值就会被保留，点击btn-mostrar就能看到正确的内容啦。

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