javascript必知必會：面象對象編程

標籤：

面象對象編程技術的核心理念：封裝、繼承、多態；在一些主流的進階程式設計語言中，比 如：C#,VB.NET,JAVA,PHP等都是很容易實現的，而如果要在javascript中實現面象對象編程，可就不那麼直接和容易了，因為 javascript並不是物件導向的語言，所以我們只能通過javascript的一些特性，比如：閉包、原型鏈等來類比出物件導向編程，我認為這些是 作為熟練掌握與靈活運用javascript的基礎，園子裡已有很多的javascript高手對於這方面都有介紹與分析，而我僅以作為一個項目負責人 （獨立設計與開發WEB前端與後端）的視角來重新理解javascript物件導向要點。

既然是物件導向，首先我們要知道如何建立一個對象，以下列出了建立對象的幾種常見方法：

A.直接建立一個對象執行個體：

12345678910111213141516

//直接執行個體化一個對象var Person1 = { Name: "夢在旅途", Age: 29, Sex: "男", Height: 178 }; alert(Person1.Name); var Person2 = new Object();Person2.Name = "夢在旅途";Person2.Age = 29;Person2.Sex = "男";Person2.Height = 178;  alert(Person2.Name); //這個是上面的簡寫var Person3 = new Object({ Name: "夢在旅途", Age: 29, Sex: "男", Height: 178 });alert(Person3.Name);

優點：直接建立一個對象，無需提前定義類型；

缺點：無法實現複用；

B.先定義後執行個體化對象:

12345678910

//先定義類，再執行個體化成對象function Person4(n,a,s,h) {    this.Name = n;    this.Age = a;    this.Sex = s;    this.Height = h;} var p4 = new Person4("夢在旅途", 29, "男", 178);alert(p4.Age);

優點：類似物件導向程式設計語言的建構函式，容易理解，且定義後可通過new關鍵字執行個體化多個對象，實現複用。

缺點：需先定義後才能執行個體化；

綜上所述，建議採用B方法來建立對象。

實現封裝，即只暴露公用方法與公用屬性，隱藏實現細節（私人方法、屬性）

123456789101112131415161718192021222324252627282930

function Person5(n, a, s, h) {     //公用屬性    this.Name = n;    this.Age = a;    this.Sex = s;    this.Height = h;         //公用方法    this.AfterYear = function (count) {        updateAge(count);        alert(_currentYear +"後，我已經：" + this.Age +"歲了！");    };     this.Say = function () {        alert("我的個人資訊－－> Name: "+ this.Name+", Age: "+ this.Age +", Sex: "+ this.Sex +", Height:" + this.Height);    }     //私人屬性與方法    var _self = this;    var _currentYear = 2015;    function updateAge(count) {        _currentYear += count;        _self.Age += count;    };} var p5 = new Person5("夢在旅途", 29, "男", 178);p5.AfterYear(10);p5.AfterYear(25);

利用原型鏈實現繼承，即一個對象包含另一個對象的所有公用屬性與方法，實現繼承的方法有很多，我覺得採用如下形式來類比繼承更符合物件導向的思維：

123456789101112131415

function SoftEngineer(n, a, s, h, lang) {    Person5.call(this, n, a, s, h);//將Person5的所有屬性與方法包含到SoftEngineer中，從而實現繼承    this.Lang = lang;    this.SayCode = function () {        alert("我是一名軟體工程師，我會" + this.Lang + "程式設計語言！");    }     this.Working = function () { };//空方法，類似物件導向中的虛方法} SoftEngineer.prototype = new Person5(); //將SoftEngineer的原型指定Person5的執行個體 var softengr = new SoftEngineer("夢在旅途", 29, "男", 178, "javascript");softengr.Say();softengr.SayCode();

利用原型鏈實現多態，即基於同一個方法簽名在不同的子類中表現的形式不同：

123456789101112131415161718192021222324

function WebSoftEngineer(n, a, s, h, lang) {    SoftEngineer.apply(this, [n, a, s, h, lang]);    this.Working = function () {        alert("我是網頁工程師，從事網頁開發設計工作！");    };}; WebSoftEngineer.prototype = new SoftEngineer(); function AppSoftEngineer(n, a, s, h, lang) {    SoftEngineer.apply(this, [n, a, s, h, lang]);    this.Working = function () {        alert("我是應用工程師，從事用戶端應用程式開發設計工作！");    };};AppSoftEngineer.prototype = new SoftEngineer(); var webengr = new WebSoftEngineer("夢在旅途", 29, "男", 178, "javascript");webengr.Say();webengr.Working(); var appengr = new AppSoftEngineer("夢在旅途", 29, "男", 178, "c#");appengr.Say();appengr.Working();

javascript必知必會：面象對象編程