JavaScript進階(七):繼承的目的

這篇博客,我們來說說繼承這個東西。

首先,關於繼承有一句話,前面也說過,那就是,如果你用了面向對象,但是你完全沒用到繼承,那麼我們撐死最多發揮出面向對象 20 - 30% 的能力。

實際上來說,繼承至少在我的眼裏看來,它纔是面向對象的精華,或者可以說,它纔是目的。

我們之所以要把它寫成類,目的就是爲了將來可以繼承來,繼承去,很靈活,我們的目的就是爲了這個。

 

那麼我們來說幾件事,首先,可以明確的告訴大家,繼承特別常見。

在我們整個 js 語言裏面,到處都是繼承,比如,一個最簡單的例子:

因爲所有的類都是從 Object 裏面繼承出來的,Object 是所有東西的一個基礎。

說白了,Object 你躲都躲不開,因爲 js 裏面合法的類都是 Object 的子類。

以及,還有一些更多的東西,我們平常一天到晚用的那些 HTML 元素,它們也是繼承的產物。

比如我就想看看一個 input 輸入框,它是由誰構造出來的:

所以,如果我去做一個測試,input 是不是 HTMLInputElement 的實例:

它肯定是個 true。

其次,它不光是 HTMLInputElement,它同時也是 HTMLElement:

所以,大家其實可以想象的出來,這個其實就是它的父類。

然後我還想看看它是不是 Element:

以及,它還可以是一個 Node,也就是節點:

同時,你也可以看到,它還是一個 Object:

所以,你可以看到,繼承很常見,oTxt 它就繼承自很多東西。

oTxt --> HTMLInputElement --> HTMLElement --> Element --> Node

 

那麼這時候,我們可能會問一個問題,爲什麼?

比方說這個 HTMLInputElement,我們本身直接去從 Object 身上開始寫不就完了嗎,搞這麼多級別幹啥?

其實這個,我們就說到了一個極其重要的問題,繼承,它的目的何在。

 

首先,用我個人的話來說,繼承有幾個方向上的目的。

第一個目的,它是爲了讓你的這些類,擁有一個清晰的層次。

這個其實很有好處,因爲本身對你將來的代碼的維護、閱讀、理解,等等一系列都有好處,而且同級別的元素,它們一定都是有一些共通的特性。

 

比如說,我們就照着剛纔的 HTML 來說,因爲本身 HTML 這些東西是非常成熟的,並且天天可以見到的。

我們知道,剛纔的起點是 Node,這個 Node 我們都知道,就是通用的節點。

 

這個時候大家可能會奇怪,Node 不就是 Element 嗎?那爲什麼還要分呢?

很簡單,在我們的 HTML 裏面,只有元素這一種節點嗎?

不是的,還有別的。比如,它還有 TextNode 文本節點。

什麼叫文本節點?就是純字。

純打一些字,這是元素嗎?

不是,這就是一些字,它就叫文本節點。

 

然後,還有一些 CommentNode,註釋節點。

 

所以,在這裏面,之所以會單拎一個 Node 出來,是因爲它有一些各種各樣的分支:

 

然後 Element 下面還可以再去分,比如可以分 HTMLElement。

那有人會說,所有的元素都是 HTMLElement,還有別的元素嗎?

有啊,比方說 SVGElement,矢量圖。

 

然後 HTMLElement 下面,它還有沒有什麼分支?

太多了。

所以你可以發現,我們平常所用的 HTML 元素,HTML 標籤,它們本身就存在一個繼承上的關係。

 

然後繼續,同級別的這些節點,它實際上來說,都存在一些共通的操作。

比如說,我們平常肯定用過一些東西,像是 appendChild,removeChild 等等。

像這些東西,其實就是定義在我們的 Node 這一層上。

爲什麼要這樣做?

原因很簡單,我們能不能在 js 裏面刪掉某一個文本(TextNode)?

絕對可以,想都不用想,肯定是行的。

所以說白了,像這個東西,我不會說,去到子級裏面單獨實現。

我們是不是只要在父級裏實現一次,所有的人都可以用 removeChild,這個就非常的方便。

 

然後以及,我們的 Element 必然也有一些共通的東西。

比方說,只要是個元素,它就有寬高吧,width / height。

那麼,我們這個 width 和 height 是不是就可以放在 Element 裏面來實現啊。

當然有人說,那爲什麼不放在 Node 裏面?

很簡單,註釋節點 CommentNode,它有寬高嗎?

所以說,它其實是不具備這個特性的,也就是爲什麼不放在 Node 裏面來實現,而是放到 Element 裏面來實現。

 

然後還比方說,我們都知道平常 HTML 的一些標籤之類的東西,它裏面是不是有一些共通的東西,比方說,class。

那麼像 class 這些相關的,我們可不可以放在 HTMLElement 這一級來實現。

那有人會問,爲什麼不把 class 放在 Element 裏面來實現。

原因非常簡單,比方說像 SVG 之類的,人家是畫圖的,它沒有 class。(其實有,這裏只是用來說事)

並不是所有的 Element 都有 class,只有 HTMLElement 有,所以就放到這一級裏面來實現。

 

所以,我們的繼承這個東西,它可以讓我們的層次非常的清晰。

而這個層次清晰了之後,可以幫助我們閱讀變的很方便。

同時我們相應的一些公共操作,屬性之類的東西,是不是就可以放在某一個特定的,合適的級別裏面。

就像我們上面所說的一樣,這個就非常的方便,我們也不需要去搞的那麼的複雜了。

 

所以,我們就看到了,繼承的第一個目的,可以讓層次變的很清晰。

然後第二個目的,也是我們之前說的,可以讓我們的這個類,它的代碼,或者說功能,得到重用。

就比如上面說的 appendChild,removeChild 等等這一系列的公共操作,我們放到 Node 裏面,這是一種寫法。

另一種寫法是,HTMLDivElement 裏面你自己實現一個,HTMLInputElement 裏面你自己再實現一個。

這樣就很麻煩,也沒必要。

所以說在這種情況下,我們可以讓功能得到重用。

當然這個功能包括兩方面,第一個方面是它的一些屬性,第二個方面就是一些方法。

 

然後還有第三個目的,就是我們可以在這個過程當中,就能夠去使用這個多態來簡化我的程序。

(多態比較重要,我們下一篇博客專門講)

 

最後,這篇博客我們一共說了兩個事,我們稍微來回顧下:

第一,繼承這個東西非常的常見,尤其是我們前端 web,這個東西非常的多,你像平常我們所用到的元素,都是繼承出來的。

第二,我們說了繼承的目的非常的簡單:

1,爲了讓層次非常的清晰。

層次清晰了之後,也有幾個好處:

  i. 閱讀方便

  ii. 可以把一些公共的操作跟屬性放到合理的級別上。

2,代碼或功能可以重用,這個我們都知道。

3,可以使用多態來簡化代碼。

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章