Object-oriented Language
Object-oriented Language,物件導向程式語言，特性有：
- 封裝Encapsulation
- 繼承Inheritance
- 多形Polymorphism
Object(物件)
讓正真有需要的原始碼接觸資料，減少資料曝露的程度，讓程式碼再利用。物件結合資料與行為，建立一種新的資料型別，其中可以儲存(store)資料，也可以根據資料而行動(act)，所以物件是個容器，其中儲存資料，並聯繫資料與依據資料行動的原始碼。物件(Object)在一個儲存容器內聯繫起變數與函式。
資料(變數)+行為(函式)=物件
物件內的資料稱「property」(屬性、特性)，物件內的行為稱「method」(方法)，
property + method = Object
.(點)
點號運算子('.' dot operator)用於取用物件property與method，
Object + . + property/method
例如，
物件可以包含其他物件，例如，
1 | var mail = new Mail(new Date(), "from", ...); |
在Mail建構式中傳入一個Date物件。
建構式(constructor) - 屬性(property)
物件具有資料，資料必須在物件建立時「初始化」，每個自訂物件都需要自己的建構式，名稱與「物件相同」。
1 | function Mail(from,to,body,subject){ |
5 | this.subject = subject; |
建構式使用首字母大寫，建立property需使用JavaScript的關鍵字「this」，關鍵字this區分物件property與一般變數。this指定物件property的擁有權，同時設定property的初始值建立屬於「這個(this)」物件的property，例如，
將收到的參數指定給新property。沒有this，建構式不會知道你正在建立物件property。以建構式建立物件時，我們使用new運算子，它呼叫物件的建構式，開啟物件建立過程。例如，
1 | var mail = new Mail("from","to","body","subject"); |
- var mail：新物件儲存在變數裡
- new Mail(...)：new運算子建立新Mail物件(呼叫建構式)
- "from","to","body",...：傳入參數給建構式，以設定property
建構式(constructor) - 方法(method)
1 | function Mail(from,to,body,subject){ |
3 | this.send = function(){ |
該如何知道指令碼(函式)應放入method?
method就是根據物件的property而採取某些行動，換言之，如果指令碼需要取用物件內部資料，就非常合適放入method。
把函式轉為方法
- 宣告method
- 把現有程式碼移入method裡
- 修改使用物件property
宣告method，使用this建立method，與建立property類似。例如，
關於選用參數
1 | function Mail(from,to,body,subject,smtp,port){ |
當某個參數未傳入給function、method、constructor時，在任何試圖使用參數值的原始碼裡，它的值都是null，在缺少參數相對應的property將會被設為null。確認選用參數在function參數清單的最後面。例如：當funcion有兩個參數，可能的選擇有：
- 兩個都傳入
- 只傳入第一個
- 兩個都不傳
- 無法只傳第二個
複本
Mail物件的send()方法，Mail物件的method是在建構式裡，利用關鍵字this建立，但依此建立的Mail物件都會各有一份物件方法的複本，關鍵字"this"用於設置「instance」擁有的property和method。例如，
1 | var mail1 = new Mail(...); |
2 | var mail2 = new Mail(...); |
3 | var mail3 = new Mail(...); |
每個Mail物件(mail1,mail2,mail3)，都會有自己的property與method複本，等於會有三份method，這是浪費又沒效率。
property為每個物件儲存獨特資料，method應該為物件所共享。
Class與instance
類別Class，是物件的描述，樣版、藍圖。例如，
實例Instance，實際物件，依Class建立。例如，
1 | var mail = new Mail(...); |
mail是依Mail來建立的物件(instance)。
每個instance的property多半都不一樣，所以每個instance才需要有自己的property複本，但method沒有必要複製到每個instance中。
Class擁有method
class-owned instance method，當method為Class所擁有時，所有該Class的instance都可以取用此method，而不需要另外複製一份。
在Class使用prototype
在JavaScript中每個物件都有一個prototype物件(以property存在)，prototype用以設定Class level(類別層級)的property與method，
而非屬於instance。也就是說，我們需要把method的「擁有權」指派給Class，而不是指派小單一instance，例如，
1 | Mail.prototype.send = function(){} |
prototype使用需在建構式之外。send()方法直接附加到Mail class本身，而非隸屬於某個instance，這樣無論Mail class建立多少份instance，都只會有一份send()方法。當send()接受呼叫時，將在class內執行，例如，
當其他Mail物件的instance也呼叫了send()方法，仍會執行Class內的同一方法。
class property
類別屬性，此property只需要在類別儲存一次，但能被所有instance存取，例如，
1 | Mail.prototype.smtp = "smtp.kkbruce.net"; |
2 | Mail.prototype.port = "25"; |
此property只有一個值，讓所有instance共享。想成，它是class的全域變數，但只能讓class對應的instance取用。JavaScript標準物件能也使用prototype，每個物件都有prototype，它允許在Class Level增加property與method，例如，擴充Date物件，
1 | Date.prototype.shortFormat = function(){ |
2 | return this.getFullYear() +'/'+(this.getMonth()+1)+'/'+ this.getDate(); |
這樣即可傳回「年/月/日」格式日期函式。
Class自己的method
類別方法(class method)，它屬於Class，只能取用class property，不能取用instance property，建立class method是直接為Class設定method，而不使用prototype，例如，
1 | Mail.showSMTP = function(){ |
2 | alert('SMTP:'+Mail.prototype.smtp+' ,\n Port:'+Mail.prototype.port); |
- Mail.showSMTP：建立Mail物件的showSMTP方法
- Mail.prototype.smtp：為了從class method取用class property，你必須下探至prototype，smtp是個Mail class property，所以Mail class method可以取用
- Mail.showSMTP();：直接透過Class名稱Mail來呼叫方法
再回建構式
讓建構式專注在property的建立與初始化
OOP範例：AJAX OOP的寫法
01 | function AjaxRequest() { |
02 | if (window.XMLHttpRequest) { |
04 | this.request = new XMLHttpRequest(); |
08 | } else if (window.ActiveXObject) { |
10 | this.request = new ActiveXObject("Microsoft.XMLHTTP"); |
16 | if (this.request == null) |
17 | alert("建立Ajax物件錯誤.\n" + "細節:" + e.message); |
01 | AjaxRequest.prototype.send = function(type, url, handler, postDataType, postData) { |
04 | if (this.request != null) { |
07 | url += "?dummy=" + new Date().getTime(); |
10 | this.request.onreadystatechange = handler; |
11 | this.request.open(type, url, true); |
12 | if (type.toLowerCase() == "get") { |
13 | this.request.send(null); |
15 | this.request.setRequestHeader("Content-Type", postDataType); |
16 | this.request.send(postData); |
19 | alert("Ajax程式錯誤.\n" + "細節:" + e); |
1 | AjaxRequest.prototype.getReadyState = function() { |
2 | return this.request.readyState; |
1 | AjaxRequest.prototype.getStatus = function() { |
2 | return this.request.status; |
1 | AjaxRequest.prototype.getResponseText = function() { |
2 | return this.request.responseText; |
1 | AjaxRequest.prototype.getResponseXML = function() { |
2 | return this.request.responseXML; |
宣告AjaxRequest物件，
1 | var ajax = new AjaxRequest(); |
