如何利用JS中的IIFE创建私有变量保护数据？附DOM交互示例

嘿，咱们来拆解下你的这段代码里，IIFE是怎么给name变量加上“保护锁”的～

首先得明确IIFE（立即执行函数表达式）的核心作用：它会立刻创建一个独立的私有作用域，这个作用域里的变量、函数，默认情况下外部完全碰不到——这就是数据保护的基础。

结合你的代码，具体的保护逻辑可以分成这几步看：

1. 把name藏进私有作用域 #

你在IIFE内部用let name = 'john'定义了这个变量，它属于IIFE的局部作用域，外部代码（比如全局的printName函数，或者直接在控制台输入）根本没法直接访问或修改它。比如你在控制台敲console.log(name)或者personDetails.name = 'jane'，完全影响不到内部的name——因为它们根本不是同一个东西。

2. 用闭包保留合法访问权 #

你在IIFE里定义了displayMsg函数，它能直接读取name变量。当IIFE执行完毕返回{ displayName: displayMsg }时，这个函数因为闭包特性，会一直保留对IIFE作用域的引用，哪怕IIFE已经执行完，它还是能拿到name的值。

3. 只暴露安全的操作接口 #

你返回的对象里只有displayName这一个方法，相当于给外部开了一个“合法入口”——外部只能通过调用这个方法来间接获取name的值，却没有办法直接修改name。这就实现了对name的保护：只允许你规定的操作（这里是打印），禁止直接篡改。

举个直观的测试例子，你可以在控制台试试：

personDetails.name = 'jane';
personDetails.displayName(); // 还是会打印 'john'

因为你修改的是personDetails对象上的name属性，和IIFE内部的私有name变量完全没关系～

简单来说，IIFE就像一个带锁的保险箱，name是里面的贵重物品，你只给外面留了一个“查看”的按钮（displayName方法），别人没法直接打开保险箱乱碰里面的东西。

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