一萬(wàn)個(gè)人心中有一萬(wàn)個(gè)哈姆雷特，一萬(wàn)個(gè)開(kāi)發(fā)者心中便有一萬(wàn)種對(duì)面向?qū)ο笏枷氲睦斫?。這里我只粗淺的闡述一下我對(duì)面向?qū)ο笏枷氲睦斫?，希望?duì)大家有所幫助！

基本概念

在程序里，我們通過(guò)使用對(duì)象去構(gòu)建現(xiàn)實(shí)世界的模型，把原本很難(或不可)能被使用的功能，簡(jiǎn)單化并提供出來(lái)，以供訪問(wèn)

這段解釋摘抄自MDN，讀起來(lái)甚是繞口。

這里我們可以采用填鴨法來(lái)理解面向?qū)ο?，大致是說(shuō)看起來(lái)像只鴨子，那么它就是一只鴨子。人與機(jī)器不同的是，人類具備主觀意識(shí)而機(jī)器沒(méi)有，一個(gè)具備尖尖的嘴，扁扁的腦袋，嘎嘎嘎的叫聲并且還會(huì)游泳的生物，那么這便是我們使用對(duì)象思想去構(gòu)建了一只鴨子的類。機(jī)器不會(huì)像人一樣主觀意識(shí)去設(shè)想這其實(shí)是一只大鵝。

對(duì)象的組成

一個(gè)基本的對(duì)象由若干個(gè)數(shù)據(jù)類型組成，往大的類別上劃分的話，可以分為行為和屬性

屬性：所有的數(shù)據(jù)類型都可以認(rèn)為是對(duì)象的屬性(小鴨子的體重，翅膀，腳丫子等等都是屬性)

行為：一般指函數(shù)，賦予對(duì)象能力(小鴨子會(huì)游泳，那么游泳這個(gè)行為就是小鴨子的能力)

實(shí)例化對(duì)象

至此，我們已經(jīng)創(chuàng)建了一只鴨子類，這時(shí)候鴨子僅僅是一個(gè)初始化狀態(tài)，相當(dāng)于被冰封。我們需要將鴨子解封，可使用new關(guān)鍵字實(shí)例化鴨子對(duì)象。這樣我們便得到一個(gè)全新的鴨子對(duì)象。

new關(guān)鍵字具體干了啥? 可參考如下代碼：

var obj = {};
//取得該方法的第一個(gè)參數(shù)(并刪除第一個(gè)參數(shù))，該參數(shù)是構(gòu)造函數(shù)
var Constructor = [].shift.apply(arguments);
//將新對(duì)象的內(nèi)部屬性__proto__指向構(gòu)造函數(shù)的原型，這樣新對(duì)象就可以訪問(wèn)原型中的屬性和方法
obj.__proto__ = Constructor.prototype;
//取得構(gòu)造函數(shù)的返回值
var ret = Constructor.apply(obj, arguments);
//如果返回值是一個(gè)對(duì)象就返回該對(duì)象，否則返回構(gòu)造函數(shù)的一個(gè)實(shí)例對(duì)象
return typeof ret === "object" ? ret : obj;

對(duì)象中的this

對(duì)于this問(wèn)題，很多初學(xué)者被這個(gè)this指向搞得暈頭轉(zhuǎn)向。其實(shí)搞懂this我們只需要記住一句話誰(shuí)在調(diào)用它，它就指向誰(shuí)，this指向當(dāng)前調(diào)用它的執(zhí)行環(huán)境

經(jīng)典例子：

var obj = {
  foo: function () { console.log(this.bar) },
  bar: 1
};

var foo = obj.foo;
var bar = 2;

obj.foo() // 1
foo() // 2

js中的數(shù)據(jù)類型分為基本數(shù)據(jù)類型和引用數(shù)據(jù)類型?；緮?shù)據(jù)類型是按值訪問(wèn)，引用數(shù)據(jù)類型是按引用訪問(wèn)。對(duì)象將所有的引用放入棧將所有的值放入堆，要獲取一個(gè)對(duì)象值，需要先獲取對(duì)象引用，然后根據(jù)引用找到對(duì)應(yīng)的值。如果引用對(duì)應(yīng)的值是一個(gè)函數(shù)，由于函數(shù)是一個(gè)單獨(dú)的值，可以存在不同的執(zhí)行上下文環(huán)境。那么問(wèn)題來(lái)了，同樣的函數(shù)在不同的環(huán)境下調(diào)用，我們?nèi)绾卧诤瘮?shù)內(nèi)部獲取當(dāng)前執(zhí)行環(huán)境呢?沒(méi)錯(cuò)，this的出現(xiàn)正是為了解決此類場(chǎng)景問(wèn)題。

總結(jié)：一堆屬性和行為聚合到一起便構(gòu)成了一個(gè)最基本的對(duì)象?？赏ㄟ^(guò)new關(guān)鍵字來(lái)實(shí)例化一個(gè)對(duì)象，由于執(zhí)行環(huán)境的不同，對(duì)象內(nèi)部的this指向也不同。在調(diào)用對(duì)象方法時(shí)，需要注意一下this的指向問(wèn)題。

對(duì)象系統(tǒng)

上面我們提到了，一個(gè)基礎(chǔ)對(duì)象的構(gòu)成。但是在我們實(shí)際開(kāi)發(fā)當(dāng)中遠(yuǎn)遠(yuǎn)比這復(fù)雜的多，往往是多層對(duì)象的嵌套或者多個(gè)對(duì)象通過(guò)某個(gè)映射文件相互關(guān)聯(lián)又或者一個(gè)對(duì)象繼承自另一個(gè)對(duì)象... 從而去構(gòu)建一個(gè)更龐大的對(duì)象世界，解決更復(fù)雜的應(yīng)用場(chǎng)景，我們把這種復(fù)雜對(duì)象稱之為 對(duì)象系統(tǒng) ，把這種思想稱之為 面向?qū)ο缶幊?/p>

顯式原型(prototype)

概念：每個(gè)函數(shù)上都有一個(gè)默認(rèn)的prototype屬性使您有能力向?qū)ο筇砑訉傩院头椒ā?/p>

function people(name) {
    this.name = name;
    this.say = function () {
      console.log(`hello！我是${name}`);
    };
}
people.prototype.kungfu = function () {
    console.log(`我是${this.name}，我會(huì)中國(guó)功夫`);
};
const qad = new people('秦愛(ài)德');
const zs = new people('張三');
console.log(qad);
console.log(qad.say());
console.log(qad.kungfu());
console.log(zs);
console.log(zs.say());
console.log(zs.kungfu());

以上代碼創(chuàng)建了一個(gè)people構(gòu)造函數(shù)，在它內(nèi)部添加了一個(gè)name屬性和say方法，在它的原型上添加了一個(gè)kungfu方法

如何理解內(nèi)部屬性和原型屬性呢?

這里我們可以借助css樣式來(lái)便于理解

<style>
    .test{
        font-size:24px
    }
</style>
<p style="color:red" class="test">哈哈</p>

以上我們創(chuàng)建了一個(gè)標(biāo)簽，并向標(biāo)簽添加了一個(gè)內(nèi)聯(lián)樣式和外部樣式，對(duì)齊構(gòu)造函數(shù)的話，內(nèi)聯(lián)樣式對(duì)應(yīng)內(nèi)部屬性，是跟隨函數(shù)獨(dú)有的，外部樣式對(duì)應(yīng)原型屬性，可以是公共的，可在多處使用。

由于每次new一個(gè)新的構(gòu)造函數(shù)，內(nèi)部屬性都會(huì)重新生成，而原型屬性則不會(huì)，所以這也避免了內(nèi)存上的浪費(fèi)。并且可以基于原型實(shí)現(xiàn)原型繼承操作。

構(gòu)造器(constructor)

概念：每個(gè)對(duì)象都會(huì)默認(rèn)一個(gè)contructor，并指向當(dāng)前原型對(duì)象的構(gòu)造函數(shù)。

console.log(qad.__proto__.constructor === people); // true

一圖勝千言

總結(jié)：每個(gè)函數(shù)上都會(huì)自帶一個(gè)prototype原型，在原型上添加的屬性可以共用，函數(shù)即對(duì)象，對(duì)象自帶屬性constructor指向了這個(gè)構(gòu)造函數(shù)

隱式原型(proto)

概念：每個(gè)對(duì)象都有一個(gè)_proto_屬性，指向了創(chuàng)建該對(duì)象的構(gòu)造函數(shù)的原型。

console.log(qad.__proto__ === people.prototype); // true

萬(wàn)事萬(wàn)物皆對(duì)象，函數(shù)也是一個(gè)對(duì)象，只要是對(duì)象，就擁有_proto_屬性，所以_proto_在構(gòu)造器和原型之間建立了一個(gè)連接，通過(guò)由內(nèi)向外在構(gòu)造器中找到原型的屬性和方法。

原型鏈

當(dāng)我們創(chuàng)建了一個(gè)構(gòu)造函數(shù)，并訪問(wèn)里面的某一個(gè)屬性時(shí)。會(huì)先從構(gòu)造函數(shù)自身去找，再?gòu)娘@式原型(prototype)上去找，再?gòu)碾[式原型(__proto__)上去找，再?gòu)膐bject的__proto__上去找，直到null。有值就返回相應(yīng)的值，沒(méi)有就返回undefined，我們把這個(gè)由內(nèi)向外的查找過(guò)程稱之為原型鏈

一圖勝千言

用好面向?qū)ο笏枷?/h2>

上面提到我們可以通過(guò)使用對(duì)象去構(gòu)建現(xiàn)實(shí)世界的模型，并將復(fù)雜問(wèn)題簡(jiǎn)單化。要想運(yùn)用好面向?qū)ο笏枷?，我們需要牢記面向?qū)ο蟮娜筇卣骱蛶讉€(gè)原則

三大特征

1：封裝

中華文化博大精深，將詞語(yǔ)拆分之后，發(fā)現(xiàn)更好理解了

封：封存(將一系列行為、屬性、業(yè)務(wù)邏輯等等封存起來(lái))

裝：包裝(提供一個(gè)容器來(lái)存放封存起來(lái)的代碼，包裝之后，對(duì)外輸出)

封裝里面還有一個(gè)概念叫做抽象，拆分之后也很好理解(把”像“的東西抽出來(lái))

結(jié)合起來(lái)就是：我們把相似雷同的一堆屬性、行為、邏輯抽離出來(lái)，存放到一個(gè)包裝對(duì)象里面，控制好入?yún)⒑统鰠⒈阌谒苏{(diào)用，這就是封裝。

2：繼承

繼：繼續(xù)(繼續(xù)延續(xù)下去)

承：承擔(dān)(承擔(dān)延續(xù)下來(lái)的重任，并發(fā)揚(yáng)光大)

結(jié)合起來(lái)就是：子類繼續(xù)沿用父類的行為或?qū)傩?，并合理改造拓展業(yè)務(wù)，輸出新的對(duì)象。頗有點(diǎn)子承父業(yè)，青出于藍(lán)的意思。

3：多態(tài)

多：多種

態(tài)：狀態(tài) / 形態(tài)

結(jié)合起來(lái)就是：同一個(gè)實(shí)例對(duì)象在多種狀態(tài)下有不同的展示形態(tài)

簡(jiǎn)單理解就是一個(gè)函數(shù)通過(guò)入?yún)⒉煌?，可以得到不同的輸出結(jié)果

幾個(gè)原則

1：?jiǎn)我宦氊?zé)原則

一個(gè)類或者一個(gè)函數(shù)實(shí)現(xiàn)功能要單一，不能雜亂無(wú)章，越純粹越好。一旦函數(shù)變得不純粹了，內(nèi)部實(shí)現(xiàn)多個(gè)功能。當(dāng)我們?cè)诙嗵幍胤绞褂眠@個(gè)函數(shù)的時(shí)候往往會(huì)因?yàn)椴粔蚣兇舛鄬懞芏嗉嫒荽a。

2：開(kāi)放封閉原則

一個(gè)類在拓展性方便應(yīng)該是保持開(kāi)放的，對(duì)更改性應(yīng)該是封閉的。比如我們封裝了一個(gè)函數(shù)，應(yīng)該盡量預(yù)留好口子，以便日后新功能迭代，而避免直接更改之前已經(jīng)寫好的代碼。

3：里氏替換原則

里氏替換原則主要是用來(lái)約束繼承的，子類可以擴(kuò)展父類的功能，但不能改變父類原有的功能。如果子類不能完整地實(shí)現(xiàn)父類方法，或者父類的某些方法在子類中已經(jīng)發(fā)生“畸變”，則建議斷開(kāi)父子繼承關(guān)系，采用依賴、聚集、組合等關(guān)系來(lái)代替繼承。

4：依賴倒置原則

上層模塊不應(yīng)該依賴于下層模塊，兩者都應(yīng)該依賴其抽象。簡(jiǎn)而言之就是面向接口開(kāi)發(fā)，每個(gè)類都提供接口或者抽象類，抽象類往往是比較穩(wěn)定的，當(dāng)下層細(xì)節(jié)發(fā)生變化時(shí)，不應(yīng)該直接影響上層。細(xì)節(jié)依賴于抽象，只要抽象不變，程序就不要變化。

5：組合聚合復(fù)用原則

在代碼復(fù)用時(shí)，要盡量先使用組合或者聚合等關(guān)聯(lián)關(guān)系來(lái)實(shí)現(xiàn)，其次才考慮使用繼承關(guān)系來(lái)實(shí)現(xiàn)。

6：高類聚低耦合

顧名思義就是高度類似的東西要聚集起來(lái)，低相似的東西不要將它們耦合到一起

js本身就是一門面向?qū)ο缶幊痰恼Z(yǔ)言，在我們的日常開(kāi)發(fā)中，每時(shí)每刻都在享受著面向?qū)ο蠼o我們帶來(lái)的編程體驗(yàn)。