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