JavaScript 基本上只是一個支援物件的語言,本身並沒有支援物件導向的封裝,繼承,多型等特色,但可以透過模擬來實作
1.如何在 JavaScript 使用自訂物件
- 使用 Object 物件建立自訂物件
<script language="JavaScript">
var objCard =new Object()
objCard.name="林大同";
objCard.age=30;
objCard.phone="02-1234567";
objCard.mail="1234@gmail.com";
document.write("姓名:"+objCard.name+"<br>");
//JavaScript 的物件其實也是一個陣列,物件屬性就是陣列元素,所以也可以如下表示法
document.write("姓名:"+objCard["name"]+"<br>");
</script>
- 透過建立物件的建構崡數宣告物件
<script language="JavaScript">
function nameCard(name,age,phone,email)
{
this._name=name;
this._age=age;
this._phone=phone;
this._email=email;
}
var objMyCard=new nameCard("林大同",30,"02-1234567","1234@gmail.com");
//也可以
var objMyCard=new nameCard();
objMyCard._name=name;
</script>
- 新增物件的方法
<script language="JavaScript">
function nameCard(name,age,phone,email)
{
this._name=name;
this._age=age;
this._phone=phone;
this._email=email;
this.print=printCard;
}
function printCard()
{
document.write("姓名:"+objCard.name+"<br>");
}
var objMyCard=new nameCard("林大同",30,"02-1234567","1234@gmail.com");
objMyCard.print();
</script>
//在 JavaScript 裡宣告一個自訂類別和方法形式上是一樣的,差別在類別須透過 new 來建立物件
//方法則名稱會為某一個類別所宣告的方法的名稱一樣
- JavaScript 的 Prototype 物件
透過 Prototype 可以為所有的類別副本建立新屬性,不同於 expando 屬性只能針對指定的副本建立新屬性
<script language="JavaScript">
function circle(r,color)
{
this._r=r;
this._color=color;
this.display=showCircle;
}
function showCircle()
{
document.write("半徑:"+this._r+"<br>");
document.write("圓周率:"+this.PI+"<br>");
}
function getArea()
{
var result=this.PI*this._r*this._r;
document.write("圓面積:"+result+"<br>");
}
var objCircle1=new circle(2,"red");
var objCircle2=new circle(3,"green");
circle.prototype.PI=3.1415926;
circle.prototype.area=getArea;
objCircle1.display(); //可以顯示 PI 屬性
objCircle1.area; //多了一個方法
objCircle2.display(); //可以顯示 PI 屬性
objCircle2.area;
</script>
- Prototype 物件的繼承
<script language="JavaScript">
function position(x,y,color)
{
this.x=x;
this.y=y
this.color=color;
}
function circle(r)
{
this.r=r;
this.info=showCircleInfo;
function showCircleInfo()
{
var result=3.1415926*this.r*this.r;
document.write("半徑:"+this.r+"<br>");
document.write("X 座標:"+this.X+"<br>");
document.write("Y 座標:"+this.Y+"<br>");
}
}
circle.prototype=new position();
var objCircle=new circle(2);
with(objCircle)
{
x=100;
y=50;
color="green";
}
objCircle.info();
</script>
留言列表
