close

推薦一下，如果有客倌也想好好仔細的研究一下JavaScript的物件導向，可以參考這兩篇文章哦!

這兩篇文章真的寫的很好，完全把JavaScript的物件導向的理論和應用作一個徹底的分析!

JavaScript 物件導向程式設計－封裝

JavaScript 物件導向程式設計－繼承與多型


以下就針對在物件導向的世界裡，JavaScript所提供的一些方法範例來做說明：

1. 「變數定義」

2.「變數類型」

3.「變數作用域(範圍鏈)」

4.封裝

    1).「私有物件成員」

    2).「公有物件成員」

    3).「公有類別成員」

 

幾個基本概念

變數定義

在 JavaScript 語言中，是通過 var 關鍵字來定義變數的。

但是如果我們直接給一個沒有使用 var 定義的變數賦值，那麼這個變數就會成為全局變數。

一般情況下，我們應該避免使用沒有用 var 定義的變數，主要原因是它會影響程式的執行效率，因為存取全局變數速度比局部變數要慢得多。

但是這種用法可以保證我們的變數一定是全局變數。

另外，為了「保證速度」，我們在使用全局變數時，可以經由「 var 定義一個局部變數」，然後將全局變數賦予之，由此可以得到一個全局變數的局部引用。

變數類型

沒有定義的變數，類型為 undefined。

變數的值可以是函數。

函數在 JavaScript 中可以充當類別的角色。


變數作用域(範圍鏈)

「變數作用域(範圍鏈)」是指「變數生存週期的有效範圍」。(請參考大爺的另一篇文章：Javascript 函數整理裡面會有提到關於範圍鏈的一些概念。)

單純用 { } 建立的區塊「不能新增作用域」。

with 將它包含的對象作用域添加到當前作用域鏈(範圍鏈)中，但 with 不創建新的作用域(範圍鏈)。with 塊結束後，會將對象作用域從當前作用域鏈(範圍鏈)中刪除。

try-catch 中，catch 的錯誤對象只在 catch 塊中有效，但 catch 塊中定義的變數屬於當前作用域(範圍鏈)。

其它如 if、for、for-in、while、do-while、switch 等控制語法建立的區塊也不能建立新的作用域(範圍鏈)。

用 function 建立的函數，會新增一個新的作用域(範圍鏈)添加到當前作用域(範圍鏈)中。 


封裝

下面我們就來討論具體的封裝。首先說一下大家最熟悉的幾種封裝：私有物件成員、公有物件成員和公有靜態成員。最後會討論一下大家所不熟悉的「私有靜態成員」和「靜態類別」的封裝辦法。因為下面要討論的是物件導向程式，所有當函數作為類別來定義和使用時，我們暫且將其成為類別。


宣告「私有」物件成員

範例1，宣告私有物件成員範例，

  1. //因為沒有加上var，所以是全域的物件
  2. class1 = function(){
  3.     //宣告私有物件變數
  4.     var p_first=1;
  5.     var p_second=2;
  6.     //宣告私有物件方法(一)，匿名方法
  7.     function get_p_first(){
  8.         alert("p_first =" + p_first);
  9.     }
  10.     //宣告私有物件方法(二)，將方法指定給一個變數
  11.     var get_p_second = function(){
  12.         alert("p_second = " + p_second);
  13.     }
  14.     //建構子
  15.     {
  16.         alert("init class");
  17.         get_p_first();
  18.         get_p_second();
  19.     }
  20. }
  21. //新增我們定義的物件變數
  22. var obj1 = new class1();
  23. //無法存取物件成員和方法，以下會出現執行錯誤訊息
  24. alert(o.p_frist);
  25. o.get_p_first();

 

(一).這邊可以看到宣告物件的方法有兩種方式，一種是「匿名方法」，另一種則是「將匿名方法指定給一個私有變數」，不論是方式(一)，還是方式(二)，這兩種宣告的方式都差不多，都是屬於私有方法，無法從外部來存取，但都可以存取物件類的私有成員。不過第二種方法會比較靈活。

(二).這邊要注意的是「建構子必須放在最後面」，因為JavaScript是「解釋型語言」，所以程式是「由上到下的執行」。，如果建構子程式碼放在其它方法的定義前面，則執行到時會找不到要引用的方法，就會發生執行上的錯誤。

(三).在上面的範例程式可以看到我們用「大括號將建構子包圍起來」，不過這麼做其實「也是不會改變程式的作用域(範圍鏈)」，也就是說如果在這個括孤裡面定義變數，也將會是類別的私有成員，而不是區域變數，如果我們想要定義區域變數，則就要換個方式來定義建構子了：

 

範例2，修改建構子的宣告方式

  1. //這邊一樣沒有加上var，所以是全域的物件
  2. class1 = function(){
  3.     //宣告私有物件變數
  4.     var p_first=1;
  5.     var p_second=2;


  8.     //宣告私有物件方法(一)，匿名方法
  9.     function get_p_first(){
  10.         alert("p_first =" + p_first);
  11.     }

  13.     //宣告私有物件方法(二)，將方法指定給一個變數
  14.     var get_p_second = function(){
  15.         alert("p_second = " + p_second);
  16.     }


  19.     //這邊就是我們要修改的建構子，將建構子宣告成私有的匿名方法
  20.    function constructor(){
  21.         alert("init class");
  22.         get_p_first();
  23.         get_p_second();
  24.     }
  25.       
  26.      constructor();//然後再呼叫建構子，記得建構子得在程式的最後面呼叫才不會出錯
  27. }

  29. //新增我們定義的物件變數
  30. var obj1 = new class1();

  32. //無法存取物件成員和方法，以下會出現執行錯誤訊息
  33. alert(o.p_frist);
  34. o.get_p_first();


我們可以看到，在這個範例中，大爺將原本的「建構子的區塊範圍」改成用「方法」來定義，並且在程式的最後面呼這個建構子方法。

 

 

 

宣告「公有」物件成員


範例3：宣告公有的物件成員 - 1

  1. class3 = function() {
  2.     // private fields
  3.     var m_first = 1;
  4.     var m_second = 2;
  5.     // private methods
  6.     function method1() {
  7.         alert("私有變數 m_first =" + m_first);
  8.     }
  9.     var method2 = function() {
  10.         alert("私有變數 m_second =" + m_second);
  11.     }
  12.     // public fields
  13.     this.first = "first";
  14.     this.second = ['s','e','c','o','n','d'];
  15.     // public methods
  16.     this.method1 = method2; //呼叫私有方法 method2
  17.     this.method2 = function() {
  18.         alert("公有方法 method2 =" + this.second);
  19.     }
  20.     // constructor
  21.     {
  22.         method1();
  23.         method2();
  24.     }
  25. }
  26. //宣告公有物件方法的另一種方式
  27. class3.prototype.method3 = function() {
  28.     alert("公有方法 method3 =" + this.first);
  29. }
  30. var o = new class3(); 
  31. o.method1(); 
  32. o.method2();
  33. o.method3();
  34. alert(o.first);


上面的這個範例是參考JavaScript 物件導向程式設計－封裝這個網站裡面的範例，並且加上大爺自已的註釋。讓我們好好來研究一下這個程式吧。
(一).要宣告公有成員有兩種方式：一種方式是在「類別中」使用「this」這個關鍵子來宣告( this.memberName)，如果值是「函數之外」的類型，那就是個「公有物件變數」，如果值是「函數類型」，那就是「公有物件方法」。另外一種方式是在物件的宣告外面使用「類別名稱.prototype(className.prototype)」的方式來宣告( className.prototype.memberName) ，可宣告的類型和 this.memberName 是相同的。

 (二).到底是利用 this 方式定義好呢，還是利用prototype 方式定義好呢？其實它們各有各的用途，它們之間不是誰比誰更好的關係。在某些情況下，我們只能用其中特定的一種方式來定義公有物件成員，而不能夠使用另一種方式。原因在於它們實際上是有區別的：

1、「prototype 方式」只應該在「類別外定義」。「this 方式」只能在「類別內定義」。

2、「prototype 方式」如果在「類別內定義」時，則在「存取私有物件成員」時，總是會「存取最後一個物件變數中的私有物件成員」。

3、「prototype 方式」定義的「公有物件成員」是建立在「類別的原型」上面的成員。而「this 方式」定義的「公有物件成員」，是「直接建立在類別的物件導向上的成員」。

基於前兩點區別，我們可以得到這樣的結論：如果要在「公有物件方法中」存取「私有的物件成員」，那麼必須用 「this 方式」來定義。

關於第三點區別，我們後面在討論繼承時再對它進行更深入的剖析。這裡只要知道有這個區別就可以了。

 

(三).我們還會發現，公有物件成員和私有物件成員「名字是可以相同的」，這樣不會有衝突嗎？

當然不會。原因在於它們的「存取方式不同」，公有物件成員在類別中存取時，必須要使用「關鍵子this.」來引用。而「私有物件成員」在類別中存取時，不使用也不能夠使用關鍵字 this. 來存取。而在「類別外」存取時，只有「公有成員」是可以用「類別的物件變數」來存取的，而私有成員是被無法存取。

 

範例3：宣告公有的物件成員 -2

  1. //公有成員
  2. class2 = function(){
  3.     //宣告私有物件變數
  4.     var pri_first=1;
  5.     var pri_second=2;

  7.     //宣告私有物件方法(一)，匿名方法
  8.     function get_pri_first(){
  9.         alert("pri_first = " + pri_first);
  10.     }

  12.     //宣告私有物件方法(二)，將方法指定給一個變數
  13.     var get_pri_second = function(){
  14.         alert("pri_second = " + pri_second);
  15.     }

  17.     //宣告公有物件變數
  18.     this.pub_first = "first public variable";
  19.     this.pub_second = ['s','e','c','o','n','d'];

  21.     //宣告公有物件方法
  22.     this.pub_first_method = get_pri_first; //呼叫匿名私有方法get_pri_first
  23.     this.pub_second_method = get_pri_second //呼叫私有方法變數get_pri_first

  25.     this.pub_third_method = function(){
  26.      alert("公有方法 pub_third_method = " + this.pub_second);
  27.     }

  29.     //宣告一個名叫建構子的方法
  30.     function constructor(){
  31.         alert("init class");
  32.         get_pri_first();
  33.         get_pri_second();
  34.     }

  36.     //呼叫建構子
  37.     constructor();
  38. }

  40. //宣告公有物件方法的另一種方式
  41. class2.prototype.pub_forth_method = function() {
  42.     alert("公有方法 pub_forth_method =" + this.pub_first);
  43. }

  45. //新增定義的物件變數
  46. var class2obj=new class2();//新增物件
  47. class2obj.pub_first_method();//呼叫公有方法
  48. class2obj.pub_second_method();//呼叫公有方法
  49. class2obj.pub_third_method();//呼叫公有方法
  50. class2obj.pub_forth_method();//呼叫公有方法
  51. class2obj.this.pub_first;//呼叫公有變數

  53. //以下會發生錯誤
  54. class2obj.pri_first//呼叫私有變數，發生錯誤
  55. class2obj.this.pri_first;//呼叫私有變數，發生錯誤


這個例子和上面的那個例子大同小異，大爺只是將變數換了名稱，其餘的大致相同。

 

 

宣告公有「靜態」成員

 

範例4：宣告公有「靜態」成員

  1. class4 = function() {
  2.     //private fields
  3.     var m_first = 1;
  4.     var m_second = 2;
  5.     // private methods
  6.     function method1() {
  7.         alert(m_first);
  8.     }
  9.     var method2 = function() {
  10.         alert(m_second);
  11.     }
  12.     //constructor
  13.     {
  14.         method1();
  15.         method2();
  16.     }
  17. }

  19. //宣告公有靜態成員
  20. class4.field1 = 1; //宣告公有靜態變數

  22. //宣告公有靜態方法
  23. class4.method1 = function() {
  24.     alert(class4.field1);
  25. }

  27. class4.method1(); //呼叫公有靜態方法，不需新增物件就可直接引用


上面的這個範例是參考JavaScript 物件導向程式設計－封裝這個網站裡面的範例，並且加上大爺自已的註釋。讓我們好好來研究一下這個程式吧。

這個例子和上面的 class1 很像。不同的是在範例的後面，我們定義了一個「靜態變數」和「靜態方法」。

定義靜態成員的方式就是「類別名稱.成員名稱」( className.memberName )來宣告。

這裡定義的「靜態變數」和「靜態方法」都是可以直接使用「類別名稱」引用來存取的(在這個範範例就是class4)，而不需要建立物件。因此它們是公有靜態成員。

不過有點要記住，千萬不要將「公有靜態成員」定義在「它的類別內部」，否則會得到「非預期的結果」。我們可以看下面這個例子：

  1. class4 = function() {
  2.     // private fields
  3.     var m_first = 1;
  4.     var m_second = 2;
  6.     var s_second = 2;
  8.     // private methods
  9.     function method1() {
  10.         alert(m_first);
  11.     }
  12.     var method2 = function() {
  13.         alert(m_second);
  14.     }
  15.     class4.method1 = function() {
  16.         s_second++;
  17.     }
  18.     class4.method2 = function() {
  19.         alert(s_second);
  20.     }
  21. }
  22. var o1 = new class4();
  23. class4.method2();          // 顯示s_second=2
  24. class4.method1();          //s_second + 1
  25. class4.method2();          //s_second = 3
  26. var o2 = new class4();
  27. class4.method2();          //  顯示s_second 依然等於 2 ，並沒有依照預期的等於3
  28. class4.method1();          //s_second + 1
  29. class4.method2();          //s_second = 3


上面的這個範例是參考JavaScript 物件導向程式設計－封裝這個網站裡面的範例，並且加上大爺自已的註釋。讓我們好好來研究一下這個程式吧。

這個例子中，我們期望 s_second 能夠扮演一個「私有靜態成員」的角色，但是輸出結果卻不是我們所期望的。我們會發現 s_second 實際上是 class4 的一個「私有物件成員」，而不是「私有靜態成員」。而 class4 的 method1 和 method2 所存取的私有成員總是類別的最後一個物件變數中的這個私有物件成員。

那到底問題是出在哪呢？

問題出在每次經由 new class4() 建立一個物件時，class4 中的所有程式都會重新執行，因此，s_second 被重置了，並成為新的物件中的一個「私有物件成員」，而不是我們預期的「私有靜態成員」。而 class4.method1 和 class4.method2 也被重新定義了，而這個定義也將它們的變數作用域(範圍鏈)切換到了最後一個變數上來。這與把經由prototype 方式建立的公有物件方法定義在類別的內部而產生的錯誤是一樣的。

所以，一定不要將「公有靜態成員」定義在它所在的類別的內部！也不要把經由「prototype 方式」建立的「公有物件方法」定義在類別的內部！

 

私有靜態成員 (closure)

(請參考大爺的另一篇文章：Javascript 函數整理裡面會有提到關於closure的一些概念。)

那要如何定義一個私有靜態成員呢？

前面在基本概念裡我們已經清楚了，只有用「function 建立函數」，才能建立一個「新的作用域(範圍鏈)」，而要建立私有成員（不論是靜態成員，還是實例成員），都需要經由「建立新的作用域(範圍鏈)才能夠起到資料隱藏的目的」。下面改採用的方法就是基於這一點來實現的。

實現私有靜態成員是經由「建立一個匿名函數函數」來創建一個新的作用域(範圍鏈)來實現的。

通常我們使用匿名函數時都是將它指定值給一個變數，然後經由這個變數引用該匿名函數。這種情況下，該匿名函數可以被反覆引用或者作為類別去建立變數。

而在這裡，我們建立的匿名函數不指定給任何變數，在它建立後立即執行，或者立即實例化為一個物件，並且該物件也不指定值給任何變數，這種情況下，該函數本身或者它實例化後的物件都不能夠被再次存取，因此它唯一的作用就是建立了一個新的作用域(範圍鏈)，並且隔離了它內部的所有區域變數和函數。因此，這些區域變數和函數就成了我們所需要的「私有靜態成員」。而這個「立即執行的匿名函數或者立即實例化的匿名函數」我們稱它為「靜態封裝環境」。


下面我們先來看經由直接引用匿名函數方式來建立擁有私有靜態成員的類別的例子：

 

  1. class5 = (function() {
  2.   // private static fields
  3.     var s_first = 1;
  4.     var s_second = 2;

  6.    // private static methods
  7.     function s_method1() {
  8.         s_first++;
  9.     }

  11.     var s_second = 2;    

  13.     function constructor() {
  14.         // private fields
  15.         var m_first = 1;
  16.         var m_second = 2;
  17.         // private methods
  18.         function method1() {
  19.             alert(m_first);
  20.         }
  21.         var method2 = function() {
  22.             alert(m_second);
  23.         }

  25.         // public fields
  26.         this.first = "first";
  27.         this.second = ['s','e','c','o','n','d'];

  29.         // public methods
  30.         this.method1 = function() {
  31.             s_second--;
  32.         }
  33.         this.method2 = function() {
  34.             alert(this.second); 
  35.         }

  37.         //類別建構子，建立物件會先從這裡開始執行
  38.         {
  39.             s_method1();
  40.             this.method1();
  41.         }
  42.     }

  44.     // public static methods
  45.     constructor.method1 = function() {
  46.         s_first++;
  47.         alert(s_first);
  48.     }
  49.     constructor.method2 = function() {
  50.         alert(s_second);
  51.     }
  52.     return constructor;
  53. })();

  55. var o1 = new class5(); //新增物件。 執行建構子 s_first++ 和 s_second-- 。s_first=2 、 s_second=1

  57. class5.method1(); //呼叫公有靜態方法 constructor.method1。 s_first=3
  58. class5.method2(); //呼叫公有靜態方法 constructor.method2。 s_second = 1 
  59. o1.method2(); //呼叫公有方法 method2。 顯示 's','e','c','o','n','d'

  61. var o2 = new class5(); //新增物件。 執行建構子 s_first++ 和 s_second-- 。s_first=5、 s_second=0
  62. class5.method1();  //呼叫公有靜態方法 constructor.method1。 s_first=5
  63. class5.method2();  //呼叫公有靜態方法 constructor.method2。 s_second = 0 
  64. o2.method2(); //呼叫公有方法 method2。 顯示 's','e','c','o','n','d'


上面的這個範例是參考JavaScript 物件導向程式設計－封裝這個網站裡面的範例，並且加上大爺自已的註釋。讓我們好好來研究一下這個程式吧。

這個例子中，經由

  1. (function() {
  2.     ...
  3.     function contructor () {
  4.         ...
  5.     }
  6.     return constructor;
  7. })();

來建立了一個「靜態封裝環境(closure)」，實際的類別是在這個環境中定義的，並且在最後經由「return 語法」將最後的類別(constructor)返回給我們的全局變數 class5，然後我們就可以經由 class5 來引用這個帶有靜態私有成員的類別了。

 

為了區分私有靜態成員和私有實例成員，我們在私有靜態成員前面用了 s_ 前綴，在私有實例成員前面加了 m_ 前綴，這樣避免了重名，因此在對象中總是可以存取私有靜態成員的。

但是這種命名方式不是必須的，只是推薦的，私有靜態成員可以跟私有實例成員同名，在重覆命名的情況下，在「類別建構子」和在「類別中」定義的「物件方法中」存取的都是「私有物件成員」，在「靜態方法（不論是公有靜態方法還是私有靜態方法）」中存取的都是「私有靜態成員」。


這邊要注意以下兩點：

(一).在「類別外(constructor)」並且「在靜態封裝(closure)環境中」經由「prototype 方式」定義的「公有物件方」法存取的是「私有靜態成員」。

(二).在「靜態封裝環境外(closure)」定義的「公有靜態方法」和經由「prototype 方式」定義的「公有物件方法」無法直接存取「私有靜態成員」。

 

另外一種方式經由直接「實例化匿名函數」方式來建立擁有「私有靜態成員」的類別的例子跟上面的例子很相似：

  1. new function() {
  2.     // private static fields
  3.     var s_first = 1;
  4.     var s_second = 2;
  6.     // private static methods
  7.     function s_method1() {
  8.         s_first++;
  9.     }
  10.     var s_second = 2;
  12.     class6 = function() {
  13.         // private fields
  14.         var m_first = 1;
  15.         var m_second = 2;
  17.         // private methods
  18.         function method1() {
  19.             alert(m_first);
  20.         }
  21.         var method2 = function() {
  22.             alert(m_second);
  23.         }
  25.         // public fields
  26.         this.first = "first";
  27.         this.second = ['s','e','c','o','n','d'];
  29.         // public methods
  30.         this.method1 = function() {
  31.             s_second--;
  32.         }
  34.         this.method2 = function() {
  35.             alert(this.second);
  36.         }
  38.         // constructor
  39.         {
  40.             s_method1();
  41.             this.method1();
  42.         }
  43.     }
  44.     // public static methods
  45.     class6.method1 = function() {
  46.         s_first++;
  47.         alert(s_first);
  48.     }
  49.     class6.method2 = function() {
  50.         alert(s_second);
  51.     }
  52. };
  54. var o1 = new class6();
  55. class6.method1();
  56. class6.method2();
  57. o1.method2();
  58. var o2 = new class6();
  59. class6.method1();
  60. class6.method2();
  61. o2.method2();

這個例子的結果跟經由第一種方式創建的例子是相同的。只不過它的靜態封裝環境是這樣的：

  1. new function() {
  2.    ...
  3. };

在這裡，該函數沒有返回值，並且對於 class6 的定義是直接在靜態封裝環境內部經由一個沒有用 var 宣告的變數的方式來實作的。

當然，也完全可以在

  1. (function() {
  2.    ...
  3. })();

這種方式中，不給該函數定義返回值，而直接在靜態封裝環境內部中經由給一個沒有用 var 宣告的變數指定的方式來實作擁有私有靜態成員的類別的定義。

這兩種方式在這裡是相同的。

 

 

靜態類別

所謂的靜態類別，是一種不能夠被實例化，並且「只包含有靜態成員」的類別。

在 JavaScript 中我們經由直接「實例化一個匿名函數的變數」，就可以實現靜態類別了。例如：


  1. class7 = new function() {
  2.     // private static fields
  3.     var s_first = 1;
  4.     var s_second = 2;
  5.     // private static method
  6.     function method1() {
  7.         alert(s_first);
  8.     }
  9.     // public static method
  10.     this.method1 = function() {
  11.         method1();
  12.         alert(s_second);
  13.     }
  14. }
  15. class7.method1();

大家會發現，class7 其實就是個「物件」，只不過這個物件所屬的是「匿名類別」，該類別在建立完 class7 這個物件後，就不能再被使用了。而 class7 不是一個 function，所以不能夠作為一個類別被實例化，因此，這裡它就相當於一個「靜態類別」了。

arrow
arrow
    全站熱搜
    創作者介紹
    創作者 大爺 的頭像
    大爺

    太陽底下沒有新鮮事

    大爺 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄