Posted on 2007-12-06 22:03
探佚 阅读(470)
评论(0) 编辑 收藏 所属分类:
CSS/JavaScript/AJAX
一、工厂函数方式
<script type="text/javascript">
function showDoors(){
document.write("<p>汽车有："+this.doors+"个门</p>");
}
// 工厂函数会每个对象创建独立的函数版本,且格式也不规范
function createCar(sColor,iDoors,iMpg){
var oCar = new Object();
oCar.color = sColor; // 颜色
oCar.doors = iDoors; // 门的数量
oCar.mpg = iMpg; // 每加仑油可运行的里程
oCar.showColor = function(){
document.write("<p>汽车的颜色是："+this.color+"</p>");
};
oCar.showDoors = showDoors;
return oCar;
}
var oCar1 = createCar("white",4,23);
oCar1.showColor();
oCar1.showDoors();
var oCar2 = createCar("black",4,22);
oCar2.showColor();
oCar2.showDoors();
</script>
二、原型方式
<script type="text/javascript">
// 缺点：不能通过构造函数传递初始化属性/所有属性和方法是对象共享的
function Car(){
}
Car.prototype.color = "red";
Car.prototype.doors = 4;
Car.prototype.mpg = 23;
Car.prototype.showColor = function(){
document.write("<p>汽车的颜色是："+this.color+"</p>");
}
var oCar1 = new Car();
oCar1.showColor();
var oCar2 = new Car();
oCar2.showColor();
</script>
三、构造函数方式
<script type="text/javascript">
// 缺点：构造函数会重复生成函数，为每个对象创建独立的函数版本
function Car(sColor,iDoors,iMpg){
this.color = sColor;
this.doors = iDoors;
this.mpg = iMpg;
this.showColor = function(){
document.write("<p>汽车的颜色是：" +this.color+ "</p>");
};
}
var oCar1 = new Car("white",4,22);
oCar1.showColor();
var oCar2 = new Car("black",4,22);
oCar2.showColor();
</script>
四、采用构造函数/原型方式(主流)
<script type="text/javascript">
// 用构造函数定义非函数属性，原型方式定义对象的函数属性
function Car(sColor,iDoors,iMpg){
this.color = sColor;
this.doors = iDoors;
this.mpg = iMpg;
this.drivers = new Array("stephen","scofield");
}
Car.prototype.showColor = function(){
document.write("<p>汽车的颜色是"+this.color+"</p>");
};
var oCar1 = new Car("white",4,23);
oCar1.showColor();
var oCar2 = new Car("blue",3,24);
oCar2.showColor();
// 添加一名驾驶员
oCar2.drivers.push("fengwei");
document.write("<p>oCar1的驾驶员是：" + oCar1.drivers + "</p>");
document.write("<p>oCar2的驾驶员是：" + oCar2.drivers + "</p>");
</script>
五、动态原型方式 (逐步成为主流)
<script type="text/javascript">
function Car(sColor,iDoors,iMpg){
this.color = sColor;
this.doors = iDoors;
this.mpg = iMpg;
this.drivers = new Array("stephen","scofield");
// 判断是否已给原型赋予任何方法
if(typeof Car._initialized == "undefined"){
Car.prototype.showColor = function(){
document.write("<p>汽车的颜色是:"+this.color+"</p>");
};
}
}
var oCar1 = new Car("white",4,23);
oCar1.showColor();
</script>