剖析簡單的Javascript閉包

Question

查看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函數中在哪里？

Answer 1

該值未存儲在代碼中。 它不會在閉包中使用x每個位置都內聯-代碼仍然包含變量x ，遇到該變量時會動態解析該變量（它仍然可寫）。

該值存儲在包含變量的作用域對象中，並且由函數對象引用（這就是我們所說的Closure ）。 記錄功能對象時，您還可以在devtools中檢查此隱藏的[[Scope]]插槽（而不僅僅是.toString()產生的功能代碼）：

Answer 2

console.log記錄函數本身的字符串表示形式。 它不會查詢函數的狀態並顯示正在引用的當前值。 它只是顯示您用於創建函數的語法。

但是，如果設置斷點並逐步執行，則可以使用調試工具查看作用域中變量的狀態。