關于javascript面向對象編程

Enlightenment 發布于2019-08-22 10:40 / 701人閱讀

摘要：所以讓我們趕緊切入正題，一起來看看關于腳本的面向對象編程。所以下面讓我們用這些特性重新寫一下上面實現的函數，看一下更原汁原味的面向對象編程。

今天懷著忐忑的心情寫下這篇文章，因為這畢竟是我第一篇真正意義上的技術文章，鞏固知識的同時，希望可以給閱讀的人帶來收獲，就很滿足了。所以讓我們趕緊切入正題，一起來看看關于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) 替換，兩者有什么區別呢？

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/91048.html

2017年最好的javascript 書籍

摘要：請記住，這些書中的一些可能不是最新的，但概念和基礎仍應適用。是最好的老師之一。的秘密由部分組成。在你完成這些書后，查看書籍和最好的本土書籍。我看過三本，第1本，第二本，第四本。第一本買的的實體書，其他兩本看的是電子書。第一本是大名鼎鼎老道寫的，書很薄，但是非常經典。javascirpt忍者秘籍是jquery的作者寫的，也是非常經典。you dont kown js系列也是非常好?？戳?..

mingzhong 2019-08-20 15:05 評論0 收藏0
JS程序

摘要：設計模式是以面向對象編程為基礎的，的面向對象編程和傳統的的面向對象編程有些差別，這讓我一開始接觸的時候感到十分痛苦，但是這只能靠自己慢慢積累慢慢思考。想繼續了解設計模式必須要先搞懂面向對象編程，否則只會讓你自己更痛苦。 JavaScript 中的構造函數學習總結。知識只有分享才有存在的意義。是時候替換你的 for 循環大法了~ 《小分享》JavaScript中數組的那些迭代方法~ ...

melody_lql 2019-08-22 11:22 評論0 收藏0
面向對象的 JavaScript

摘要：是完全的面向對象語言，它們通過類的形式組織函數和變量，使之不能脫離對象存在。而在基于原型的面向對象方式中，對象則是依靠構造器利用原型構造出來的。 JavaScript 函數式腳本語言特性以及其看似隨意的編寫風格，導致長期以來人們對這一門語言的誤解，即認為 JavaScript 不是一門面向對象的語言，或者只是部分具備一些面向對象的特征。本文將回歸面向對象本意，從對語言感悟的角度闡述為什...

novo 2019-08-21 10:49 評論0 收藏0
SegmentFault 技術周刊 Vol.32 - 七夕將至，你的“對象”還好嗎？

摘要：很多情況下，通常一個人類，即創建了一個具體的對象。對象就是數據，對象本身不包含方法。類是相似對象的描述，稱為類的定義，是該類對象的藍圖或原型。在中，對象通過對類的實體化形成的對象。一類的對象抽取出來。注意中，對象一定是通過類的實例化來的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 馬上就要到七夕了，離年底老媽老爸...

Lyux 2019-06-28 13:32 評論0 收藏0
SegmentFault 技術周刊 Vol.32 - 七夕將至，你的“對象”還好嗎？

摘要：很多情況下，通常一個人類，即創建了一個具體的對象。對象就是數據，對象本身不包含方法。類是相似對象的描述，稱為類的定義，是該類對象的藍圖或原型。在中，對象通過對類的實體化形成的對象。一類的對象抽取出來。注意中，對象一定是通過類的實例化來的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 馬上就要到七夕了，離年底老媽老爸...

AaronYuan 2019-08-20 18:55 評論0 收藏0