資訊專欄INFORMATION COLUMN
摘要：說到底面向?qū)ο蟛攀浅绦蛘Z言的根本。其實面向?qū)ο缶幊陶f的就是自定義對象。里并沒有類的概念，所以嚴(yán)格上來講這是個假的面向?qū)ο罄锏拿嫦驅(qū)ο缶幊态F(xiàn)在好了，終于聽到別人鄙視我們了，給我們提供了類這個概念，其實是向傳統(tǒng)語言更靠齊了。
通過前兩篇文章，我們了解了對象的概念以及面向?qū)ο罄锏南嚓P(guān)概念等知識，那前面說了對象分類里的前兩種，這篇文章要詳細(xì)去說第三種“自定義對象”，那真正的好戲這就來了！
面向?qū)ο缶幊谈拍?/b>面向?qū)ο缶幊痰母拍罘浅Ｔ缇陀辛?，大多?shù)的傳統(tǒng)語言都是面向?qū)ο缶幊陶Z言，如C++、Java等。ECMAScript花了大量的精力編寫了一堆內(nèi)置對象，這是為什么呢？JavaScript的設(shè)計者其實也想向面向?qū)ο蟮恼Z言靠齊。說到底面向?qū)ο蟛攀浅绦蛘Z言的根本。
前面說過在JavaScript里對象分為三種，全局對象、內(nèi)置對象、自定義對象。其實面向?qū)ο缶幊陶f的就是自定義對象。JavaScript給了我們很多內(nèi)置對象，但是這些對象也不能夠滿足我們的需求。所以我們就需要自己寫一些對象了。那面向?qū)ο笫怯脕砀陕锏?？就是用來實現(xiàn)一個個功能的。換句話說，我們以后實現(xiàn)的每一個功能都是一個對象，這個對象的語法要像內(nèi)置對象的語法一樣，再者說就是模仿內(nèi)置對象實現(xiàn)各種功能，這就叫面向?qū)ο缶幊蹋?/p> 面向過程與面向?qū)ο?/b>
面向過程的程序，沒有屬性與方法的概念，所有的東西都是多帶帶寫一套，無法擴(kuò)展。面向?qū)ο蟮某绦蚴且詫ο鬄闇?zhǔn)則，一個功能就是一個對象，把變量與函數(shù)做為這個對象的屬性與方法去用，擴(kuò)展性非常高。
面向過程編程
//所有的屬性都存在變量里
const lis=document.querySelectorAll("li");
const leftBtn=document.querySelector(".leftBtn");
const rightBtn=document.querySelector(".leftBtn");
//所有的功能都是獨立出來的函數(shù)
function changeCircle(){
//...
}
function move(){
//....
}
//用的時候，需要去調(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(){
//...
};
//用的時候只需new一個就可以
const showImg=new Pic();
再比如Date對象，它是用來操作日期的。有很多的屬性與方法。那JavaScript里并沒有一個日歷對象吧。我們可以寫一個日歷對象，它就是專門用來操作日歷的。比如叫calendar，那我按照內(nèi)置對象的語法實現(xiàn)一個calendar對象，里面也有很多屬性與方法，new一個就是一個實際的日歷。那實現(xiàn)這個calendar對象就叫面向?qū)ο缶幊?/p>
//內(nèi)置對象
const date=new Date();
date.getMonth(); //5
//自定義對象
const Calendar=function(){
//...
}
const calendar=new Calendar();
calendar.getLunar(); //獲取陰歷
ECMAScript 5里的面向?qū)ο缶幊?/b>
JavaScript中的面向?qū)ο笫峭ㄟ^構(gòu)造函數(shù)完成的
大家經(jīng)常聽到一個詞叫“類”，在面試的時候、看面試題的時候，都會遇到一個“請解釋一下類的概念”。每看到這種題的時候，我都會有種罵娘的沖動。解釋你妹呀，ES5中壓根就沒類這個概念。我估計出這種題的人都是搞后端開發(fā)的。ES5中沒有類的概念，只有構(gòu)造函數(shù)。
我們經(jīng)常會用下面的這個例子來演示一個面向?qū)ο缶幊痰牟襟E，而這個正是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);
//實例
const p1=new Person("kaivon",18);
p1.showName();
我在這里要黑一下ES5的面向?qū)ο缶幊?，上面的這種形式嚴(yán)格來講不叫面向?qū)ο蟮某绦?。如果你跟一個Java程序員說：“哎，搞Java的，看看我們JS寫的面向?qū)ο?，是不是倍兒棒！”。我估計他會噴你一臉血，這他媽也能叫面向?qū)ο?，你是猴子請來的逗逼么，過來搞笑的么？連類都沒有，能稱之為面向?qū)ο?，你真是隨心所欲呀~ 而你還一臉無辜的說：“難道Person不是類么？”。ES5里并沒有類的概念，所以嚴(yán)格上來講這是個假的面向?qū)ο?/p> ECMAScript 6里的面向?qū)ο缶幊?/b>
現(xiàn)在好了，ES6終于聽到別人鄙視我們了，給我們提供了類這個概念，其實是向傳統(tǒng)語言更靠齊了。前端終于可以揚眉吐氣了，你可以昂首挺胸地說JavaScript里有類了！但是ES6提供的類其實就是個語法糖，何為語法糖？就是把復(fù)雜的東西包裝了一下，變得簡單的，內(nèi)部原理還是通過構(gòu)造函數(shù)來完成的（就是穿了一個馬甲）。那不管怎么說，他偷也好搶也好現(xiàn)在就是有了，就算是進(jìn)步了！
有了類之后呢，生成實例名義上就不通過構(gòu)造函數(shù)了而通過類（內(nèi)部原理還是通過構(gòu)造函數(shù)，只是讓我們寫起來，理解起來簡單了）
class Person{ //聲明一個類
constructor(name,age){ //構(gòu)造函數(shù)
this.name=name;
this.age=age;
}
showName(){ //這里的方法最終會放到原型上
console.log(this.name);
}
}
console.dir(Person);
//生成實例
const p1=new Person("kaivon",18);
p1.showName();
下一篇文章會詳細(xì)介紹ES6里面的class概念
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/96658.html
摘要：源碼下載至此再和面向?qū)ο笳剳賽巯盗形恼乱呀?jīng)全部更新完畢寫文章不易，且行且珍惜 再和面向?qū)ο笳剳賽?- 對象簡介（一）再和面向?qū)ο笳剳賽?- 對象相關(guān)概念（二）再和面向?qū)ο笳剳賽?- 面向?qū)ο缶幊谈拍睿ㄈ┰俸兔嫦驅(qū)ο笳剳賽?- class（四）再和面向?qū)ο笳剳賽?- 繼承（五）再和面向?qū)ο笳剳賽?- super（六） 通過前面的六篇文章已經(jīng)把ES6的面向?qū)ο蟾蠡镎f清楚了，大家最關(guān)心的...
摘要：在上一篇文章里我介紹了一下面向?qū)ο缶幊痰母拍睿谧詈蠼K于喜出望外看到了提供了類的概念了。而到了里面真正的類與構(gòu)造函數(shù)現(xiàn)在是分離的，通過上面的代碼可以看出來，這種寫法正是面向?qū)ο蟮恼y(tǒng)寫法。 在上一篇文章里我介紹了一下面向?qū)ο缶幊痰母拍?，在最后終于喜出望外看到了ES6提供了類的概念了。那這個類如何去用，是這篇文章的主題。ES6給我們提供了一個class關(guān)鍵字。這個關(guān)鍵字跟以前的var l...
摘要：所有的對象都是由構(gòu)造函數(shù)創(chuàng)建的對象哪來的構(gòu)造函數(shù)生的。而普通函數(shù)不能生成對象不孕不育，構(gòu)造函數(shù)可以生成對象有生育能力。別急，記住那句話永遠(yuǎn)指向?qū)嵗龑ο髮?yīng)的構(gòu)造函數(shù)的，那就先看實例對象是誰。 上一篇文章把對象的概念講解了一下，這篇文章要重點解釋最讓大家犯迷糊的一些概念，包括 構(gòu)造函數(shù) 實例 繼承 構(gòu)造函數(shù)的屬性與方法（私有屬性與方法） 實例的屬性與方法（共享屬性與方法） protot...
摘要：同時彈出的結(jié)果是指向了子類，又說明雖然調(diào)用的是父類的構(gòu)造函數(shù)，但是調(diào)用完后會指向子類，指向也被改成了子類的實例。 在上一篇文章里介紹了繼承，那其中說過一個很關(guān)鍵的東西想要繼承子類里里必需先調(diào)用一個super方法。而super的作用絕對是價值連城！同時super的作用還有多種，并且跟你的使用環(huán)境有關(guān)系。 1、當(dāng)作函數(shù)使用 super被當(dāng)作函數(shù)使用，這種情況是最普遍的，上一篇文章里已經(jīng)使用...
摘要：面向?qū)ο罄镒畲蟮奶攸c應(yīng)該就屬繼承了。在第二篇文章里說過原型實例跟構(gòu)造函數(shù)之間的繼承，并且還講了一道推算題。 通過上一篇文章想必各位老鐵已經(jīng)熟悉了class了，這篇文章接著介紹繼承。面向?qū)ο罄镒畲蟮奶攸c應(yīng)該就屬繼承了。一個項目可能需要不斷的迭代、完善、升級。那每一次的更新你是要重新寫呢，還是在原有的基礎(chǔ)上改吧改吧呢？當(dāng)然，不是缺心眼的人肯定都會在原來的基礎(chǔ)上改吧改吧，那這個改吧改吧就需要...
閱讀 1229·2021-09-22 15:43
閱讀 2427·2021-09-22 15:32
閱讀 4670·2021-09-22 15:11
閱讀 2337·2019-08-30 15:55
閱讀 2710·2019-08-30 15:54
閱讀 1043·2019-08-30 15:44
閱讀 1174·2019-08-29 13:26
閱讀 870·2019-08-29 12:54
