小白的前端練級之路——面向對象編程（封裝）

大家晚上好，士心昨天被公司的項目弄得很是頭疼，加班到有點晚，所以昨天晚上沒有更新，實在是不好意思了。好了，廢話不多說，每天學點小前端，走向人生大前端，繼續和士心一起來學習前端知識吧。前兩篇我們講到了函數的幾種書寫方式以及鏈式調用怎麼實現的，今天我們來一起學習學習面向對象編程吧（注：心士只是把看到的和自己的理解寫出來，歡迎大神批評指教）。

要學習面向對象編程，首先要了解什麼是面向對象編程？為什麼要使用面向對象編程？以及面向對象和麵向過程有什麼區別？這些概念在網上隨便一搜就是一大堆，士心就不再囉嗦概念性的東西了，舉個小例子吧，希望能用通俗的語言幫助還不是很瞭解面向對象的朋友加深一點點認識，大神請略過。士心是個250K純屌絲，請不起家政，所以什麼洗衣服啊，疊被啊，打掃衛生啊，都需要自己去完成，然而，突然有一天士心人品大暴發，買彩票中了5000萬，士心瞬間走上了人生巔峰，左手一個諾基亞右手一個摩托羅拉，還要請一個漂亮的小妹妹來做家務，有木有？然後洗衣服，疊被，打掃衛生什麼的就不需要士心自己來做了，只要向漂亮小妹發個指令，她就可以幫我做那些本來需要我自己來做的事情----屌絲士心什麼事都要自己做，這個就是面向過程，土豪士 心向漂亮小妹發個指令，漂亮小妹就按照我們的指令去完成我們想要完成的工作，這個漂亮小妹就可以看作是一個對象，我們只要通過這個對象就可以完成各種工作，但是我們不需要去理會漂亮小妹是如何完成工作的，這就是面向對象。面向對象和麵向過程的區別也就出來了，面向過程你需要去重複很多複雜的工作，而面向對象，你只需要操作對象，向對象發送指令，所有複雜的工作則交給對象去完成。到這，大家應該就基本瞭解什麼是面象對象了。瞭解了什麼是面向對象之後，我們就要學習如何去封裝對象了，學過java的朋友都知道，java有 封裝，繼承，多態幾個特性，JavaScript中可以封裝和繼承，雖然js中沒有多態這一說，但是我們也可以用相似的思路去實現它。

一.封裝

在JavaScript中創建一個類很容易，首先，聲明一個函數 保存在一個變量裡，按編程習慣，一般將這個代表類的變量名首字母大寫，然後在這個函數的內部通過對 this （函數內部自帶的一個變量，用於指向當前對象）變量添加屬性或者方法來實現對類添加 屬性或者方法。下面直接上代碼

我們這裡封裝了Book這個類，然後給Book類加上了id,bookname,price三個屬性。當然，我們也可以用到前兩集提到的原型（類也是一個對象，所以也有原型prototype）上添加屬性和方法，有兩種方式，一種是：

另一種是：

兩種方式不能混用，前面兩集已經說過了，這裡就不再贅述。這樣，我們就將所需要的方法和屬性都 封裝在我們抽象的Book類裡面了，當使用功能方法時，我們就可以用new關鍵字來實例化對象，使用實例化的屬性或者方法時，可以通過點語法訪問，就像這樣（嘿嘿，自戀一下）

到這裡，可能有的初學的朋友不是很理解通過 this 添加 的屬性和方法 與 在prototype 中添加 的屬性和方法有什麼區別？士心在這裡說明一下，通過 this 添加的屬性，方法是在當前對象上添加的，然而JavaScript是一種基於原型prototype的語言，所以每創建 一個對象，它都有一個原型prototype用於指向其繼承的屬性，方法。這樣通過prototype繼承的方法並不是對象自身的，所以在使用這些方法時，需要通過prototype一級一級查找來得到，這樣你就會發現通過 this 定義的屬性或者方法是對象自身擁有的，所以我們每次通過類創建 一個新對象的時候，this 指向的屬性和方法都會得到相應的創建 ，而通過prototype繼承的屬性或者方法是每個對象通過prototype訪問到，是所有對象共有的，所以我們每次通過創建 一個新對象時這些屬性和方法不會再次創建 。

此外，在Java對象中還有私有屬性，私有方法，共有屬性，共有方法，保護方法等等，這些在JavaScript中雖然沒有顯性的存在，但是我們可以通過一些靈活的技巧來實現它。具體怎麼來實現呢？由於JavaScript的函數 級作用域，聲明在函數內部的變量以及方法在外界是方問到的，通過此特性即可創建 類的私有變量以及私有方法，然而在函數 內部通過 this 創建 的屬性和方法，在類創建對象時，每個對象自身都擁有一份並且可以在外部訪問到，因此通過 this 創建的屬性可看作是對象的共有屬性和對象共有方法，而通過 this 創建的方法，不但可以訪問這些對象的共有屬性和共有方法，而且還能方問到類或者對象自身的私有屬性和私有方法，由於這些方法權利比較大，所以我們又將它看作特權方法。在對象創建時通過使用這些特權方法，我們可以初始化實例 對象的一些屬性，因此這些在創建 對象時調用的特權方法還可以看作是類的構造器，就象下面這樣：

這樣，通過 JavaScript 函數級作用域 的特徵來實現在函數 內部創建 ，外界就訪問不到的私有化變量和私有方法，通過new 關鍵字實例 化對象時，由於對類執行一次，所以類的內部 this 上定義的屬性和方法自然就可以複製 到新創建 的對象上，成為對象公有的屬性和方法，而其中的一些方法能訪問到的類的私有屬性和方法，就像明星的家人比外界對明星瞭解的多是一個道理，而我們通過new關鍵字實例化對象時，執行了一遍類的函數，所以裡面通過調用特權方法自然就可以初始化對象的一些屬性了。

通過 new 關鍵字創建新對象時，由於類外面通過點語法添加的屬性和方法沒有執行到，所以新創建 的對象中無法獲取他們，但是可以通過類來使用，因此在類外面通過點語法定義的屬性和方法可以看作類的靜態共有屬性和類的靜態共有方法，而類通過prototype 創建的屬性或者方法在類實例對象中是可以通過 this 訪問到的，所以我們將 prototype 對象中的屬性和方法看作是共有屬性和共有方法。

通過 new 關鍵字創建的對象實質是對新對象 this 的不斷賦值，並將 prototype 指向類的 prototype 所指向的對象（這裡有點繞，反正士心當初繞了很久），而類的構造函數 外面通過點語法定義的屬性方法是不會添加 到新創建 的對象上去的。國此要想在新創建 的對象中使用isChinese 就得通過 Book 類使用而不能通過 this ，如 Book.isChinese,而類的原型 prototype 上定義的屬性在新對象裡就可以直接使用，這是因為新對象的 prototype 和類的 prototype 指向的是同一個對象。

我們可以寫一段代碼測試一下

好了，由於時間關係，今天先一起學到這吧，明天我們將會一起學習到閉包，繼承，多態如何去實現，小夥伴們，我們明天見