当使用从父级传递的参数在函数内部调用时，为什么 setTimeout 函数日志未定义？

Question

我一直在使用 javascript 中的异步函数 setTimeout。当参数在一个 setTimeout 函数中传递而不是在另一个函数中传递时，以下代码给出不同的结果。有人可以解释一下吗？

代码 1：

console.log("Before");
getUserId(2);
console.log("After");

function getUserId(id){
  setTimeout(() =>{
    console.log(id);
  }, 2000);
}

输出 1：

Before
After
2

并且

代码 2：

console.log("Before");
getUserId(2);
console.log("After");

function getUserId(id){
  setTimeout((id) =>{
    console.log(id);
  }, 2000);
}

输出 2：

Before
After
undefined

Answer 1

因为示例1中id设置在getUserId(id)的范围内在示例 2 中，id 在该范围内再次设置，但随后通过您的匿名函数创建了第二个范围更窄的 id。不需要传递 setTimeout() id 参数，因为它已经存在于 getUserId 范围

Answer 2

如果您想将参数传递给您的 callback，您可以将它们放在 delay 参数之后。如果您不传递任何参数，那么您的回调将在没有任何参数的情况下被调用

setTimeout(function[, delay, param1, param2, ...]);

console.log("Before");
getUserId(2);
console.log("After");

function getUserId(id){
  setTimeout((id) =>{
    console.log(id);
  }, 100, id);
}

Answer 3

在第二个示例中，您在传递给 setTimeout() 的回调中重新定义变量 id 的范围。换句话说，这与：

function getUserId(id){
  setTimeout((some_other_id) => {
    console.log(some_other_id);
    // some_other_id is undefined
  }, 2000);
}

了解 id 的范围将解释/解决您的问题。

Answer 4

setTimeout 回调中的参数 id 将是未定义的，除非您像示例

function parentMethod(parentId) {
  setTimeout((id = parentId) => {
    console.log(id);
  }, 2000);
}

检查这一行 setTimeout((id = parentId) => {

这里我给它分配了一个默认值，所以它会记录我分配给父方法的任何内容。

When called inside a function with parameters passed from parent, why is the setTimeout function logging undefined?