JS的作用域保护

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

一、构造实例

例子：

var f = new function(){
  let _i = 0;
  //这里的this，应该是指向f
  this.hi = function(){
    alert(_i);
  };
  this.go = function(){
    _i = add(_i);
  };
  
  function add(i){
  	return ++i;
  }
};

f.hi();//0
f.go();
f.hi();//1
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

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

二、静态类库

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

var f2 = (function(){
  var _i = 0;
  
  return {//返回一个JSON
    hi:hi,
    go:go
  };
  

  function hi(){
    alert(_i);
  }
  function go(){
    _i = add(_i);
  }
  function add(i){
    return ++i;
  }
})();
  
f2.hi();
f2.go();
f2.hi();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

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

三、执行块

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

(function(){
  let _i = 0;
  _i = add(_i);
  alert(_i);
  
  function add(i){
    return ++i;
  }
})();
1
2
3
4
5
6
7
8
9