再和“面向?qū)ο蟆闭剳賽?- 面向?qū)ο缶幊谈拍睿ㄈ?/h1>

發(fā)布時間：2020-05-12 07:07:21 來源：網(wǎng)絡(luò) 閱讀：710 作者：陳學(xué)輝 欄目：web開發(fā)

通過前兩篇文章，我們了解了對象的概念以及面向?qū)ο罄锏南嚓P(guān)概念等知識，那前面說了對象分類里的前兩種，這篇文章要詳細(xì)去說第三種“自定義對象”，那真正的好戲這就來了！

面向?qū)ο缶幊谈拍?/h3>

面向?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ū)ο?/h3>

面向過程的程序，沒有屬性與方法的概念，所有的東西都是單獨寫一套，無法擴展。面向?qū)ο蟮某绦蚴且詫ο鬄闇?zhǔn)則，一個功能就是一個對象，把變量與函數(shù)做為這個對象的屬性與方法去用，擴展性非常高。

面向過程編程

//所有的屬性都存在變量里
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();

<br />
再比如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ū)ο缶幊?/h3>

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ū)ο缶幊?/h3>

現(xiàn)在好了，ES6終于聽到別人鄙視我們了，給我們提供了類這個概念，其實是向傳統(tǒng)語言更靠齊了。前端終于可以揚眉吐氣了，你可以昂首挺胸地說JavaScript里有類了！但是ES6提供的類其實就是個語法糖，何為語法糖？就是把復(fù)雜的東西包裝了一下，變得簡單的，內(nèi)部原理還是通過構(gòu)造函數(shù)來完成的（就是穿了一個馬甲）。那不管怎么說，他偷也好搶也好現(xià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概念