javascript - 基本JavaScript，为什么这个函数不传递参数

Question

我正在尝试学习来自 C# 的 JavaScript。我写了这段简单的代码，但由于某种原因，参数没有传递给 setTimeout 函数。

function displayName(name) {
    console.log(`Name is ${ name }`);
}

function login(name) {
    // The argument 'name' is not being passed from the login function to the setTimeout !!
    setTimeout(name =>{
        displayName(name)
    }, 2000);
}

login("Satoshi")

我希望输出是:Name is Satoshi
相反，我得到:Name is undefined

我哪里错了？显然，我对 JavaScript 参数和范围有一些不了解的地方。

Answer 1

The argument 'name' is not being passed from the login function to the setTimeout !!

那是因为您隐藏 login name 参数和箭头函数的参数。函数参数列表中的参数名称类似于函数体内的变量声明，因此您的原始代码有一个外部 name(在 login 中)和一个单独的内部(在箭头函数中)。最里面的那个是当您使用参数(或变量)的名称时使用的那个。

将箭头函数中的 name 替换为 () ，这样它就不会声明自己的 name 参数；然后它将关闭 login 中的 name 参数:

function login(name) {
    setTimeout(() =>{
// −−−−−−−−−−−−^^
        displayName(name);
    }, 2000);
}

默认情况下，浏览器上的 setTimeout 不会使用任何参数调用您提供的函数，因此原始代码中箭头函数中的 name 参数将始终具有值 undefined。

在某些情况下，您可能希望 setTimeout 在调用它时将一个或多个参数传递给计时器回调，您可以通过在超时间隔之后传递这些参数来实现，如下所示:

function login(name) {
    setTimeout(innerName =>{
//             ^^^^^^^^^−−−−−−−− the arrow function's parameter
        displayName(innerName);
//                  ^^^^^^^^^−−− using the arrow function's parameter's value
    }, 2000, name);
//           ^^^^−−−−−−−−−−−−−−− `login`'s `name`
}

但在您的示例中不需要这样做。