再和「面向對象」談戀愛 - 面向對象編程概念（三）

08-13

通過前兩篇文章，我們了解了對象的概念以及面向對象里的相關概念等知識，那前面說了對象分類里的前兩種，這篇文章要詳細去說第三種「自定義對象」，那真正的好戲這就來了！

面向對象編程概念

面向對象編程的概念非常早就有了，大多數的傳統語言都是面向對象編程語言，如C++、Java等。ECMAScript花了大量的精力編寫了一堆內置對象，這是為什麼呢？JavaScript的設計者其實也想向面向對象的語言靠齊。說到底面向對象才是程序語言的根本。

前面說過在JavaScript里對象分為三種，全局對象、內置對象、自定義對象。其實面向對象編程說的就是自定義對象。JavaScript給了我們很多內置對象，但是這些對象也不能夠滿足我們的需求。所以我們就需要自己寫一些對象了。那面向對象是用來幹嘛的？就是用來實現一個個功能的。換句話說，我們以後實現的每一個功能都是一個對象，這個對象的語法要像內置對象的語法一樣，再者說就是模仿內置對象實現各種功能，這就叫面向對象編程！

面向過程與面向對象

面向過程的程序，沒有屬性與方法的概念，所有的東西都是單獨寫一套，無法擴展。面向對象的程序是以對象為準則，一個功能就是一個對象，把變數與函數做為這個對象的屬性與方法去用，擴展性非常高。

面向過程編程

//所有的屬性都存在變數里const lis=document.querySelectorAll("li");const leftBtn=document.querySelector(".leftBtn");const rightBtn=document.querySelector(".leftBtn");//所有的功能都是獨立出來的函數function changeCircle(){ //...}function move(){ //....}//用的時候，需要去調對應的函數leftBtn.onclick=function(){ changeCircle(); move();}

面向對象編程

再比如Date對象，它是用來操作日期的。有很多的屬性與方法。那JavaScript里並沒有一個日曆對象吧。我們可以寫一個日曆對象，它就是專門用來操作日曆的。比如叫calendar，那我按照內置對象的語法實現一個calendar對象，裡面也有很多屬性與方法，new一個就是一個實際的日曆。那實現這個calendar對象就叫面向對象編程

//內置對象const date=new Date();date.getMonth(); //5//自定義對象const Calendar=function(){ //...}const calendar=new Calendar();calendar.getLunar(); //獲取陰曆

ECMAScript 5里的面向對象編程

JavaScript中的面向對象是通過構造函數完成的

大家經常聽到一個詞叫「類」，在面試的時候、看面試題的時候，都會遇到一個「請解釋一下類的概念」。每看到這種題的時候，我都會有種罵娘的衝動。解釋你妹呀，ES5中壓根就沒類這個概念。我估計出這種題的人都是搞後端開發的。ES5中沒有類的概念，只有構造函數。

我們經常會用下面的這個例子來演示一個面向對象編程的步驟，而這個正是ES5當中寫面向對象的過程

//構造函數function Person(name,age){ this.name=name; //把屬性添加到this上 this.age=age;}//把方法添加到原型上Person.prototype.showName=function(){ console.log(this.name);}console.dir(Person);//實例const p1=new Person(kaivon,18);p1.showName();

我在這裡要黑一下ES5的面向對象編程，上面的這種形式嚴格來講不叫面向對象的程序。如果你跟一個Java程序員說：「哎，搞Java的，看看我們JS寫的面向對象，是不是倍兒棒！」。我估計他會噴你一臉血，這他媽也能叫面向對象，你是猴子請來的逗逼么，過來搞笑的么？連類都沒有，能稱之為面向對象，你真是隨心所欲呀~ 而你還一臉無辜的說：「難道Person不是類么？」。ES5里並沒有類的概念，所以嚴格上來講這是個假的面向對象

ECMAScript 6里的面向對象編程

現在好了，ES6終於聽到別人鄙視我們了，給我們提供了類這個概念，其實是向傳統語言更靠齊了。前端終於可以揚眉吐氣了，你可以昂首挺胸地說JavaScript里有類了！但是ES6提供的類其實就是個語法糖，何為語法糖？就是把複雜的東西包裝了一下，變得簡單的，內部原理還是通過構造函數來完成的（就是穿了一個馬甲）。那不管怎麼說，他偷也好搶也好現在就是有了，就算是進步了！

有了類之後呢，生成實例名義上就不通過構造函數了而通過類（內部原理還是通過構造函數，只是讓我們寫起來，理解起來簡單了）

class Person{ //聲明一個類 constructor(name,age){ //構造函數 this.name=name; this.age=age; } showName(){ //這裡的方法最終會放到原型上 console.log(this.name); }}console.dir(Person);//生成實例const p1=new Person(kaivon,18);p1.showName();

下一篇文章詳細介紹ES6裡面的class概念