關於javascript面向對象編程

今天懷着忐忑的心情寫下這篇文章，由於這畢竟是我第一篇真正意義上的技術文章，鞏固知識的同時，但願能夠給閱讀的人帶來收穫，就很知足了。因此讓咱們趕忙切入正題，一塊兒來看看關於Java腳本的面向對象編程。

若是你沒什麼問題的看到這裏，我會有一絲淡淡的憂傷，由於JavaScript就是JavaScript，和Java沒半毛錢的關係，若是有的話，那也就有0.1分錢的關係，是的，就0.1分錢！想起幾個月前我偶然看到 Johnhax 的 ppt ，看完以後，我發現我周圍的世界和之前不那麼同樣了，沒錯，ppt改變人生的故事發生在了個人身上，今後我對JavaScript愛的更加深沉，哈哈哈......

華麗麗的分割線

---

若是你還不熟悉原型鏈和參數this的綁定機制，建議你花一些時間瞭解一下它們。

如今讓咱們走進｀JavaScript｀面向對象編程的世界，那麼什麼是面向對象編程呢？

面向對象程序設計（英語：Object-oriented programming，縮寫：OOP）是種具備對象概念的程序編程範型，同時也是一種程序開發的方法。它可能包含數據、屬性、代碼與方法。對象則指的是類的實例。它將對象做爲程序的基本單元，將程序和數據封裝其中，以提升軟件的重用性、靈活性和擴展性，對象裏的程序能夠訪問及常常修改對象相關連的數據。在面向對象程序編程裏，計算機程序會被設計成彼此相關的對象(from wiki)

wiki描述好抽象，不想看了，那究竟什麼是面向對象呢？下面讓咱們來看一個例子，quoniammm同窗很愛玩遊戲，有一天他想設計一款簡單的遊戲打發時間，叫究極進化白金版的會飛的小鳥(改良版的flappy bird),遊戲中多了不少不一樣屬性的管道來阻止小鳥的前進。有紅色的、藍色的、紫色的、會噴火的、會噴水的、能夠上下移動的、快速的、慢速的......各類各樣的水管，因而quoniammm同窗爲每一個水管寫了一個函數，還不錯，遊戲能夠正常運行。玩了幾回後，quoniammm同窗把遊戲放在了一邊。幾周後，quoniammm同窗又把這個遊戲拿出來玩，發現那個快速移動的藍色的會噴火的管子好難飛過去，手殘的他不想再受虐了，決定修改一下這個fastmoveblueFirePump函數，但是打開代碼，他一臉懵逼，有如此多類似的函數，一大堆代碼，好暈，做爲一個有原則的人，他也不想被代碼虐了，所以他決定重構這段代碼了，剛好最近學習了面向對象，這是命運的決定讓quoniammm同窗用面向對象的思想來重構這段代碼。

因而他寫了一個 Pump 函數，這個函數有一個 methods 屬性：

var Pump = function(color) {
    var obj = Object.create(Pump.methods);
    obj.color = color || 'green'；
    return obj;
}

Pump.methods = {
    //用來實現點擊水管變色的功能
    draw: function(color) {
        ...
        this.color = color;
        ...
    }
    //......
}

var greenPump = Pump();
var redPump = Pump('red');
var blackPump = Pump('black');

仔細的從上到下閱讀這段代碼，發現這段代碼更加方便的生成了各類各樣不一樣顏色的水管，quoniammm同窗很滿意，代碼量被減小了，但是想到還要構建紅色的噴火函數，藍色的噴水函數......quoniammm同窗有開始鬱悶了，看來重構還得繼續下去。因而quoniammm同窗開始思考，既然 Pump 函數能夠方便的實現製造各類各樣顏色的管子，那麼能夠實現一個 waterPump 函數實現製造能夠噴水的管子，但是噴水的管子也有各類各樣的顏色，怎麼能把 Pump 和 waterPump 聯繫起來呢，讓僅僅調用 waterPump 函數就能夠實現製造各類各樣顏色的噴水管子呢?因而機智的quoniammm同窗實現了下面的代碼:

var waterPump = function(color) {
    var obj = Pump(color);
    obj.water = function() { //... };
    return obj;
}
//製造出了紅色的噴水管子
var redwaterPump = waterPump('red');

寫完這段代碼後，quoniammm同窗又花了半天時間按照上面的思路重構了整個遊戲代碼，下降了那個讓他惱火的快速移動的藍色的會噴火的管子的難度，因而他又能夠愉快地玩耍了，打發這使人絕望的無聊時光。

文章寫到這裏，quoniammm同窗去睡覺了，因此接結束了嗎？固然尚未，還記得以前我提到的原型和參數 this 的綁定機制，這些都是 javascript 的特性。因此下面讓咱們用這些特性從新寫一下上面實現的函數，看一下更原汁原味的 javascript 面向對象編程。

var Pump = function(color) {
    this.color = color || 'green';
}
Pump.prototype.draw = function(color) {
    ...
    this.color = color;
    ...
}
var greenPump = new Pump();
var redPump = new Pump('red');
var blackPump = new Pump('black');

//function waterPump
var waterPump = function(color) {
    Pump.call(this, color);
}  
waterPump.prototype = Object.create(Pump.prototype);
waterPump.prototype.water = funciton() { //... }
var redwaterPump = new waterPump('red');

文章到這裏已接近尾聲，今天咱們簡單的瞭解了 javascript 的面向對象編程，最後用比較官方的話總結一下，並提出一些問題供你們思考，但願對你們能有所幫助。

今天咱們實現了一個父類函數 Pump，有 color 屬性和 draw 方法，並實現了繼承父類 Pump 的子類函數 waterPump，它自身實現了一個 water 方法。

Q&A:

waterPump.prototype = Object.create(Pump.prototype) 這段代碼咱們也能夠用 Object.setPrototype(waterPump.prototype, Pump.prototype) 替換，二者有什麼區別呢？