在 JavaScript 中重新分配全局变量 - 有人可以向我解释为什么 currentAcc 保持未定义

Question

所以基本上我在没有 .addEventlistener() 的简单测试场景中尝试了同样的事情并且它有效但我没有让它工作，currentAcc 在全局中保持未定义范围并且不采用函数的分配值。非常感谢您的帮助。

let currentAcc;

function logIn() {
  function logInCurrAcc(event) {
    event.preventDefault();

    currentAcc = accounts.find((acc) => acc.username === usernameInput.value);
    console.log(currentAcc);

    if (currentAcc.password === passwordInput.value) {
      window.location.assign("app.html");
    } else {
      alert.classList.remove("hidden");
      setTimeout(function () {
        alert.classList.add("hidden");
      }, 3000);
    }
  }

  submitFormBtn.addEventListener("click", logInCurrAcc);
}

console.log(currentAcc);

// Initializes everything
function init() {
  if (document.body.contains(tabsContainer)) {
    tabsComponent();
    sliderComponent();
    modal();
    logIn();
  } else {
    console.log("Not loading init");
  }
}

init();```

Answer 1

JavaScript 解释器在执行之前不会进入函数体。

这是解释器如何执行代码的简化示例：

let currentAcc; // empty variable declaration

function logIn() {} // function declaration, doesn't enter, only saves a pointer to it into the memory

console.log(currentAcc) // undefined, because `currentAcc` is still empty

function init() {} // function declaration

init() // function execution, now interpreter goes into the body of `init` func and so on

因此根据您 post 编辑的代码，currentAcc 变量保持 undefined 直到用户点击。

如果您需要在页面之间传递数据，请考虑使用 window.localStorage 或 window.sessionStorage.

如果您需要更多帮助，请 post Minimal, Reproducible Example 以便我可以帮助您编写一些实际代码。

在 JavaScript 中重新分配全局变量 - 有人可以向我解释为什么 currentAcc 保持未定义

Reassigning global variable in JavaScript - Can somebody explain to me why currentAcc stays undefined

javascript

dom

function

event-handling

variable-assignment