了解 Javascript 中的 IIFE 范围

Question

我遇到了类似的事情。有人可以帮我理解为什么会发生这种行为。这与 IIFE 的范围界定有关吗？

const iife = (() => {
    
    let myValue = "Previous";
    const getValue = () => myValue;
    const setValue = (val) => {myValue = val}

return {
    myValue:myValue,
    getValue:getValue,
    setValue:setValue
}

})()

//console outputs
iife //{myValue:"Previous", getValue:f, setValue:f}
iife.setValue("New");
iife.getValue() //"New"
iife // {myValue:"Previous", getValue:f,setValue:f}

即使myValue 变量没有更改，如何获得iife.getValue() = "New" 值？

Answer 1

setValue 更改 iife 函数内的值。当您返回新对象时，它会创建myValue 变量的副本，即iife.myValue !== myValue。修改代码如下即可看到：

const iife = (() => {
    
    let myValue = "Previous";
    const getValue = () => myValue;
    const setValue = (val) => {myValue = val}

    setInterval(() => console.log(myValue), 100)

return {
    myValue:myValue,
    getValue:getValue,
    setValue:setValue
}

})()

//console outputs
iife //{myValue:"Previous", getValue:f, setValue:f}
iife.setValue("New");
iife.getValue() //"New"
iife // {myValue:"Previous", getValue:f,setValue:f}

它将打印您在iife.setValue 中输入的任何内容。