全局作用域声明赋值的变量在嵌套返回函数中调用为何显示undefined？

核心原因 #

你定义的嵌套函数声明了参数name，这个参数会在该函数的作用域内生成一个局部变量，优先级高于全局作用域的同名变量，也就是遮蔽了全局的name。当你调用testReturn()()时，没有给返回的嵌套函数传递任何参数，所以这个局部name的值就是undefined，最终输出Hello, undefined。

修正方案 #

方案1：移除嵌套函数的name参数

这样函数会向上查找作用域，找到全局的name变量：

const name = "Ben"
function testReturn() {
  return function () {
    console.log(`Hello, ${name}`)
  }
}
testReturn()() // 输出：Hello, Ben

方案2：调用时传入参数

如果需要使用自定义值，调用时传递对应参数即可：

const name = "Ben"
function testReturn() {
  return function (name) {
    console.log(`Hello, ${name}`)
  }
}
testReturn()("Alice") // 输出：Hello, Alice

方案3：兼容两种场景（可选）

给嵌套函数参数换个名字，实现无参时用全局name，传参时用传入的值：

const name = "Ben"
function testReturn() {
  return function (userName) {
    console.log(`Hello, ${userName || name}`)
  }
}
testReturn()() // 输出：Hello, Ben
testReturn()("Alice") // 输出：Hello, Alice

内容的提问来源于stack exchange，提问作者Ben Merryman