學習js的朋友們都知道，面向對象是最難理解的一個部分，下面給大家分享一下對象object的理解，本篇文章主要分享面對對象的封裝。

　　一，關于實例對象的原始模式

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

　　var Dog = {

　　type : '',

　　color: ''

　　}

　　然后，我們需要創建兩個實例化對象

　　var dog1 = {

　　type : '中華田園犬',

　　color: '灰色'

　　}

　　var dog2 = {

　　type : '秋田犬',

　　color: '白色'

　　}

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

　　二，原始模式升級

　　重復的代碼，我們可以寫一個函數來解決

　　function Dog(type,color){

　　return {

　　type : type ,

　　color : color

　　}

　　}

　　接著再調用函數，生成實例化對象

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

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

　　這種方法可以解決生成多個實例化對象代碼復雜的問題，但是dog1和dog2之間沒有產生關聯，也就是依然沒有體現出他們其實是原型對象Dog的實例。

　　三，構造函數

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

　　function Dog(type,color) {

　　this.type = type ;

　　this.color = color ;

　　}

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

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

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

　　這里我們可以看到關鍵字new , 也就是實際上Dog是一個對象，dog1和dog2是Dog這個對象的實例化對象;為了驗證這一點，js提供了一個屬性constructor，此屬性用于指向他們的構造函數

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

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

　　當然，js還有另一個運算符 instanceof，可以驗證原型對象與實例化對象之間的關系。

　　console.log(dog1 instanceof Dog) // true

　　console.log(dog2 instanceof Dog) // true

　　到構造函數這里看似已經很完美了，但是，這里存在一個很大的弊端，也就是內存浪費。舉例來說，我們現在給Dog對象添加一個不變的屬性和方法如下：

　　function Dog(type,color) {

　　this.type = type ;

　　this.color = color ;

　　this.age = 2 ;

　　this.eat = function(){

　　console.log('狗吃骨頭')

　　}

　　}

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

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

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

　　四，prototype模式

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

　　function Dog(type,color) {

　　this.type = type ;

　　this.color = color ;

　　}

　　Dog.prototype.age = 2 ;

　　Dog.prototype.eat = function(){

　　console.log('狗吃骨頭')

　　}

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

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

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

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

　　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

　　更多關于前端培訓的問題，歡迎咨詢千鋒教育在線名師。千鋒教育擁有多年IT培訓服務經驗，采用全程面授高品質、高體驗培養模式，擁有國內一體化教學管理及學員服務，助力更多學員實現高薪夢想。