js面向对象之创建对象的不同方式

类(对象)的定义

一、工厂方式

一般方式创建对象


1var oPeople=new Object;
2oPeople.name="WangHongjian";
3oPeople.age=4;
4oPeople.job="Programmer";
5oPeople.doJob=function(){
6    alert("Well Done");
7}
;
其中doJob为指向函数的指针,该属性是方法。
使用工厂模式(factory function)
 1function 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}

11var oP=new oPeople();
12oP.doJob();

查看运行效果

在此基础上继续完善,为oPeople()加上参数,可为其成员赋值。

 1function 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}

11var oP1=new oPeople("WangHongjian",22,"Programmer");
12oP1.doJob();
13var oP2=new oPeople("Zhang*",21,"Student");
14oP2.doJob();

查看运行效果

二、构造函数方式

 1function 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}

10var oP=new oPeople("WangHongjian",22,"Programmer");
11oP.doJob();

查看运行效果

在构造函数内容无创建对象,使用this关键字,使用new运算符调用构造函数时,在执行第一行代码前先创建一个对象,只有用this才能访问该对象。

三、原型方式

 1function oPeople(){
 2}

 3oPeople.prototype.name="WangHongjian";
 4oPeople.prototype.age=23;
 5oPeople.prototype.books=new Array("Data Struct","Algorithm Analysis");
 6oPeople.prototype.doJob=function(){
 7    alert(this.name);
 8}

 9var oP1=new oPeople();
10var oP2=new oPeople();
11oP1.books.push("Software Enginee");
12alert(oP1.books);
13alert(oP2.books);

查看运行结果

此处属性books是指向Array对象的指针,由于books是引用值,oP1、oP2的两个实例都指向同一数组,因此在oP1.books中使用push方法也会影响到oP2.books值。

这样就引出了——

混合的构造函数/原型方式

混合的构造函数+原型方式即用构造函数定义对象的所有非函数属性,用原型方式定义对象的函数属性(方法)。这样所有函数都只创建一次,而每个对象都具有自己的对象属性实例。
 

 1function oPeople(sName,iAge){
 2    this.name=sName;
 3    this.age=iAge;
 4    this.books=new Array("Data Struct","Algorithm Analysis");
 5}

 6oPeople.prototype.doJob=function(){
 7    alert(this.name);
 8}
;
 9var oP1=new oPeople("Wang Hongjian",23);
10var oP2=new oPeople("Jing",22);
11oP1.books.push("Software Enginee");
12alert(oP1.books);
13alert(oP2.books);

查看运行效果

这种方式功能实现了对象实例之间的分离,但对于面向对象程序员来讲形式上不易于接受。考虑到此种情况,对该方式进行改进,产生了动态原型方法

动态原型方法

动态原型方法基本与混合的构造函数/原型方式相同,只在函数方法构造的位置稍有变化。继续演示示例
 

 1function 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}

13var oP=new oPeople("Wang Hongjian",23);
14oP.doJob();

查看运行效果

js引擎检查oPeople._initialized是否已建立,若没有建立,则构造doJob的原型方法,然后将建立标志为置为true,表示已建立;已建立不再重复建立,这样doJob方法只执行一次。

那么,OOPer,满足了吗?

最后还有一种

混合工厂方式

上面第一种方式讲述了工厂模式,将其变化,创建临时构造函数,只返回另一对象的新实例。

1function 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/walkingp/p/1580822.html