在寫面向?qū)ο蟮腤EB應(yīng)用程序方面JavaSciprt是一種很好的選擇.它能支持OOP.因?yàn)樗ㄟ^原型支持繼承的方式和通過屬性和方法的方式一樣好.很多開發(fā)者試圖拋棄JS,試著用C#或JAVA僅是因?yàn)镴S不是他認(rèn)為合適的面向?qū)ο蟮恼Z言.許多人還沒有認(rèn)識(shí)到j(luò)avascript支持繼承.當(dāng)你寫面向?qū)ο蟮拇a時(shí).它能給你很強(qiáng)大的能量.你也可以使用它寫出可復(fù)用,可封裝的代碼.
對(duì)象為何如此偉大?
面向?qū)ο笏枷氲某晒κ怯捎谒抡樟爽F(xiàn)實(shí)中的事物和事物的聯(lián)系.事物有屬性和方法.如果我們描述一個(gè)臺(tái)燈.我們會(huì)說它的高度和寬度,比如12CM."開燈"這個(gè)動(dòng)作是它的方法.當(dāng)它是處于開著的狀態(tài)時(shí).它可以被調(diào)亮一點(diǎn)或暗一點(diǎn)(也就是亮度這個(gè)屬性值變大或變小).
javascript 給予了為WEB應(yīng)用程序創(chuàng)建對(duì)象的能力.對(duì)象在需要的時(shí)候相應(yīng)的事件會(huì)被觸發(fā),代碼封裝后,它能被實(shí)例化很多次.在javascript里有幾種創(chuàng)建對(duì)象的方法,在不同的場(chǎng)合可用不同的方法
1.1JS創(chuàng)建對(duì)象方式之一用 new Object() 來創(chuàng)建對(duì)象
.最簡(jiǎn)單的就是用new 操作符,例如:
<script language="javascript" type="text/javascript">
person = new Object()
person.name = "Tim Scarfe"
person.height = "6Ft"
person.run = function() {
this.state = "running"
this.speed = "4ms^-1"
}
</script>
我們?cè)谶@個(gè)例子里定義了person這個(gè)對(duì)象,然后加入了它的屬性和方法.在這個(gè)例子里,自定義的方法里有兩個(gè)屬性.
1.2.用文字記號(hào)Literal Notation創(chuàng)建對(duì)象
用文字記號(hào)也可以創(chuàng)建對(duì)象,但要javascript 1.2以上版本.它的創(chuàng)建形式是多樣的.
<script language="javascript" type="text/javascript">
// Object Literals
timObject = {
property1 : "Hello",
property2 : "MmmMMm",
property3 : ["mmm", 2, 3, 6, "kkk"],
method1 : function(){
alert("Method had been called" + this.property1)
}
};
timObject.method1();
alert(timObject.property3[2]) // 結(jié)果為3
var circle = { x : 0, y : 0, radius: 2 } // another example
// 嵌套也是允許的哦.
var rectangle = {
upperLeft : { x : 2, y : 2 },
lowerRight : { x : 4, y : 4}
}
alert(rectangle.upperLeft.x) // 結(jié)果為2
</script>
文字記號(hào)可是是數(shù)組,也可以是任意的javascript表達(dá)式或值.
用 new 操作符或文字記號(hào)創(chuàng)建一個(gè)自定義對(duì)象都是簡(jiǎn)單的,也是符合邏輯的.但它最大的缺點(diǎn)就是結(jié)果不可復(fù)用.也不能很容易的用不同的版本初始化創(chuàng)建對(duì)象.例如上面的第一個(gè)例子,如果 person 的 name 不是 "Tim Scarfe",那樣我們不得不重新定義整個(gè)對(duì)象,僅僅為了適應(yīng)它的一點(diǎn)點(diǎn)改變.
1.3.對(duì)象的構(gòu)造和原型
在OOP的世界里,用先前的方法定義對(duì)象在許多場(chǎng)合都有限制.我們需要一種創(chuàng)建對(duì)象的方法,類型可以被多次使用而不用重新定義.對(duì)象在實(shí)例化時(shí)每次都可以按需分配不同的值.實(shí)現(xiàn)這個(gè)目標(biāo)的標(biāo)準(zhǔn)方法是用對(duì)象構(gòu)造器函數(shù).
一個(gè)對(duì)象構(gòu)造器只不過是個(gè)有規(guī)則的javascript函數(shù),它就象一個(gè)容器(定義參數(shù),調(diào)用其他函數(shù)等等).它們兩者所不同的是構(gòu)造器函數(shù)是由 new 操作符調(diào)用的.(你將在下面的例子中看到).基于函數(shù)語法形式的對(duì)象定義,我們可以使它工作得最好.
讓我們用現(xiàn)實(shí)世界中的貓來舉個(gè)例子.貓的 name 和 color 是貓的屬性.meeyow(貓叫)是它的一個(gè)方法.重要的是任何不同的貓都可能有不同的 name 和 meeyow 的叫聲.為了建立適應(yīng)這些特征的對(duì)象類,我們將使用對(duì)象構(gòu)造器.
<script language="javascript" type="text/javascript">
function cat(name) {
this.name = name;
this.talk = function() {
alert( this.name + " say meeow!" )
}
}
cat1 = new cat("felix")
cat1.talk() //alerts "felix says meeow!"
cat2 = new cat("ginger")
cat2.talk() //alerts "ginger says meeow!"
</script>
在這里,函數(shù) cat() 是一個(gè)對(duì)象構(gòu)造器,它的屬性和方法在函數(shù)體里用this來定義,用對(duì)象構(gòu)造器定義的對(duì)象用 new 來實(shí)例化.主意我們?nèi)绾畏浅Ｈ菀椎亩x多個(gè)cat 的實(shí)例.每一個(gè)都有自己的名字,這就是對(duì)象構(gòu)造器帶給我們的靈活性.
構(gòu)造器建立了對(duì)象的藍(lán)圖.并不是對(duì)象本身.
在原型里增加方法.
在上面我們看到的例子里,對(duì)象的方法是在構(gòu)造器里定義好的了.另外一種實(shí)現(xiàn)的途徑是通過原型(prototype).xxx
原型是javascript繼承的一種形式.我們可以為對(duì)象定義好后,再創(chuàng)造一個(gè)方法.原來所有對(duì)象的實(shí)例都將共享.
讓我們來擴(kuò)展最初的 cat 對(duì)象.增加一個(gè)改名的方法.用 prototype 的方式.
<script language="javascript" type="text/javascript">
cat.prototype.changeName = function(name) {
this.name = name;
}
firstCat = new cat("pursur")
firstCat.changeName("Bill")
firstCat.talk() //alerts "Bill says meeow!"
</script>
就象你所看到的.我們僅只用了 關(guān)鍵字 prototype 實(shí)現(xiàn)了在對(duì)象定義后馬上增加了changeName方法.這個(gè)方法被所有的實(shí)例共享.
用原型(prototype) 重載 javascript 對(duì)象
原型 在自定義對(duì)象和有選擇性的重載對(duì)象上都可以工作.比如 Date() 或 String .這可能是無止境的.
1.4.子類和超類
下面一個(gè)例子演示了如何繼承
<script language="javascript" type="text/javascript">
function superClass() {
this.supertest = superTestMethod; //attach method superTest
}
function superTestMethod() {
return "superTest";
}
function subClass() {
this.inheritFrom = superClass;
this.inheritFrom();
this.subtest = subTestMethod; //attach method subTest
}
function subTestMethod() {
return "subTest";
}
var newClass = new subClass();
alert(newClass.subtest()); // 彈出"subTest"
alert(newClass.supertest()); // 彈出 "superTest"
</script>
1.5.訪問對(duì)象屬性
正如你所知, (.)操作符能夠用來操作對(duì)象屬性和方法,而([]) 操作符用來操作數(shù)組.
<script language="javascript" type="text/javascript">
// 這兩種用法是相同的
object.property
object["property"]
</script>
<script language="javascript">
function Circle (xPoint, yPoint, radius) {
this.x = xPoint;
this.y = yPoint;
this.r = radius;
}
var aCircle = new Circle(5, 11, 99);
alert(aCircle.x);
alert(aCircle["x"]);
</script>
我們可以通過for in循環(huán)來遍歷對(duì)象的屬性。
<script language="javascript" type="text/javascript">
var testObj = {
prop1 : "hello",
prop2 : "hello2",
prop3 : new Array("hello",1,2)
}
for(x in testObj) {
alert( x + "-" + testObj[ x ] )
}
</script>
<script language="javascript">
var Circle = { // another example
x : 0,
y : 1,
radius: 2
}
for(p in Circle) {
alert( p + "-" + Circle[ p ] )
}
</script>