首页 > 代码库 > JavaScript简单对象的定义方法

JavaScript简单对象的定义方法

2024-08-24 18:23:51   220人阅读

工厂模式:
初级开发者可能会这样定义对象: 

var obj = new Object(); 
obj.name = "hero"; 
obj.showName=function (){alert(this.name);}

这里存在一个问题就是如果我们要在多个地方用obj对象,可能在程序中类似的代码要写好多遍,于是产生了工厂方法 

function createObj() 
{ 
var obj = new Object(); 
obj.name="hero"; 
obj.showName=function (){alert(this.name);} 
return obj; 
} 
var obj1 = createObj(); 
var obj2 = createObj();

和另外一种方法 构造函数法 

function obj (name) 
{ 
this.name=name; 
this.showName= function (){alert(this.name);} 
}

把生成对象的代码封装起来,避免出现重复new的代码,当然也可以进一步改进,就是createObj传递一些参数,而不是给obj赋默认固定值: 

function createObj(name) 
{ 
var obj = new Object(); 
obj.name=name; 
obj.showName=function (){alert(this.name);} 
return obj; 
} 
var obj1 = createObj("hero"); 
var o‘b‘j2=createObj("dby");

但是存在一个问题,就是我们每次调用createObj函数都会创建新的函数 showName.意味着每个对象都有自己版本的showName,所以要改进避开这个问题. 

function showName() 
{ 
alert(this.name) 
} 
function createObj(name) 
{ 
var obj = new Object(); 
obj.name=name; 
obj.showName=showName; 
return obj; 
}

这样就解决了 重复创建函数的问题, 哈哈哈,大功告成 . 

原型方式:
主要是利用对象的prototype属性. 

function obj() 
{} 
obj.prototype.name="hero"; 
obj.prototype.showName=function() 
{ 
alert(this.name); 
}

看起来似乎比刚才的工厂还完美,但是 有一个问题,该函数没有构造函数,属性是通过prototype指定的,这一点在实际应用中很让人头疼,所有的实例的属性都一样实在是不能让人接受.尤其还存在一个安全隐患,那就是当对象中有引用时,例如 加上这样一段 

obj.prototype.nameArray = new Array("hero","dby");
然后
obj1 = new obj();
obj2 = new obj();
obj1.nameArray.push("lxw");
在obj2的nameArray中将也会看到这个属性,因为两个对象的nameArray指向的是同一个引用.
所以这种方式并不是理想方法.
需要 改进
结合构造函数,在构造函数定义属性,用原型定义方法
例如 

fuction obj(name) 
{ 
this.name = name 
this.nameArray = new Array("hero","dby"); 
} 
obj.prototype.showName = function(){alert(this.name)}

所有的非函数属性都在构造函数里创建,函数属性用prototype方式创建,obj1 中改变nameArray的值,不会影响到obj2对象的nameArray的值, 而且只有一个showName函数,所以没有内存浪费. 

基本上完美了,剩下的基本都是一下其他的修饰了.有兴趣的可以自己改着玩玩.
笔者在这里加上一个单例 玩了一下: 

function obj (name) 
{ 
this.name = name; 
this.nameArray=new Array("hero","dby"); 
if(typeof obj._initialized==‘undefined‘) 
{ 
obj.prototype.showName=function(){alert(this.name);} 
obj._initialized="true"; 
} 
}

其实不算是单例, 只不过是在构造对象的时候,先判断一个属性是否被定义,如果没有定义,那么用原型方法继续定义对象,如果已经定义了属性,那么就不在重复定义函数了. 该prototype方法只被创建一次,病赋值一次. 

又差不多完美了,大功告成 .
这是个人的理解，，希望对大家有帮助，不完善的地方请qq联系，及时改正。
这是一个完整的实例： 

function Rectangle(name,color,width,heigth){ 
this.name=name; 
this.color=color; 
this.width=width; 
this.heigth=heigth; 
} 
Rectangle.prototype.area=function(){ 
return this.width*this.heigth 
} 
Rectangle.prototype.show=function(){ 
document.write(this.name+" "+this.color+" "+this.width+" "+this.heigth+"<br/>"); 
document.write(this.area()); 
} 
var obj1= new Rectangle("Rectangle","red",15,20); 
obj1.show();

 

JavaScript简单对象的定义方法


联系
我们