JS建立對象幾種不同方法詳解,js建立對象詳解

來源:互聯網
上載者:User

JS建立對象幾種不同方法詳解,js建立對象詳解

本文介紹了幾種js建立對象的方法,分享給大家供大家參考,具體內容如下

1、原廠模式

弊端:沒有解決對象的識別問題,即怎麼知道一個對象的類型。

2、建構函式模式

 

與原廠模式相比:
1、沒有顯式的建立對象
2、直接將屬性和方法賦給了this對象
3、沒有return語句
要建立person的執行個體,必須使用new操作符,以這種方式調用建構函式實際上會經曆4個步驟:
1、建立一個新對象
2、將建構函式的範圍賦給新對象
3、執行建構函式中的代碼
4、返回新對象
建立自訂的建構函式可以將它的執行個體標識為一種特定的類型。
建構函式的缺點:
每個方法都有在每個執行個體上重新建立一遍。person1和person2都有一個sayName()的方法,但兩個方法不是同一個Function執行個體。不同執行個體上的同名函數是不相等的。
建立兩個完成同樣任務的Function執行個體沒有必要,而且還有this對象在,不需要在執行代碼前就把函數綁定在特定對象上,可以像下面這樣。

 

把sayName屬性設定成全域的sayName函數,這樣,由於sayName包含的是一個指向函數的指標,因此person1和person2對象就共用了同一個函數。
但是,如果對象需要定義很多方法,那麼就要定義很多全域函數,自訂的參考型別也沒有封裝可言了。為瞭解決上述問題,引入原型模式。

3、原型模式

理解原型對象
我們建立的每個函數都有一個prototype屬性,這個屬性是一個指標,指向一個對象,而這個對象的用途是包含可以由特定類型的所有執行個體共用的屬性和方法。prototype是通過調用建構函式而建立的那個對象執行個體的對象原型,使用原型對象的好處是可以讓所有對象執行個體共用它所包含的屬性和方法。

 

首先,解析器會問執行個體person1是否有name屬性,如果有,就返回。
如果沒有,就繼續去person1的原型中搜尋name屬性,如果有就返回。
如果沒有,再繼續向person1的原型的原型中搜尋。

 

isPrototypeOf()確定執行個體和原型對象之間的關聯
console.log(Person.prototype.isPrototypeOf(person1)); //true
Object.getPrototypeOf()返回的是[[prototype]]的值
console.log(Object.getPrototypeOf(person1));
//Person {name: “Yvette”, age: 26, job: “engineer”} 返回的是Person的原型對象。
console.log(Object.getPrototypeOf(person1) === Person.prototype)//true
console.log(Object.getPrototypeOf(person1).name);//”Yvette”
hasOwnProperty()方法可以檢測一個屬性是存在於執行個體中,還是存在於原型中,只有給定屬性存在於執行個體中,才會返回true。
console.log(person1.hasOwnProperty(“name”));//false
原型與in操作符
有兩種方式使用in操作符:單獨使用和在for-in迴圈中使用。單獨使用時,in操作符會在通過對象能夠訪問給定屬性時返回true,無論該屬性在於執行個體中還是原型中。
使用for in迴圈,返回的是所有能夠通過對象訪問的、可枚舉的屬性,其中既包括執行個體中的屬性,也包括存在於原型中的屬性。如果執行個體中的屬性屏蔽了原型中不可枚舉的屬性,那麼也會返回。IE9之前的版本實現上有一個Bug,屏蔽不可枚舉屬性的執行個體屬性不會在for-in中返回。

 

在IE9之前的吧按本中沒有log資訊。儘管person執行個體中的toString()方法屏蔽了原型中的不可 枚舉的toString();
原型簡寫

 

這導致了person1.constructor不再指向Person,而是指向了Object。如果constructor很重要,則需要特意將其設為適當的值,如:

 

但是這種方式會導致constructor屬性變成可枚舉。
如果想設定為不可枚舉的(預設不可枚舉),可以使用Object.defineProperty(Person.prototype, “constructor”, {
enumerable: false,
value: Person
});
原型的動態性
由於在原型中尋找值的過程是一次搜尋,因此我們對原型對象所做的任何修改都能夠立即從執行個體上反映出來。
如果重寫整個原型對象,情況就不一樣了。調用建構函式時會為執行個體添加一個指向最初原型的[[prototype]]指標,而把原型修改為另外一個對象就等於切斷了建構函式與最初原型之間的聯絡。執行個體中的指標僅指向原型,而不指向建構函式。

 

person.prototype指向的是原本的原型對象,而不會指向新的原型對象。
原型對象的問題
原型模式最大問題是由其共用的本性所導致的。
對於包含參考型別值的屬性來說,問題較為突出

 

本意只想修改person1的friends,但是卻導致person2的friends屬性值也改變了。因此我們很少單獨使用原型模式。

4、組合使用構造模式和原型模式

建立自訂類型的最常用的方式,就是組合使用建構函式模式與原型模式。建構函式模式用於定義執行個體屬性,原型模式用於定義方法和共用的屬性,這樣每個執行個體都有自己的一份執行個體屬性的副本,又同時共用著對方法的引用,最大限度的節省了記憶體。
 

除了以上幾種方式以外,另外還有動態原型模式,寄生構造模式和穩妥構造模式,但是鑒於使用頻率較低,不再贅述。

您可能感興趣的文章:
  • JS 建立對象(常見的幾種方法)
  • JavaScript 建立對象
  • JavaScript 三種建立對象的方法
  • js建立對象的幾種常用方式小結(推薦)
  • javascript的函數、建立對象、封裝、屬性和方法、繼承
  • js物件導向 多種建立對象方法小結
  • JavaScript建立對象的寫法
  • javascript中建立對象的幾種方法總結
  • js中建立對象的幾種方式樣本介紹
  • js建立對象的方式總結

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.