在寫面向對象的WEB應用程序方面JavaSciprt是一種很好的選擇.它能支持OOP.因為它通過原型支持繼承的方式和通過屬性和方法的方式一樣好.很多開發(fā)者試圖拋棄JS,試著用C#或JAVA僅是因為JS不是他認為合適的面向對象的語言.許多人還沒有認識到javascript支持繼承.當你寫面向對象的代碼時.它能給你很強大的能量.你也可以使用它寫出可復用,可封裝的代碼.
對象為何如此偉大?
面向對象思想的成功是由于它仿照了現實中的事物和事物的聯系.事物有屬性和方法.如果我們描述一個臺燈.我們會說它的高度和寬度,比如12CM."開燈"這個動作是它的方法.當它是處于開著的狀態(tài)時.它可以被調亮一點或暗一點(也就是亮度這個屬性值變大或變小).
javascript 給予了為WEB應用程序創(chuàng)建對象的能力.對象在需要的時候相應的事件會被觸發(fā),代碼封裝后,它能被實例化很多次.在javascript里有幾種創(chuàng)建對象的方法,在不同的場合可用不同的方法
1.1JS創(chuàng)建對象方式之一用 new Object() 來創(chuàng)建對象
.最簡單的就是用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>
我們在這個例子里定義了person這個對象,然后加入了它的屬性和方法.在這個例子里,自定義的方法里有兩個屬性.
1.2.用文字記號Literal Notation創(chuàng)建對象
用文字記號也可以創(chuàng)建對象,但要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]) // 結果為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) // 結果為2
</script>
文字記號可是是數組,也可以是任意的javascript表達式或值.
用 new 操作符或文字記號創(chuàng)建一個自定義對象都是簡單的,也是符合邏輯的.但它最大的缺點就是結果不可復用.也不能很容易的用不同的版本初始化創(chuàng)建對象.例如上面的第一個例子,如果 person 的 name 不是 "Tim Scarfe",那樣我們不得不重新定義整個對象,僅僅為了適應它的一點點改變.
1.3.對象的構造和原型
在OOP的世界里,用先前的方法定義對象在許多場合都有限制.我們需要一種創(chuàng)建對象的方法,類型可以被多次使用而不用重新定義.對象在實例化時每次都可以按需分配不同的值.實現這個目標的標準方法是用對象構造器函數.
一個對象構造器只不過是個有規(guī)則的javascript函數,它就象一個容器(定義參數,調用其他函數等等).它們兩者所不同的是構造器函數是由 new 操作符調用的.(你將在下面的例子中看到).基于函數語法形式的對象定義,我們可以使它工作得最好.
讓我們用現實世界中的貓來舉個例子.貓的 name 和 color 是貓的屬性.meeyow(貓叫)是它的一個方法.重要的是任何不同的貓都可能有不同的 name 和 meeyow 的叫聲.為了建立適應這些特征的對象類,我們將使用對象構造器.
<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>
在這里,函數 cat() 是一個對象構造器,它的屬性和方法在函數體里用this來定義,用對象構造器定義的對象用 new 來實例化.主意我們如何非常容易的定義多個cat 的實例.每一個都有自己的名字,這就是對象構造器帶給我們的靈活性.
構造器建立了對象的藍圖.并不是對象本身.
在原型里增加方法.
在上面我們看到的例子里,對象的方法是在構造器里定義好的了.另外一種實現的途徑是通過原型(prototype).xxx
原型是javascript繼承的一種形式.我們可以為對象定義好后,再創(chuàng)造一個方法.原來所有對象的實例都將共享.
讓我們來擴展最初的 cat 對象.增加一個改名的方法.用 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>
就象你所看到的.我們僅只用了 關鍵字 prototype 實現了在對象定義后馬上增加了changeName方法.這個方法被所有的實例共享.
用原型(prototype) 重載 javascript 對象
原型 在自定義對象和有選擇性的重載對象上都可以工作.比如 Date() 或 String .這可能是無止境的.
1.4.子類和超類
下面一個例子演示了如何繼承
<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.訪問對象屬性
正如你所知, (.)操作符能夠用來操作對象屬性和方法,而([]) 操作符用來操作數組.
<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)來遍歷對象的屬性。
<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>