js的封裝分為以下幾種模式： 工廠模式，代碼如下： <!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="Generator" content="EditPlus®"><meta name="Author" co
js的封裝分為以下幾種模式：
工廠模式，代碼如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body>
<script language="JavaScript">
function CreateCar()
{
var Car=new Object();
Car.Color="blue";
Car.ShowColor=function()
{
alert(this.Color);
}
return Car;
}
var car1=CreateCar();
var car2=CreateCar();
car1.Color="red";
car2.Color="blue";
car1.ShowColor();
car2.ShowColor();
//改造並加入參數
function CreateCar(color,doors,mpg)
{
var oCar=new Object();
oCar.Color=color;
oCar.Doors = doors;
oCar.Mpg=mpg;
oCar.ShowColor=function(){
alert(this.Color);
alert(this.Doors);
alert(this.Mpg);
}
return oCar;
}
var car3=CreateCar("red",4,23);
var car4=CreateCar("blue",4,20);
alert(car3.Color);
alert(car4.Color);
</script>
</body>
</html>
工廠模式改造：代碼如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body>
<script language="JavaScript">
function showColor()
{
alert(this.Color);
}
function CreateCar(color,idoor)
{
var oCar=new Object()
oCar.Color=color;
oCar.Door=idoor;
oCar.showColor=showColor;
return oCar;
}
var car1=CreateCar("red",5);
car1.showColor();
</script>
</body>
</html>
構造函數模式，代碼如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body>
<script language="JavaScript">
function CreateCar(color,idoor)
{
this.Color=color;
this.Door = idoor;
this.showColor=function()
{
alert(this.Color);
}
}
var car1=CreateCar("green",6);
car1.showColor();
</script>
</body>
</html>
原型模式，代碼如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body>
<script language="Javascript">
function Car(){};
Car.prototype.color="red";
Car.prototype.door=4;
Car.prototype.showColor=function(){
alert(this.color);
}
Car.prototype.drivers=new Array("a","b");
//call
var oCar1=new Car();
var oCar2=new Car();
oCar1.drivers.push("c");
alert(oCar1.drivers);//output "a,b,c"
alert(oCar2.drivers);//output "a,b,c"
</script>
</body>
</html>
聯合構造函數和原型模式：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body>
<script language="JavaScript">
function Car(sColor,sDoor)
{
this.color=sColor;
this.door=sDoor;
this.drivers=new Array("a","b");
}
Car.prototype.showColor=function(){
alert(this.color);
}
var oCar1=new Car("red",4);
oCar1.drivers.push("c");
alert(oCar1.drivers);
var oCar2=new Car("blue",5);
alert(oCar2.drivers);
</script>
</body>
</html>
動態原型模式，代碼如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body>
<script language="JavaScript">
function Car(iColor,iMsg,iDoors)
{
this.color=iColor;
this.msg=iMsg;
this.doors=iDoors;
this.drivers=new Array();
if(typeof Car._initialized=="undefined")
{
Car.prototype.showColor=function(){
alert(this.color);
};
Car._initialized=true;
}
}
//call
var oCar=new Car("yellow",10,20);
oCar.showColor();
</script>
</body>
</html>
