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

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值