基本的 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

参数“名称”没有从登录函数传递给 setTimeout ！！

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

将箭头函数中的name替换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`
}

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