JavaScript必知的特性（繼承）

多數人在學習JavaScript的時候。都是作Web的時候。需要表單驗證。或者是一些簡單的DOM操做，如同我上篇所講。處在一個「輔助」的地位。

處在「輔助」地位的JavaScript，咱們老是抱着解決這個問題便可的態度，天然不會關注其過多的特性。那麼。今天咱們就來聊聊在開發中有哪些特性是咱們必須要了解的。

JavaScript的結構

JavaScript分爲三個部分

• ECMAScript  JavaScript自己的語法

• DOM  全稱Document Object Model 。針對HTML Document操做的API，好比document.getElementByID

• BOM  全稱Browser Object Model，針對瀏覽器Window操做的API,好比window.location

在通常的項目中。多數人會關注DOM操做，因此忽略了JavaScript語法自己的精髓。咱們今天重點關注的就是：JavaScript自己語法。

請注意：咱們在前端使用JavaScript時，多數是以操做DOM爲目的，學習JavaScript語言的精髓，自己就是爲了讓咱們更優雅的「操做DOM」！

由於JS的每一個特性都包括太多內容，因此咱們僅僅能分多篇來說。今日咱們先講繼承！

我對於繼承的解說方法會和百度的帖子迥異，但更通俗一些。但願你們看過以後可以秒懂「繼承」。

面向對象的三大原則：封裝，繼承，多態。咱們不能脫離其它法則單講繼承，封裝是繼承的先決條件。多態是繼承要達到的目的，三者是糾合在一塊兒的！

---

1. 封裝  

封裝是對象的表現形式。

比方Java中，封裝的表現形式是JavaBean，在JavaScript就是Object，通俗點就是{}

咱們來看JavaScript的一個簡單對象

對象的兩個要點：屬性和行爲， name做爲屬性，work做爲行爲，已經知足封裝的基本要素，因此咱們認定student是一個對象。它的對象就是如此簡單。

咱們這裏多插一個知識點：對象和咱們平時講的JSON，有什麼不一樣呢？

JSON是JavaScript對象標記語言。JSON的做用是傳輸數據。「數據」具備不可變性。因此JSON僅僅能包括屬性。不能有行爲。

即：JSON中沒有不論什麼JavaScript方法！它們的差異就在於有沒有包括方法。

要記住JSON和對象的差異，僅僅要咱們記住一句繞口令就能夠：JSON必定是JavaScript對象。JavaScript對象不必定是JSON！

---

2. 繼承

所有的JavaScript的對象，在其生成的時候，編譯器都會附加給對象一個特殊的屬性：prototype，即你們常說的原型。理解原型是理解JavaScript繼承的重點。

原型有一個最最最重要的特色： 強單例 。同一類型的對象擁有的原型是一個，比方Array。所有的Array實例的原型僅僅有一個。

如下的代碼中。arr1和arr2的prototype指向的是同一個，假設設置arr1的爲null，arr2的也就爲null了。

咱們在看JavaScript的API時，經常看到Array的方法有：push shift slice splice等等，這些方法都是存在Array的prototype中。

咱們再來看看，當咱們調用一個JavaScript對象方法的時候。它的解析器是怎樣工做的？

好比調用arr1.push 方法，

1. 解析器會首先遍歷「對象自己」的方法。假設找到。則直接調用，不然，繼續第二步驟

2. 解析器會查看對象的Prototype對象中是否存在該方法，存在則調用。不存在就拋出Exception

說到這裏。你們應該秒懂「Prototype」是個什麼東西了吧。 事實上就是給對象附加一個內部對象而已，這個內部對象又是一個單例的。做爲單例，相對於對象自己確定高效率的！ 但是也是危急的！。

比方剛纔我賤賤的設置arr1的prototype爲null，那完蛋了！

。整個頁面的Array都要出錯。假設我這樣改動。預計有些不明因此的程序猿都要哭了，尼瑪瀏覽器會罵人！

看過以上，請你們記住：每個JavaScript對象都分爲兩個部分：「自己」和prototype。那麼對象的繼承也是針對這兩個部分展開的。繼承的目的是爲了擴展。說更通俗點就是，爲了給某個對象附加不少其它的方法。

這時候問題就回歸爲,怎樣給JavaScrit對象附加方法？

針對自己附加

上面的student，這時候又來了小明同窗，但是小明同窗比Aric多了一項技能，會擼呀擼！ 要怎樣實現呢？

jquery的extend的原理就是把一個對象的所有屬性和方法附加到另一個上面。

針對prototype附加

假設上面代碼改動爲：小明.prototype.lol = func...這樣也實現了相同的功能。但是這時候Aric也有了LOL這個功能。

百度上多數講繼承的帖子。都會有例如如下這種僞代碼。 咱們看過以上文章。是否是就明確了爲何！ 我之前看過無數的繼承的帖子，一直也不懂prototype是個什麼玩意！

！

關於繼承的使用，這裏基本落幕，你們心中都應該有一個初步的印象了。

當你懂的事物的原理後。再學習起來應該就更加駕輕就熟了。

---

3. 多態

面向對象的三大原則之中的一個：多態。多態分爲對象多態和方法多態！

這是兩個不一樣的概念。

對象多態

就是咱們時常看到的貓狗都屬於動物。貓叫是喵喵。狗倒是汪汪，這是多態的最直接體現。至於不少其它實現細節，請你們自行百度。

方法多態

方法多態，就是方法名字一樣，但是傳入的參數列表不一樣。這個在Java或者C#中都被咱們玩爛了！ 在JavaScript中由於沒有參數列表，通常都用方法的內部函數Arguments來表述！Arguments是僞Array。裏面放的就是當前方法的參數列表！

詳細使用過程當中，就能夠經過Arguments中元素的個數來實現方法多態。

---

很是多人都說JavaScript不是面向對象的編程語言。事實上是對JavaScript的誤解。面向對象的三大原則，JavaScript都能實現！僅僅是實現的方式有些不一樣，卻有殊途同歸之妙。

說在最後的話：

JavaScript的繼承不像Java那樣有明白的語法規則。它是靈活多變的。因此寫慣Java這樣的類型的人員。很討厭其語法。我在剛入門時，也是如此。但是在當你掌握了它，它的靈活多變會變成編程中的利器。劍之所指，所向披靡！

---

但願每一位有心學習JavaScript的程序猿，都能理解其繼承原理！

接下來，咱們會繼續解說JavaScript的其它特性！在解說這些特性的同一時候。我會結合其一些知名類庫，比方jQuery，解說這些特性在當中的應用。