js面向对象之创建对象的不同方式
类(对象)的定义
一、工厂方式
一般方式创建对象
1
var oPeople=new Object;
2
oPeople.name="WangHongjian";
3
oPeople.age=4;
4
oPeople.job="Programmer";
5
oPeople.doJob=function(){
6
alert("Well Done");
7
};
其中doJob为指向函数的指针,该属性是方法。![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
2
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
3
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
4
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
5
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
6
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
7
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
使用工厂模式(factory function)
1
function oPeople(){
2
var oTmpPeople=new Object;
3
oTmpPeople.name="WangHongjian";
4
oTmpPeople.age=4;
5
oTmpPeople.job="Programmer";
6
oTmpPeople.doJob=function(){
7
alert(this.name);
8
}
9
return oTmpPeople;
10
}
11
var oP=new oPeople();
12
oP.doJob();
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
2
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
3
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
4
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
5
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
6
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
7
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
8
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
9
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
10
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
11
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
12
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
在此基础上继续完善,为oPeople()加上参数,可为其成员赋值。
1
function oPeople(sName,iAge,sJob){
2
var oTmpPeople=new Object;
3
oTmpPeople.name=sName,
4
oTmpPeople.age=iAge,
5
oTmpPeople.job=sJob;
6
oTmpPeople.doJob=function(){
7
alert(this.name);
8
}
9
return oTmpPeople;
10
}
11
var oP1=new oPeople("WangHongjian",22,"Programmer");
12
oP1.doJob();
13
var oP2=new oPeople("Zhang*",21,"Student");
14
oP2.doJob();
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
2
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
3
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
4
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
5
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
6
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
7
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
8
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
9
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
10
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
11
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
12
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
13
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
14
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
二、构造函数方式
1
function oPeople(sName,iAge,sJob){
2
this.name=sName,
3
this.age=iAge,
4
this.job=sJob;
5
this.doJob=function(){
6
alert(this.name);
7
}
8
return oTmpPeople;
9
}
10
var oP=new oPeople("WangHongjian",22,"Programmer");
11
oP.doJob();
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
2
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
3
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
4
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
5
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
6
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
7
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
8
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
9
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
10
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
11
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
在构造函数内容无创建对象,使用this关键字,使用new运算符调用构造函数时,在执行第一行代码前先创建一个对象,只有用this才能访问该对象。
三、原型方式
1
function oPeople(){
2
}
3
oPeople.prototype.name="WangHongjian";
4
oPeople.prototype.age=23;
5
oPeople.prototype.books=new Array("Data Struct","Algorithm Analysis");
6
oPeople.prototype.doJob=function(){
7
alert(this.name);
8
}
9
var oP1=new oPeople();
10
var oP2=new oPeople();
11
oP1.books.push("Software Enginee");
12
alert(oP1.books);
13
alert(oP2.books);
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
2
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
3
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
4
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
5
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
6
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
7
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
8
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
9
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
10
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
11
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
12
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
13
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
此处属性books是指向Array对象的指针,由于books是引用值,oP1、oP2的两个实例都指向同一数组,因此在oP1.books中使用push方法也会影响到oP2.books值。
这样就引出了——
混合的构造函数/原型方式
混合的构造函数+原型方式即用构造函数定义对象的所有非函数属性,用原型方式定义对象的函数属性(方法)。这样所有函数都只创建一次,而每个对象都具有自己的对象属性实例。
1
function oPeople(sName,iAge){
2
this.name=sName;
3
this.age=iAge;
4
this.books=new Array("Data Struct","Algorithm Analysis");
5
}
6
oPeople.prototype.doJob=function(){
7
alert(this.name);
8
};
9
var oP1=new oPeople("Wang Hongjian",23);
10
var oP2=new oPeople("Jing",22);
11
oP1.books.push("Software Enginee");
12
alert(oP1.books);
13
alert(oP2.books);
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
2
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
3
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
4
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
5
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
6
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
7
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
8
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
9
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
10
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
11
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
12
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
13
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
这种方式功能实现了对象实例之间的分离,但对于面向对象程序员来讲形式上不易于接受。考虑到此种情况,对该方式进行改进,产生了动态原型方法
动态原型方法
动态原型方法基本与混合的构造函数/原型方式相同,只在函数方法构造的位置稍有变化。继续演示示例
1
function oPeople(sName,iAge){
2
this.name=sName;
3
this.age=iAge;
4
this.books=new Array("Data Struct","Algorithm Analysis");
5
6
if(typeof oPeople._initialized=="undefined"){
7
oPeople.prototype.doJob=function(){
8
alert(this.name);
9
};
10
oPeople._initialized=true;
11
}
12
}
13
var oP=new oPeople("Wang Hongjian",23);
14
oP.doJob();
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
2
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
3
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
4
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
5
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
6
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
7
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
8
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
9
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
10
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
11
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
12
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
13
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
14
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
js引擎检查oPeople._initialized是否已建立,若没有建立,则构造doJob的原型方法,然后将建立标志为置为true,表示已建立;已建立不再重复建立,这样doJob方法只执行一次。
那么,OOPer,满足了吗?
最后还有一种
混合工厂方式
上面第一种方式讲述了工厂模式,将其变化,创建临时构造函数,只返回另一对象的新实例。
1
function oPeople(sName,iAge){
2
var oTmpPeople=new Object;
3
oTmpPeople.name=sName;
4
oTmpPeople.age=iAge;
5
oTmpPeople.doJob=function(){
6
alert(this.name);
7
}
8
return oTmpPeople;
9
}
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
2
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
3
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
4
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
5
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
6
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
7
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
8
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
9
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)