學(xué)習(xí)js的朋友們都知道，面向?qū)ο笫亲铍y理解的一個(gè)部分，下面給大家分享一下對(duì)象object的理解，本篇文章主要分享面對(duì)對(duì)象的封裝。

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

　　首先我們知道每個(gè)物體都是一個(gè)對(duì)象，舉例來(lái)說(shuō)，“狗”作為一個(gè)對(duì)象，他有“種類(lèi)”和“顏色”兩個(gè)屬性。

　　var Dog = {

　　type : '',

　　color: ''

　　}

　　然后，我們需要?jiǎng)?chuàng)建兩個(gè)實(shí)例化對(duì)象

　　var dog1 = {

　　type : '中華田園犬',

　　color: '灰色'

　　}

　　var dog2 = {

　　type : '秋田犬',

　　color: '白色'

　　}

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

　　二，原始模式升級(jí)

　　重復(fù)的代碼，我們可以寫(xiě)一個(gè)函數(shù)來(lái)解決

　　function Dog(type,color){

　　return {

　　type : type ,

　　color : color

　　}

　　}

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

　　var dog1 = Dog("中華田園犬",'灰色');

　　var dog2 = Dog("秋田犬",'白色');

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

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

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

　　function Dog(type,color) {

　　this.type = type ;

　　this.color = color ;

　　}

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

　　var dog1 = new Dog("中華田園犬",'灰色');

　　var dog2 = new Dog("秋田犬",'白色');

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

　　console.log(dog1.constructor == Dog) // true

　　console.log(dog2.constructor == Dog) // true

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

　　console.log(dog1 instanceof Dog) // true

　　console.log(dog2 instanceof Dog) // true

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

　　function Dog(type,color) {

　　this.type = type ;

　　this.color = color ;

　　this.age = 2 ;

　　this.eat = function(){

　　console.log('狗吃骨頭')

　　}

　　}

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

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

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

　　四，prototype模式

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

　　function Dog(type,color) {

　　this.type = type ;

　　this.color = color ;

　　}

　　Dog.prototype.age = 2 ;

　　Dog.prototype.eat = function(){

　　console.log('狗吃骨頭')

　　}

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

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

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

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

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

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

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

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

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

　　更多關(guān)于前端培訓(xùn)的問(wèn)題，歡迎咨詢(xún)千鋒教育在線名師。千鋒教育擁有多年IT培訓(xùn)服務(wù)經(jīng)驗(yàn)，采用全程面授高品質(zhì)、高體驗(yàn)培養(yǎng)模式，擁有國(guó)內(nèi)一體化教學(xué)管理及學(xué)員服務(wù)，助力更多學(xué)員實(shí)現(xiàn)高薪夢(mèng)想。