JavaScript物件導向輕鬆入門之概述(demo by ES5、ES6、TypeScript)

標籤：活性   收藏   網頁   編程   分析   轉化   使用   知識點   類型   

寫在前面的話

　　這是一個JavaScript物件導向系列的文章，本篇文章主要講概述，介紹物件導向，後面計劃還會有5篇文章，講抽象、封裝、繼承、多態，最後再來一個綜合。

　　說實話，寫JavaScript物件導向的文章實在是太多了，網上一搜一大堆，很多書裡面也介紹的很詳細。但作者當初在學習物件導向的時候還是非常困難，特別是在習慣了面向過程編程的情況下，不知道大家有沒有這個感受。

　　作者分析了一下其中的原因，恐怕是因為裡面涉及的概念太多：原型、原型鏈、繼承、this、constructor、call等等，這些都是要瞭解的。一介紹起來就像是拔出蘿蔔帶出一大堆泥，知識點之間耦合度太高，一點都不符合物件導向封裝的特點。

　　所以作者在這一系列的文章中不準備介紹上面的這些概念，只會說這些東西在這裡有什麼用。作者會假定讀者對這些概念一無所知，並且也不奢求讀者讀完這些文章後就對物件導向有非常深入的瞭解。

　　這一系列的文章的定位就是quickstart，介紹JavaScript物件導向最常用的東西，讓讀者讀完之後就能立馬上手，仿照裡面的demo寫出物件導向風格的代碼，等用的多了再回頭去深入學習其中的原理，我相信這時候會容易的多。

　　想瞭解更多？抱歉，看書去吧，《JavaScript進階程式設計》《JavaScript權威指南》裡面講的比作者詳細多了，單繼承方式《JavaScript進階程式設計》中就講了5種。

什麼是物件導向 (OOP) ？

　　在作者看來，狹義的物件導向是一種編程方式，採用了抽象、封裝、繼承、多態這些設計方法，把難以讀懂的代碼抽象成一個個對象，增強代碼的可讀性、可靠性、可拓展性，是人們對編程經驗的總結。

　　推及到廣義上，物件導向已經越了程式設計和軟體開發，作者認為物件導向又是一種思維方式，不局限於程式設計語言，甚至不局限編程本身，它把複雜的需求、商務邏輯抽絲剝繭、逐個分析。

　　這一系列的文章作者會嘗試用一些物件導向的思想去寫，是不是很酷？

為什麼要用物件導向這種編程方式？

　　最初沒有物件導向這個概念的時候，人們是按照電腦思維去寫代碼的（又叫面向過程，彙編和C一般是用這種方式），但是人理解電腦思維是比較困難的，代碼量越多後期就越難維護，於是人們發明了物件導向這種編程方式，所以衍生出了許多物件導向的進階語言C++、C#、java等等，我們前端工程師使用的JavaScript也是其中的一種。

物件導向有以下這些好處：

　　1、可讀性強。如果你使用面向過程的方式編程，你可能過兩三個月就忘了你的代碼錶達的意思，更別說讓其他人理解你的代碼。物件導向可以讓你的代碼遵循一定的規範，不論是你自己還是團隊其他人理解起你的代碼來更容易，非常方便多人協同開發。

　　2、可擴充性強。物件導向強調代碼的封裝性，降低代碼模組間的耦合度，這大大增強了代碼的靈活性、可擴充性。

　　3、複用代碼。物件導向可把商務邏輯抽象拆分成一個個對象，比如貓和狗都可以把尾巴抽象成一個對象，貓和狗就都可以用尾巴這個對象。

　　4、易維護。由於程式被抽象成一個個對象，那麼即時是改變需求，只需要修改對應的對象就可以了，所以維護起來非常方便。

如果你編程有一段時間了，那你一定聽說過大名鼎鼎的“設計模式”，物件導向就是設計模式的基礎（可以理解為“前置技能”）。

在前端領域什麼時候適合用物件導向？

　　說實話前端領域使用物件導向編程的人不多，主要原因是因為很多WEB程式比較簡單，用面向過程的編程方式足夠滿足需求，人們只是用JavaScript寫寫網頁特效，提交個表單什麼的。但隨著互連網的發展，各種基於WEB的複雜需求不斷出現，WEB程式越來越複雜，一個SPA（single page web application單頁Web應用）可能有幾十萬甚至上百萬行代碼，需要多人來開發、維護。

當你有以下這些感受的時候，這說明你應該學習物件導向了。

　　1、項目的代碼越來越多，感覺越來越難以維護；

　　2、項目中好多需求很類似，一些代碼主體上感覺差不多；

　　3、需要和別人協同開發，別人有可能會改你的代碼，你也可能改別人的代碼，並且感覺溝通的很麻煩；

　　4、兩個月沒看的代碼就感覺不是自己寫的了；

　　5、程式經常出bug，並需要花很長時間去找原因；

　　6、產品經理說“這個需求得改一下”的時候，內心一萬個草泥馬跑過；

　　7、技術增長陷入了瓶頸。

JavaScript的物件導向

　　我相信java、c++等語言的初學者學習物件導向肯定沒有JavaScript這麼難，因為這些物件導向語言已經將物件導向融入了文法，文法強制你去按照物件導向的方式編程，即使你不知道為什麼這樣做。

　　JavaScript是通過類比來實現物件導向的，這是很讓人詬病的地方，理解困難，寫起來比較麻煩，代碼不乾淨。

　　當然，並不是說JavaScript不如這些語言，JavaScript的靈活性是這些語言無法比擬的，這就讓它有更多的可能，可以類比很多程式設計語言的特性，JavaScript成為使用比例最高的程式設計語言是有理由的。

　　而且並不是所有需求都必須用物件導向去解決，很多需求（特別是WEB程式）直接用面向過程去解決或許更方便，更快捷。

為什麼要用ES5、ES6、TypeScript來demo？

　　先介紹一下這三個概念：

ES5：

　　全名ECMAScript5，可以理解為我們常規意義上的JavaScript（實際上JavaScript還包含了DOM和BOM），是目前大部分瀏覽器都支援的JavaScript文法特性，在ES5之前還有ES3。

ES6：

　　是2015年制定的ECMAScript語言規範，在ES5的基礎上擴充了新的文法特性，代表著JavaScript的未來，但還沒有被大部分瀏覽器安全色，可以用babel等工具轉化為ES5。

TypeScript：

　　TypeScript在ES5、ES6的基礎上又增加了類型檢測等新特性，跟java很像，同時又保留了JavaScript的靈活性，非常適合大型應用程式。TypeScript不是ES5、ES6這種官方產物，不被瀏覽器支援，需要用官方的工具轉化為ES5、ES6。因為angular2是用TypeScript寫的，這讓TypeScript最近大火，作者也是因為要用angular2做項目接觸的TypeScript（偷偷告訴大家：TypeScript寫起代碼來非常爽）。

ES5 ->ES6-> TypeScript物件導向的演化：

　　從ES5到ES6到TypeScript，物件導向的味道越來越濃。ES5裡物件導向靠類比；ES6已經有class這個概念了，但還不夠完善；TypeScript更是將物件導向推向了極致，這方面已經不比java差了。所以作者把這三者放在一起來對比、印證。

　　新手可以只看ES5部分，學習有餘力的和老鳥們可以把三部分demo一起看。

後話

　　這一系列後面的文章（抽象、封裝、繼承、多態、綜合），作者盡量一周寫一篇，各位看官如果覺得文章還行，不妨收藏起來，等作者更新了就可以第一時間閱讀。

　　如果大家覺得有什麼需要補充、修改的，歡迎私信或留言。

JavaScript物件導向輕鬆入門之概述(demo by ES5、ES6、TypeScript)