通過前兩篇文章,我們瞭解了對象的概念以及面向對象裏的相關概念等知識,那前面說了對象分類裏的前兩種,這篇文章要詳細去說第三種“自定義對象”,那真正的好戲這就來了!
面向對象編程概念
面向對象編程的概念非常早就有了,大多數的傳統語言都是面向對象編程語言,如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();
}
面向對象編程
function Pic(){
//所有的變量都變成了對象的屬性
this.lis=document.querySelectorAll("li");
this.leftBtn=document.querySelector(".leftBtn");
this.rightBtn=document.querySelector(".leftBtn");
const This=this; //存一下this,爲了在函數裏面用
this.leftBtn.onclick=function(){
This.changeCircle();
This.move();
}
}
//所有的功能都變成了對象的方法
Pic.prototype.changeCircle=function(){
//...
}
Pic.prototype.move=function(){
//...
};
//用的時候只需new一個就可以
const showImg=new Pic();
<br />
再比如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概念