JavaScript面向對象輕鬆入門之概述(demo by ES五、ES六、TypeScript)

寫在前面的話

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

　　說實話，寫JavaScript面向對象的文章實在是太多了，網上一搜一大堆，不少書裏面也介紹的很詳細。但做者當初在學習面向對象的時候仍是很是困難，特別是在習慣了面向過程編程的狀況下，不知道你們有沒有這個感覺。

　　做者分析了一下其中的緣由，恐怕是由於裏面涉及的概念太多：原型、原型鏈、繼承、this、constructor、call等等，這些都是要了解的。一介紹起來就像是拔出蘿蔔帶出一大堆泥，知識點之間耦合度過高，一點都不符合面向對象封裝的特色。

　　因此做者在這一系列的文章中不許備介紹上面的這些概念，只會說這些東西在這裏有什麼用。做者會假定讀者對這些概念一無所知，而且也不奢求讀者讀完這些文章後就對面向對象有很是深刻的瞭解。

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

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

什麼是面向對象(OOP)？

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

　　推及到廣義上，面向對象已經越了程序設計和軟件開發，做者認爲面向對象又是一種思惟方式，不侷限於編程語言，甚至不侷限編程自己，它把複雜的需求、業務邏輯抽絲剝繭、逐個分析。

　　這一系列的文章做者會嘗試用一些面向對象的思想去寫，是否是很酷？

爲何要用面向對象這種編程方式？

　　最初沒有面向對象這個概念的時候，人們是按照計算機思惟去寫代碼的（又叫面向過程，彙編和C通常是用這種方式），可是人理解計算機思惟是比較困難的，代碼量越多後期就越難維護，因而人們發明了面向對象這種編程方式，因此衍生出了許多面向對象的高級語言C++、C#、java等等，咱們前端工程師使用的JavaScript也是其中的一種。

面向對象有如下這些好處：

　　一、可讀性強。若是你使用面向過程的方式編程，你可能過兩三個月就忘了你的代碼表達的意思，更別說讓其餘人理解你的代碼。面向對象可讓你的代碼遵循必定的規範，不管是你本身仍是團隊其餘人理解起你的代碼來更容易，很是方便多人協同開發。

　　二、可擴展性強。面向對象強調代碼的封裝性，下降代碼模塊間的耦合度，這大大加強了代碼的靈活性、可擴展性。

　　三、複用代碼。面向對象可把業務邏輯抽象拆分紅一個個對象，好比貓和狗均可以把尾巴抽象成一個對象，貓和狗就均可以用尾巴這個對象。

　　四、易維護。因爲程序被抽象成一個個對象，那麼即時是改變需求，只須要修改對應的對象就能夠了，因此維護起來很是方便。

若是你編程有一段時間了，那你必定據說過大名鼎鼎的「設計模式」，面向對象就是設計模式的基礎（能夠理解爲「前置技能」）。

在前端領域何時適合用面向對象？

　　說實話前端領域使用面向對象編程的人很少，主要緣由是由於不少WEB程序比較簡單，用面向過程的編程方式足夠知足需求，人們只是用JavaScript寫寫網頁特效，提交個表單什麼的。但隨着互聯網的發展，各類基於WEB的複雜需求不斷出現，WEB程序愈來愈複雜，一個SPA（single page web application單頁Web應用）可能有幾十萬甚至上百萬行代碼，須要多人來開發、維護。

當你有如下這些感覺的時候，這說明你應該學習面向對象了。

　　一、項目的代碼愈來愈多，感受愈來愈難以維護；

　　二、項目中好多需求很相似，一些代碼主體上感受差很少；

　　三、須要和別人協同開發，別人有可能會改你的代碼，你也可能改別人的代碼，而且感受溝通的很麻煩；

　　四、兩個月沒看的代碼就感受不是本身寫的了；

　　五、程序常常出bug，並須要花很長時間去找緣由；

　　六、產品經理說「這個需求得改一下」的時候，心裏一萬個草泥馬跑過；

　　七、技術增加陷入了瓶頸。

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一塊兒看。

後話

　　這一系列後面的文章（抽象、封裝、繼承、多態、綜合），做者儘可能一週寫一篇，各位看官若是以爲文章還行，不妨收藏起來，等做者更新了就能夠第一時間閱讀。

　　若是你們以爲有什麼須要補充、修改的，歡迎私信或留言。