论坛首页 Web前端技术论坛

我的javascript学习之路(二) 对象之定义

浏览 8497 次
该帖已经被评为良好帖
作者 正文
   发表时间:2006-09-13  
javascript 是弱语言
我们学习javascript的时候 就不应该收到强类型语言规则的限制 强类型语言一般从数据结构(类)到对象(类的实例)2个角度来考虑问题,所以我们要实现动态增加类的属性或者方法都比较困难,连生成一个对象动态增加属性或者方法都比较困难,一般都需要装饰模式,最基本的动态生成一个实体bean,然后从数据map中把key对应的值赋给bean的该name属性都是开销比较大的事情,但是javascript就完全不一样了,我们应该在学习javascript的时候忘记java的等的这些概念,我们只需要知道javascript中只有对象!


//一、工厂方式

//可以看到第二个实例p2和person指向同一个对象,无法实现“类的功能”,只是一个对象。
var person = new Object();
person.name="sjf";
person.age=24;
person.showName=function(){alert(this.name);}
person.showName();//sjf
var p2 = person ;
p2.name='jianfeng';
p2.showName();//jianfeng
person.showName();//jianfeng
当然我们可以这样处理:

var p2 = new Object();
for(var p in  person){
   p2[p]=person[p] ;
}


//这种事情你用java你怎么来实现呢?所以说学习js的时候忘记java吧。





//二、工厂模式
缺点:
1、没有使用new;
2、showName放里面太浪费,放外面封装不好
function createPerson(name,age){	
	var person = new Object();
	person.name=name;
	//alert(this.name);
	person.age=age;
	person.showName=function (){alert(this.name);};
	return person;
}

var p1 = createPerson('sjf',24);
p1.showName();//sjf
for(var p in p1 ){
alert('key:'+ p + '==>value : ' + p1[p] );
}

var p2 = createPerson('jianfeng',42);
p2.showName();//jianfeng

p1.showName();//sjf

//请对比下面的代码

function createPerson(name,age){	

	this.name=name;
	//alert(this.name);
	this.age=age;
	this.showName=function (){alert(this.name);};
	return this;
}


var p1 = createPerson('sjf',24);
p1.showName();//sjf

/*
for(var p in p1 ){
alert('key:'+ p + '==>value : ' + p1[p] );
}
*/
var p2 = createPerson('jianfeng',42);
p2.showName();//jianfeng
p1.showName();//jianfeng

/*
从这个方法开始我们使用this
出现的结果是因为这里的this一直指向的是window对象 所有p1在第二次showName的时候变成最新的了 这样就每次把新生成的window对象赋给了p1和p2 这样做显然不是我们需要的哦,解决办法是:
var p1 = new  createPerson('sjf',24);
var p2 = new   createPerson('jianfeng',42);
等价于下面这种方法:定义对象,把这个函数赋给他 (这里是为了方便理解this指针的用法!),然后调用该对象的该函数。//前面的文章中已经讲过了
var p1 = new  Object();
p1.createPerson = createPerson;
p1.createPerson('sjf',24);

var p2 = new  Object();
p2.createPerson=createPerson;
p2.createPerson('jianfeng',42);

*/


//三、构造函数方式

缺点:
1、没有使用new;
2、showName放里面太浪费,放外面封装不好
function createPerson(name,age){	

	this.name=name;
	//alert(this.name);
	this.age=age;
	this.showName=function (){alert(this.name);};
	return this;
}


var p1 = new createPerson('sjf',24);

p1.showName();//sjf

/*
for(var p in p1 ){
alert('key:'+ p + '==>value : ' + p1[p] );
}
*/
var p2 = createPerson('jianfeng',42);

p2.showName();//jianfeng
p1.showName();//sjf

//四 构造函数/原型方式
缺点:
1、没有使用new; (解决)
2、showName放里面太浪费,放外面封装不好
function Person(name,age){	

	this.name=name;
	//alert(this.name);
	this.age=age;	
	return this;

}

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


var p1 = new Person('sjf',24);

p1.showName();//sjf


for(var p in p1 ){
alert('key:'+ p + '==>value : ' + p1[p] );
}

var p2 = new Person('jianfeng',42);
p2.showName();//jianfeng
p1.showName();//sjf


///五、动态原型方法

缺点:
1、没有使用new; (解决)
2、showName放里面太浪费,放外面封装不好(解决)
function Person(name,age){	

	this.name=name;
	//alert(this.name);
	this.age=age;	
	//return this;
	if(typeof Person._initialized=='undefined'){
	
		Person.prototype.showName=function (){
			alert(this.name);
		}
		Person._initialized=true;
	}

}



var p1 = new Person('sjf',24);

p1.showName();//sjf


for(var p in p1 ){
alert('key:'+ p + '==>value : ' + p1[p] );
}

var p2 = new Person('jianfeng',42);
p2.showName();//jianfeng
p1.showName();//sjf

看到这里也许你会说 开头不是还有个属性拷贝的定义方法吗  是的 但是 针对具体的对象我们偶尔这样用是可以的,但是这只是针对个体的一种操作,就好比我们在java中用数据Map填充一个实体bean一样的道理 , 这里讨论的是更广意义上的类的定义,类似于java中如何定义具体的class,可以说是从数据结构为基础的角度来考虑的。





   发表时间:2007-09-16  
这个写得不错,支持一下
0 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics