再和“面向對象”談戀愛 - 面向對象編程概念（三）

Cruise_Chan 發布于2019-08-23 10:45 / 2716人閱讀

摘要：說到底面向對象才是程序語言的根本。其實面向對象編程說的就是自定義對象。里并沒有類的概念，所以嚴格上來講這是個假的面向對象里的面向對象編程現在好了，終于聽到別人鄙視我們了，給我們提供了類這個概念，其實是向傳統語言更靠齊了。

通過前兩篇文章，我們了解了對象的概念以及面向對象里的相關概念等知識，那前面說了對象分類里的前兩種，這篇文章要詳細去說第三種“自定義對象”，那真正的好戲這就來了！

面向對象編程概念

面向對象編程的概念非常早就有了，大多數的傳統語言都是面向對象編程語言，如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();

再比如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概念

GPU云服務器云服務器面向對象編程面向對象java編程面向對象編程語言 java面向對象編程

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/96658.html

再和“面向對象”談戀愛 - 圖片預加載組件（七）

摘要：源碼下載至此再和面向對象談戀愛系列文章已經全部更新完畢寫文章不易，且行且珍惜再和面向對象談戀愛 - 對象簡介（一）再和面向對象談戀愛 - 對象相關概念（二）再和面向對象談戀愛 - 面向對象編程概念（三）再和面向對象談戀愛 - class（四）再和面向對象談戀愛 - 繼承（五）再和面向對象談戀愛 - super（六）通過前面的六篇文章已經把ES6的面向對象跟大伙說清楚了，大家最關心的...

caoym 2019-08-23 10:45 評論0 收藏0
再和“面向對象”談戀愛 - class（四）

摘要：在上一篇文章里我介紹了一下面向對象編程的概念，在最后終于喜出望外看到了提供了類的概念了。而到了里面真正的類與構造函數現在是分離的，通過上面的代碼可以看出來，這種寫法正是面向對象的正統寫法。在上一篇文章里我介紹了一下面向對象編程的概念，在最后終于喜出望外看到了ES6提供了類的概念了。那這個類如何去用，是這篇文章的主題。ES6給我們提供了一個class關鍵字。這個關鍵字跟以前的var l...

劉東 2019-08-23 10:45 評論0 收藏0
再和“面向對象”談戀愛 - 對象相關概念（二）

摘要：所有的對象都是由構造函數創建的對象哪來的構造函數生的。而普通函數不能生成對象不孕不育，構造函數可以生成對象有生育能力。別急，記住那句話永遠指向實例對象對應的構造函數的，那就先看實例對象是誰。上一篇文章把對象的概念講解了一下，這篇文章要重點解釋最讓大家犯迷糊的一些概念，包括構造函數實例繼承構造函數的屬性與方法（私有屬性與方法）實例的屬性與方法（共享屬性與方法） protot...

qpwoeiru96 2019-08-23 10:44 評論0 收藏0
再和“面向對象”談戀愛 - super（六）

摘要：同時彈出的結果是指向了子類，又說明雖然調用的是父類的構造函數，但是調用完后會指向子類，指向也被改成了子類的實例。在上一篇文章里介紹了繼承，那其中說過一個很關鍵的東西想要繼承子類里里必需先調用一個super方法。而super的作用絕對是價值連城！同時super的作用還有多種，并且跟你的使用環境有關系。 1、當作函數使用 super被當作函數使用，這種情況是最普遍的，上一篇文章里已經使用...

Towers 2019-08-23 10:45 評論0 收藏0
再和“面向對象”談戀愛 - 繼承（五）

摘要：面向對象里最大的特點應該就屬繼承了。在第二篇文章里說過原型實例跟構造函數之間的繼承，并且還講了一道推算題。通過上一篇文章想必各位老鐵已經熟悉了class了，這篇文章接著介紹繼承。面向對象里最大的特點應該就屬繼承了。一個項目可能需要不斷的迭代、完善、升級。那每一次的更新你是要重新寫呢，還是在原有的基礎上改吧改吧呢？當然，不是缺心眼的人肯定都會在原來的基礎上改吧改吧，那這個改吧改吧就需要...

Airmusic 2019-08-23 10:45 評論0 收藏0