JavaScript包装函数的参数如何传递给return关键字后的函数？两种实现的差异解析

咱们直接拆解两段代码里return的核心差异，就能把问题说透：

第一个示例：return的是待执行的函数本身 #

先看正常运行的wrapper函数：

function wrapper(f){ 
  return function(args){ 
    if(typeof(f)==='function'){
      console.log("before executing wrapped")
      f(args)
      console.log("after executing wrapped")
    } else{
      return f
    }
  }
}

这里return后面跟着的是一个匿名函数——也就是说，当你调用wrapper(greeting)时，它返回的不是某个执行结果，而是一个“还没被调用的函数”。

所以let a = wrapper(greeting)执行后，a就是这个匿名函数。等你后续调用a("Maria")时，"Maria"会作为args传入这个匿名函数，接着再被传递给greeting，整个参数传递链条完全通顺，自然能输出预期内容。

第二个示例：return的是错误的函数调用结果 #

再看修改后报错的wrapper：

function wrapper(f){ 
  if(typeof(f)==='function'){
    function a (args){ 
      console.log("before executing wrapped")
      f(args)
      console.log("after executing wrapped")
    }
    return a(args) // 问题的核心就在这一行！
  } else{
    return f
  }
}

这里有两个致命问题：

1. args未定义：args是函数a的参数，只有当你调用a的时候才会被赋值。但你现在在wrapper函数里直接写a(args)，JS根本找不到args这个变量，直接抛出ReferenceError。
2. 返回的不是可调用的函数：就算你把参数改成a("test")，return的也只是函数a执行后的结果（这里a没有显式返回值，结果是undefined）。后续let a = wrapper(greeting)执行后，a是undefined，再调用a('Maria')会直接报a is not a function。

总结return在这里的作用机制 #

return的核心作用就是：把指定的值（可以是原始值、对象、函数等任何类型）作为当前函数的执行结果返回出去。

• 在第一个示例中，return的是一个函数，这个函数可以被后续调用，调用时传入的参数会被它接住，再传递给被包装的目标函数。
• 在第二个示例中，你错误地return了一个函数调用的结果，而且调用时用了未定义的变量，直接触发错误；就算没报错，返回的也不是可调用的函数，后续自然无法完成传参和执行。

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