js如何减少变量污染？

关于变量

• 在js中使用var语句声明变量。
  • 在非严格模式下，js允许不声明变量就直接为其赋值，这是应为js解释器能够自动隐式声明变量。隐式声明的变量中是作为全局变量使用。
  • 在严格模式下，变量必须先声明，然后才能使用。

变量提升

• js在预编译期会先预处理声明的变量，但是变量的赋值操作发生在js执行期，而不是预编译期。

• 实例：

document.write(a);//显示undifined
a = 1;
document.write(a);//显示1
var a;

在上面示例中，声明变量放在最后，赋值操作放在前面。由于js在预编译期已经对变量声明语句进行了预解析，所以在第一行代码读取变量值的时候不会抛出异常，而是返回undifined，第三行代码是在执行赋值操作之后读取，股显示为数字1。

• 提示：js引擎的解析方式是：先解析代码，获取所有被声明的变量，然后再一行一行地运行。这样，所有的变量都会被提升到代码的头部，这就叫做变量提升(Hoisting)。

变量作用域

• 变量作用域(scope)是指变量在程序中可以访问的有效范围，也成为变量的可见性。js变量可以分为全局变量和局部变量：
  • 全局变量：变量在整个网页脚本中可见，可以被自由访问。
  • 局部变量：变量仅能在声明函数内部可见，函数外是不允许访问的。
• 实例：

var a = 1;
function f() {
	document.write(a);//显示undifined
	var a = 2;
	document.write(a);//显示2
}
f();	

由于在函数内部声明了一个同名局部变量a，所以在预编译期，js使用该变量覆盖掉全局变量在函数内部的影响。而在执行初期，局部变量a未赋值，所以在函数内第1行代码读取局部变量a的值也就是undefined了。当执行到函数第2行代码，为局部变量赋值2，所以在第3行中就显示为2。

变量污染

• 定义全局变量有三种方法：

  • 在任何函数体外直接使用var语句。

  var f = 'value';
  

  • 直接添加属性到全局对象上。在web浏览器中，全局作用域对象为window。

  window.f = 'value'
  

  • 直接使用未经声明的变量，以这种方式定义的全局变量被称为隐式全局变量。

  f = 'value';
  

• 注意：全局变量在全局作用域内都可见，因此具有污染性。大量使用全局变量会降低程序的可靠性，用户应该避免使用全局变量。

• 减少使用全局变量的方法有两种：

• 实例一：

在脚本中创建一个全局变量，作为当前应用的唯一接口，然后通过对象直接量的形式包含所有应用程序变量。

var MyAPP = {};
MyAPP.name = {
	"id": "应用程序的ID编号"
};
MyAPP.work = {
	num: 123,
	sub: {name: "sub_id"},
	doing: function(){
		//执行代码
	}
}

把应用程序的所有变量都追加在唯一名称空间下，降低与其他应用程序户型冲突的改概率，应用程序也会变得容易阅读。

• 实例二：

使用函数体封装应用程序，这是最常用的一种方法。

(function(window){
	var MyAPP = {},
	MyAPP.name = {
		"id": "应用程序的ID编号"
	};
	MyAPP.work = {
		num: 123,
		sub: {name: "sub_id"},
		doing: function(){
		//执行代码
    }
  };
  window.MyAPP; // 对外开放应用程序接口
})(window)

在js函数体内，所有声明的私有变量、参数、内部函数对外都是不可见的，如果不主动开方，外界是无法访问内部数据的，因此使用函数体封装应用程序时最佳实践。