了解 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 函数内的值。当您 return 新对象时，它会创建 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 中输入的任何内容。

了解 Javascript 中的 IIFE 作用域

Understanding the IIFE Scoping in Javascript

javascript

iife