通過前兩篇文章，我們了解了對象的概念以及面向?qū)ο罄锏南嚓P(guān)概念等知識脆粥，那前面說了對象分類里的前兩種猴誊，這篇文章要詳細(xì)去說第三種“自定義對象”，那真正的好戲這就來了膏秫！
面向?qū)ο缶幊谈拍?/h2>
面向?qū)ο缶幊痰母拍罘浅Ｔ缇陀辛擞以猓蠖鄶?shù)的傳統(tǒng)語言都是面向?qū)ο缶幊陶Z言，如C++、Java等狸演。ECMAScript花了大量的精力編寫了一堆內(nèi)置對象言蛇，這是為什么呢？JavaScript的設(shè)計(jì)者其實(shí)也想向面向?qū)ο蟮恼Z言靠齊宵距。說到底面向?qū)ο蟛攀浅绦蛘Z言的根本。
前面說過在JavaScript里對象分為三種吨拗，全局對象满哪、內(nèi)置對象、自定義對象劝篷。其實(shí)面向?qū)ο缶幊陶f的就是自定義對象哨鸭。JavaScript給了我們很多內(nèi)置對象，但是這些對象也不能夠滿足我們的需求娇妓。所以我們就需要自己寫一些對象了像鸡。那面向?qū)ο笫怯脕砀陕锏模烤褪怯脕韺?shí)現(xiàn)一個(gè)個(gè)功能的哈恰。換句話說只估，我們以后實(shí)現(xiàn)的每一個(gè)功能都是一個(gè)對象，這個(gè)對象的語法要像內(nèi)置對象的語法一樣着绷，再者說就是模仿內(nèi)置對象實(shí)現(xiàn)各種功能蛔钙，這就叫面向?qū)ο缶幊蹋?/p>
面向過程與面向?qū)ο?/h2>
面向過程的程序，沒有屬性與方法的概念荠医，所有的東西都是單獨(dú)寫一套吁脱，無法擴(kuò)展。面向?qū)ο蟮某绦蚴且詫ο鬄闇?zhǔn)則彬向，一個(gè)功能就是一個(gè)對象兼贡，把變量與函數(shù)做為這個(gè)對象的屬性與方法去用，擴(kuò)展性非常高娃胆。
面向過程編程
//所有的屬性都存在變量里
const lis=document.querySelectorAll("li");
const leftBtn=document.querySelector(".leftBtn");
const rightBtn=document.querySelector(".leftBtn");
//所有的功能都是獨(dú)立出來的函數(shù)
function changeCircle(){
//...
}
function move(){
//....
}
//用的時(shí)候遍希，需要去調(diào)對應(yīng)的函數(shù)
leftBtn.onclick=function(){
changeCircle();
move();
}
面向?qū)ο缶幊?/strong>
function Pic(){
//所有的變量都變成了對象的屬性
this.lis=document.querySelectorAll("li");
this.leftBtn=document.querySelector(".leftBtn");
this.rightBtn=document.querySelector(".leftBtn");
const This=this; //存一下this，為了在函數(shù)里面用
this.leftBtn.onclick=function(){
This.changeCircle();
This.move();
}
}
//所有的功能都變成了對象的方法
Pic.prototype.changeCircle=function(){
//...
}
Pic.prototype.move=function(){
//...
};
//用的時(shí)候只需new一個(gè)就可以
const showImg=new Pic();
<br />
再比如Date對象缕棵，它是用來操作日期的孵班。有很多的屬性與方法。那JavaScript里并沒有一個(gè)日歷對象吧招驴。我們可以寫一個(gè)日歷對象篙程，它就是專門用來操作日歷的。比如叫calendar别厘，那我按照內(nèi)置對象的語法實(shí)現(xiàn)一個(gè)calendar對象虱饿，里面也有很多屬性與方法，new一個(gè)就是一個(gè)實(shí)際的日歷氮发。那實(shí)現(xiàn)這個(gè)calendar對象就叫面向?qū)ο缶幊?/p>
//內(nèi)置對象
const date=new Date();
date.getMonth(); //5
//自定義對象
const Calendar=function(){
//...
}
const calendar=new Calendar();
calendar.getLunar(); //獲取陰歷
ECMAScript 5里的面向?qū)ο缶幊?/h2>
JavaScript中的面向?qū)ο笫峭ㄟ^構(gòu)造函數(shù)完成的
JavaScript中的面向?qū)ο笫峭ㄟ^構(gòu)造函數(shù)完成的
大家經(jīng)常聽到一個(gè)詞叫“類”渴肉，在面試的時(shí)候爽冕、看面試題的時(shí)候，都會遇到一個(gè)“請解釋一下類的概念”颈畸。每看到這種題的時(shí)候乌奇，我都會有種罵娘的沖動。解釋你妹呀眯娱，ES5中壓根就沒類這個(gè)概念。我估計(jì)出這種題的人都是搞后端開發(fā)的徙缴。ES5中沒有類的概念，只有構(gòu)造函數(shù)于样。
我們經(jīng)常會用下面的這個(gè)例子來演示一個(gè)面向?qū)ο缶幊痰牟襟E疏叨，而這個(gè)正是ES5當(dāng)中寫面向?qū)ο蟮倪^程
//構(gòu)造函數(shù)
function Person(name,age){
this.name=name; //把屬性添加到this上
this.age=age;
}
//把方法添加到原型上
Person.prototype.showName=function(){
console.log(this.name);
}
console.dir(Person);
//實(shí)例
const p1=new Person('kaivon',18);
p1.showName();
我在這里要黑一下ES5的面向?qū)ο缶幊蹋厦娴倪@種形式嚴(yán)格來講不叫面向?qū)ο蟮某绦虬儆睢Ｈ绻愀粋€(gè)Java程序員說：“哎考廉，搞Java的携御，看看我們JS寫的面向?qū)ο螅遣皇潜秲喊糇纳玻 薄Ｎ夜烙?jì)他會噴你一臉血誓军，這他媽也能叫面向?qū)ο螅闶呛镒诱垇淼亩罕泼唇莸瘢^來搞笑的么？連類都沒有壹甥，能稱之為面向?qū)ο螅阏媸请S心所欲呀~ 而你還一臉無辜的說：“難道Person不是類么浦译？”。ES5里并沒有類的概念精盅，所以嚴(yán)格上來講這是個(gè)假的面向?qū)ο?/p>
ECMAScript 6里的面向?qū)ο缶幊?/h2>
現(xiàn)在好了，ES6終于聽到別人鄙視我們了叹俏，給我們提供了類這個(gè)概念，其實(shí)是向傳統(tǒng)語言更靠齊了佳头。前端終于可以揚(yáng)眉吐氣了，你可以昂首挺胸地說JavaScript里有類了！但是ES6提供的類其實(shí)就是個(gè)語法糖碉输，何為語法糖？就是把復(fù)雜的東西包裝了一下枝哄，變得簡單的，內(nèi)部原理還是通過構(gòu)造函數(shù)來完成的（就是穿了一個(gè)馬甲）挠锥。那不管怎么說，他偷也好搶也好現(xiàn)在就是有了蓖租，就算是進(jìn)步了羊壹！
有了類之后呢，生成實(shí)例名義上就不通過構(gòu)造函數(shù)了而通過類（內(nèi)部原理還是通過構(gòu)造函數(shù)油猫，只是讓我們寫起來，理解起來簡單了）
class Person{ //聲明一個(gè)類
constructor(name,age){ //構(gòu)造函數(shù)
this.name=name;
this.age=age;
}
showName(){ //這里的方法最終會放到原型上
console.log(this.name);
}
}
console.dir(Person);
//生成實(shí)例
const p1=new Person('kaivon',18);
p1.showName();
下一篇文章詳細(xì)介紹ES6里面的class概念
