JavaScript重構（五）：利用原型和閉包，完成組件方法

Java代碼 
var Player = (function(){  
  Player = function(){ //這隻是個空殼  
  throw new Error("Can not instantiate a Player object.");  
};  
Player.MIN_EXTENDED_TIME = 1;  
Player.MAX_EXTENDED_TIME = 3;  
Player._player = false;  
Player.getInstance = function(){  
  if(!Player._player){  
    alert("Init…");  
    Player._player = {  
      _name : name,  
      setName : function(name){  
        this._name = name;  
      },  
      toString : function(name){  
        return "Player: " + this._name;  
      }  
    };  
  }  
  return Player._player;  
};  
return Player; //把修繕完工的Player這個組件方法返回  
})();  
 
//var player = new Player(); //new Player()會拋出異常  
var player1 = Player.getInstance();  
var player2 = Player.getInstance();  
player2.setName("RealPlayer");  
alert(player2.toString()); //輸出RealPlayer 
 終於要定義一個組件方法瞭，利用原型來實現。看看這樣如何：
Java代碼 
function Player(name){  
  Player.MIN_EXTENDED_TIME = 1;  
  Player.MAX_EXTENDED_TIME = 3;  
  this._name = name;  
};  
Player.prototype.setName = function(name){  
  this._name = name;  
};  
Player.prototype.toString = function(){  
  return "Player: " + this._name;  
};  
 
var player = new Player("WindowsMediaPlayer");  
alert(player.toString()); //輸出WindowsMediaPlayer  
player.setName("RealPlayer");  
alert(player.toString()); //輸出RealPlayer  
alert(Player.MAX_EXTENDED_TIME); 
 
恩，有封裝、有常量、也有復寫瞭Object的toString方法，至於繼承之類的事情，咱們後面再說，初看看還不錯。可是這樣的組件方法定義不夠優雅，也不夠直觀，方法都是放在獨立的位置定義的，並沒有和最開始的組件方法放置在一起，如果能像Java那樣定義豈不更好？
 
對瞭，可以用閉包來實現。試試看吧：
Java代碼 
function Player(name){  
  Player.MIN_EXTENDED_TIME = 1;  
  Player.MAX_EXTENDED_TIME = 3;  
  this._name = name;  
  this.setName = function(name){  
    this._name = name;  
  };  
  this.toString = function(){  
    return "Player: " + this._name;  
  };  
};  
 
var player = new Player("WindowsMediaPlayer");  
alert(player.toString()); //輸出WindowsMediaPlayer  
player.setName("RealPlayer");  
alert(player.toString()); //輸出RealPlayer  
alert(Player.MAX_EXTENDED_TIME); 
 
不像Groovy裡面，閉包做瞭很大程度上的強化，包括新的語法的支持；JavaScript的閉包是很簡單的閉包，它沒有特殊的需要額外學習的語法，任意一個function，裡面隻要包含未綁定變量，這些變量是在function所屬的上下文環境中定義的，那麼，這個function就是閉包。順便羅嗦一句，和閉包相反的，不正是不包含任何未綁定變量的函數式代碼嗎？
寫是寫好瞭，可是轉念一想，Player應當隻有一份，它是單例的，最好我也能像Java那樣弄一個單例模式出來 :)，可是事不遂願，我沒有辦法在JavaScript做一個private的構造器，用這種思路去實現單例模式似乎不可行……
怎麼辦？
 
然而天無絕人之路，我控制不瞭你new一個Player的對象，我卻可以控制你new出來的這個Player對象的屬性和行為！當你需要使用你new出來的Player的對象的時候，你發現根本無法完成，或者它隻是一個空殼！真正的東西還是要靠單例中經典的getInstance方法來獲得：
Java代碼 
function Player(){  
  throw new Error("Can not instantiate a Player object.");  
}; //這隻是個空殼  
 
(function(){ //這才是貨真價實的東西  
  Player.MIN_EXTENDED_TIME = 1;  
  Player.MAX_EXTENDED_TIME = 3;  
  Player._player = false;  
  Player.getInstance = function(){  
    if(!Player._player){  
      alert("Init…");  
      Player._player = {  
        _name : name,  
        setName : function(name){  
          this._name = name;  
        },  
        toString : function(name){  
          return "Player: " + this._name;  
        }  
      };  
    }  
    return Player._player;  
  };  
})();  
 
//var player = new Player(); //new Player()會拋出異常  
var player1 = Player.getInstance();  
var player2 = Player.getInstance();  
player2.setName("RealPlayer");  
alert(player2.toString()); //輸出RealPlayer 
 
好，真不錯，單例模式在JavaScript下也成功實施瞭——你要膽敢new Player();就會拋出一個異常，這樣什麼也得不到，隻有用getInstance方法得到的對象才是真真正正的Player對象。上面的代碼整個執行的結果，隻彈出瞭一次"Init…"的對話框，說明真正的“構造器邏輯”隻調用瞭一次。
 
都做到這份上瞭，依然有小小的遺憾，Player的定義依然被拆分成瞭兩部分，一部分定義空殼，一部分是一個匿名函數來定義Player的常量和getInstance方法。這兩部分就不能合二為一麼？
能。隻需要用到一個小小的匿名函數，如果耐心從頭看到這裡，也一定能理解：
 
到此，終於如釋重負，深入理解JavaScript面向對象，用好原型和閉包這兩把鋒利的武器，才能寫出優秀的前端代碼來。有一些同事私下和我交流，後面我盡量貼簡潔的代碼，希望有面向對象基礎和JavaScript基礎的同事都能有所收獲。

作者“四火的BLOG”