JS的作用域保护

梦里梦外; 2023-06-27 03:28 5阅读 0赞

网页中，如果引用了许多JS，尤其是动态加载，那么其中的变量、函数名称就很容易冲突。虽然每个名称加上前缀可以解决这个问题，但未免太烦琐了。应该尽量用函数将它们包裹起来。面向对象三大特性之一是封装，对私有变量和方法进行保护，javascript没有类，只有函数。幸运的是，JS的函数是万能的，可以用来封装。

## 一、构造实例 ##

例子：

这个例子里面，封装了私有变量\_i和私有方法：add()，对外只暴露了hi()和go()。对于重名问题，我们只需控制 f 这个变量就行了，冲突机会大大下降。

## 二、静态类库 ##

所谓静态类库，实质上就是一个JSON，元素是函数。  
例子：

也能达到相同的效果。但是，这种方式的封装性比不上第一种，体现在其变量，一定要用"var"进行声明，并且要放在函数头部，否则无法使用；私有函数则没有限制。

## 三、执行块 ##

如果无须考虑复用，只避免重名，那么可以将语句用函数包裹并即时执行，这种方式同样也有良好的封装性：

(function(){ 
      let _i = 0;
      _i = add(_i);
      alert(_i);
      
      function add(i){ 
        return ++i;
      }
    })();