JS作用域安全构造函数

JavaScript 2012-08-16 JavaScript,构造,函数

通常我们定义的构造函数需要new操作符实例调用构造函数,因为只有使用new的时候构造函数内用到的this对象会指向新创建的对象实例,如代码:

/**
 * 作用域安全构造函数
 * 琼台博客
 */

// 定义构造函数
function cus(name,age){
	this.name = name;
	this.age = age;
}

var obj = new cus('琼台博客',2);

alert(obj.name); // 琼台博客
alert(obj.age);  // 2

因为使用new定义实例了cus构造函数,所以this对象指向新创建的obj对象。最后obj.name与obj.age分别都接受到构造函数赋予的值,结果可以正常弹出值。

但是,在没有使用new操作符来调用构造函数的情况下,情况就不一样了,我们都知道this默认指的是window,所以name与age都被赋予到window对象上。如代码:

/**
 * 作用域安全构造函数
 * 琼台博客
 */

// 定义构造函数
function cus(name,age){
	this.name = name;
	this.age = age;
}

// 没有使用new操作符构造函数
var obj = cus('琼台博客',2);

alert(obj.name); // undefined
alert(obj.age);  // undefined

alert(window.name) // 琼台博客
alert(window.age) // 2

这里原本是要把两个变量name与age赋予给obj变量的,但由于没有使用new操作符,所以直接赋予到window下了。结果导致obj.name与obj.age都是undefined,而window.name与window.age才可以正确弹出被赋予的值。

为了解决这个问题,我们可以先确认this对象是正确类型的实例,如果是就直接赋予值,如果不是就会创建一个实例并返回。

/**
 * 作用域安全构造函数
 * 琼台博客
 */

// 定义构造函数
function cus(name,age){
	// 判断是不是使用new实例
	if(this instanceof cus){
		this.name = name;
		this.age = age;		
	}else{
		// 否则使用new实例并返回
		return new cus(name,age);	
	}
}

// 没有使用new操作符构造函数
var obj = cus('琼台博客',2);

alert(obj.name); // 琼台博客
alert(obj.age);  // 2

这样,无论是否使用new操作符都能当作构造函数来使用了,不要难过担心被赋予到window对象下。

文字链接:《JS作用域安全构造函数

文章地址:http://www.qttc.net/201208183.html

除非标注,琼台博客所有博文均为原创,转载请加文字链接注明来源

乳名?小名?昵称?网名?均可

email,放心,我不会给你乱投广告的

想获得回访就把你的站点URL写上(没有留空)

[NOTICE]木要投放广告
[NOTICE]木要骂人,说不该说的话
[NOTICE]自由言论,但要遵纪守法

Comments 4