對編程有了解的同學(xué)都知道，面向?qū)ο笫且粋€非常難以理解的概念，下面給大家分享一下對象object的理解，本篇文章主要分享面對對象的封裝。當(dāng)然現(xiàn)實生活中面向?qū)ο笠餐﹄y的，哈哈哈~

      一，關(guān)于實例對象的原始模式

      首先我們知道每個物體都是一個對象，舉例來說，“狗”作為一個對象，他有“種類”和“顏色”兩個屬性。

      然后，我們需要創(chuàng)建兩個實例化對象

      這也是最基礎(chǔ)的對象封裝，也就是把“種類”和“顏色”兩個屬性放在一個對象里面。但是問題來了，這種寫法有兩個問題：一是如果要生成很多個實例化對象，就需要重復(fù)很多遍，很麻煩；二是他們與原型Dog結(jié)構(gòu)很相似，但是實際上沒有建立直接的聯(lián)系。

      二，原始模式升級

      重復(fù)的代碼，我們可以寫一個函數(shù)來解決

      接著再調(diào)用函數(shù)，生成實例化對象

      這種方法可以解決生成多個實例化對象代碼復(fù)雜的問題，但是dog1和dog2之間沒有產(chǎn)生關(guān)聯(lián)，也就是依然沒有體現(xiàn)出他們其實是原型對象Dog的實例。

      三，構(gòu)造函數(shù)

      為了解決讓實例化對象需要從原型對象生成的問題，js提供了構(gòu)造函數(shù)這樣一個概念。當(dāng)然其實構(gòu)造函數(shù)本質(zhì)上也就是一個普通函數(shù)，只不過函數(shù)內(nèi)部使用了this，為了區(qū)分于普通函數(shù)，我們一般對構(gòu)造函數(shù)首字母大寫，具體代碼如下：

      有了這個構(gòu)造函數(shù)，我們就可以生成實例化對象了，具體代碼如下：

      這里我們可以看到關(guān)鍵字new , 也就是實際上Dog是一個對象，dog1和dog2是Dog這個對象的實例化對象；為了驗證這一點(diǎn)，js提供了一個屬性constructor，此屬性用于指向他們的構(gòu)造函數(shù)

      當(dāng)然，js還有另一個運(yùn)算符 instanceof，可以驗證原型對象與實例化對象之間的關(guān)系。

      到構(gòu)造函數(shù)這里看似已經(jīng)很完美了，但是，這里存在一個很大的弊端，也就是內(nèi)存浪費(fèi)。舉例來說，我們現(xiàn)在給Dog對象添加一個不變的屬性和方法如下：

      當(dāng)然這里生成實例化方法也還是一樣的，但是這里會有一個很大的問題：也就是我們會發(fā)現(xiàn)age屬性和eat()方法明明是一模一樣的內(nèi)容，但是由于每次生成實例化對象時，都會生成同樣的內(nèi)容，多造成內(nèi)存浪費(fèi)。

      console.log(dog1.eat == dog2.eat); // false

      如果能讓age和eat()在內(nèi)存中只生成一次，讓實例化對象指向同一個內(nèi)存地址就更完美了。

      四，prototype模式

      js為每一個構(gòu)造函數(shù)都提供了一個prototype屬性，讓他指向另一個對象，而這個對象的所有屬性和方法都會被構(gòu)造函數(shù)的實例對象繼承。這也就意味著，只要我們把那些不變的屬性和方法定義在prototype對象上即可。

      接著再生成實例，此時，所有實例的age個eat()方法都會指向同一個內(nèi)存地址，也就是prototype對象，這樣也就避免了內(nèi)存浪費(fèi)問題，從而提供運(yùn)行效率。

      console.log(dog1.eat == dog2.eat); // true

      當(dāng)然為了驗證這一問題，js定義了一些輔助屬性。

      1. isPrototypeOf() , 此方法用于驗證prototype對象和實例化對象之間的關(guān)聯(lián)

      console.log(Dog.prototype.isPrototypeOf(dog1)); // true

      console.log(Dog.prototype.isPrototypeOf(dog2)); // true

      2. HasOwnProperty() , 每個實例化對象都有此方法，顧名思義，這個方法是用于驗證屬性是自有的還是繼承自prototype對象的 ； 這里很顯然type是自有屬性，而age是繼承自prototype對象。

      console.log(dog1.hasOwnProperty('type')) // true

      console.log(dog1.hasOwnProperty('age')) // false

      最后想學(xué)習(xí)學(xué)習(xí)web前端的同學(xué)，可以參考千鋒web前端培訓(xùn)班提供的web前端學(xué)習(xí)路線，該學(xué)習(xí)路線對從零基礎(chǔ)小白到web前端初級開發(fā)工程師，web前端高級開發(fā)工程師，后面的web前端大神級開發(fā)工程師都有一個明確清晰的指導(dǎo)，根據(jù)千鋒web前端培訓(xùn)機(jī)構(gòu)提供的web前端學(xué)習(xí)路線圖可以讓你對學(xué)習(xí)web前端開發(fā)需要掌握的知識有個清晰的了解，并快速入門web前端開發(fā)。想要獲取前端完整學(xué)習(xí)路線和免費(fèi)的學(xué)習(xí)資料可以添加我們的web前端技術(shù)分享交流qq群：857920838  加群找群管理領(lǐng)取即可，等你來哦~~