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为指向函数的指针,该属性是方法。
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
};使用工厂模式(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();
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();在此基础上继续完善,为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();
  
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();二、构造函数方式
 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();
  
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();在构造函数内容无创建对象,使用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);
   
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);此处属性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);
 
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);这种方式功能实现了对象实例之间的分离,但对于面向对象程序员来讲形式上不易于接受。考虑到此种情况,对该方式进行改进,产生了动态原型方法
动态原型方法
动态原型方法基本与混合的构造函数/原型方式相同,只在函数方法构造的位置稍有变化。继续演示示例
  
 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();
 
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();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
}
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
}
oPeople.doJob
    oTmpPeople.doJob
                
            
        
浙公网安备 33010602011771号