剖析一个简单的 Javascript 闭包答案

【问题标题】：Dissecting a simple Javascript Closure剖析一个简单的 Javascript 闭包
【发布时间】：2017-12-09 14:29:09
【问题描述】：

查看 addSuffix 函数的代码时

const addSuffix = (x) => {
    const concat = (y) => {
        return y + x
    }
return concat;
}

let add_ful = addSuffix("ful");

如果我要 console.log(add_ful);为什么我会得到

(y) => {
    return y + x
}

而不是

(y) => {
    return y + "ful"
}

这对我来说是关于闭包最令人困惑的一点，我知道我可以返回一个函数，但我不确定对“ful”的引用存储在函数中的什么位置。

x 的值在 add_ful 函数中存储在哪里？

【问题讨论】：

"x 的值存储在 add_ful 函数中的什么位置？" — 在变量 x 中。您似乎过于担心 JavaScript 的编译器/解释器是如何工作的，而不是关注 JS 的含义。
变量x 不会在addSuffix 退出时停止存在。就是这样。
您要做的事情是使用调试器完成，而不是控制台。
您也可以用更简洁的方式编写它，例如 const addSuffix = x => y => y + x，当调用 addSuffix 时，通过关闭 x 返回您的 y => y + x 函数。

【解决方案1】：

该值未存储在代码中。它不会在闭包中使用 x 的每个地方都内联 - 代码仍然包含一个变量 x，遇到时会动态解析（它仍然是可写的）。

值存储在包含变量的作用域对象中，它被函数对象引用（这就是我们所说的closure）。当您记录函数对象（而不仅仅是.toString() 生成的函数代码）时，您还可以在开发工具中检查这个隐藏的[[Scope]] 插槽：

【讨论】：

【解决方案2】：

console.log 记录函数本身的字符串表示。它不查询函数的状态并显示正在引用的当前值。它只是显示了您用于创建函数的语法。

但是，如果您设置断点并遍历执行，则可以使用调试工具查看范围内变量的状态。

【讨论】：