如何访问在 function 中声明的变量

Question

我正在尝试捕获用户的输入并从 function 调用它。 我的fetchedDate在getInput()中声明。 如何使其他函数可以全局访问fetchedDate的值？

function getInput() {

    var fetchedDate = document.getElementById('dob').value;
    var fetchedDate = fetchedDate.split('/').reverse('').join('-');
    var fetchedDate = fetchedDate.replace(/\s+/g, '');
    getValues();
}

我在我的getValues()中使用了fetchedDate的值，那是返回 NaN

Answer 1

您可以在 function 之外声明变量：

var fetchedDate;

function getInput() {
    fetchedDate = document.getElementById('dob').value;
    fetchedDate = fetchedDate.split('/').reverse('').join('-');
    fetchedDate = fetchedDate.replace(/\s+/g, '');
    getValues();
}

尽管使用全局变量通常不是最佳实践。

Answer 2

不错的选择：

将getInput()变成一个助手 function。 毕竟，它除了操纵 DOM 元素的值之外什么也不做，它可以随时访问 - 它不需要直接挂接到按钮的onClick事件上。

// returns the processed input
function getInput() {
    var fetchedDate = document.getElementById('dob').value;
    fetchedDate = fetchedDate.split('/').reverse('').join('-');
    return fetchedDate.replace(/\s+/g, '');
}

// called from button onClick
function getValues() {
    var date = getInput();
    // other code that would use `fetchedDate`
}

体面的选择：

使getValues()接受一个参数，以便您可以简单地将fetchedDate传递给它。

function getInput() {
    var fetchedDate = document.getElementById('dob').value;
    fetchedDate = fetchedDate.split('/').reverse('').join('-');
    fetchedDate = fetchedDate.replace(/\s+/g, '');
    getValues(fetchedDate);
}

function getValues(fetchedDate) {
    // do stuff with fetchedDate
}

好的选项：

在更高的 scope 中声明变量，以便您可以从其他函数自由访问它。

var fetchedDate;

function getInput() {
    fetchedDate = document.getElementById('dob').value;
    fetchedDate = fetchedDate.split('/').reverse('').join('-');
    fetchedDate = fetchedDate.replace(/\s+/g, '');
    getValues();
}

糟糕的选择：

通过将变量附加到 Window object 使变量真正“全局”。 如果您不使用var指定声明，这是默认行为。

function getInput() {
    fetchedDate = document.getElementById('dob').value;
    fetchedDate = fetchedDate.split('/').reverse('').join('-');
    fetchedDate = fetchedDate.replace(/\s+/g, '');
    getValues();
}

Answer 3

正如您所指出的，该变量在 function 的本地 scope 中定义，外部 scope 无法访问该变量。 一种选择是从 function return以在调用getInput()的地方使用它。

function getInput() {

    var fetchedDate = document.getElementById('dob').value;
    fetchedDate = fetchedDate.split('/').reverse('').join('-');
    return fetchedDate.replace(/\s+/g, '');
}

var dob = getInput();
console.log(dob);
getValues();