首頁 > web前端 > js教程 > 創建物件的有哪幾種模式?

創建物件的有哪幾種模式?

零下一度
發布: 2017-06-26 11:29:27
原創
1553 人瀏覽過

1 new Object()

先建立一個Object實例,然後為它新增屬性和方法

var Person = new Object()
Person.name = 'hl'
Person.sayName = function () {
  console.log(this.name)
}
登入後複製

2 物件字面量法

物件字面量法是創建物件最快捷方便的方式,在許多場景下被使用。

var Person = {
  name: 'hl',
  sayName: function () {
    console.log(this.name)
  }
}
登入後複製

物件字面量法的缺點是創建多個同類物件時,會產生大量重複程式碼,因此有了工廠模式。

3 工廠模式

工廠模式用函數封裝了建立物件的細節,呼叫函數時傳入物件屬性,然後傳回一個物件。

function createPerson (name) {
  return {
    name: name,
    sayName: function () {
      console.log(this.name)
    }
  }
}
var person = createPerson('hl')
var person = new createPerson('hl') // 寄生构造函数模式
登入後複製

透過使用 new 運算子也可以獲得相同的結果,這種方法被稱為寄生建構函數模式,(應該)與直接呼叫函數沒什麼區別。
工廠模式雖然解決了創建多個同類物件的問題,卻無法辨識物件是哪種特定類型。

4 建構子模式

透過建構子建立的對象,可以使用 instanceof 運算子可以確定物件的型別。依照程式設計慣例,建構函式命名應該要大寫,以和普通的函數區分開來。

function Person (name) {
  this.name = name
  this.sayName = function () {
    console.log(this.name)
  }
}
p = new Person('hl')
p instanceof Person // true
登入後複製

建構子的特點:

  • 沒有顯示的建立物件

  • 屬性與方法直接賦值給this

  • 沒有return 語句

  • 使用new 運算子建立物件

##建構子的缺點是每個方法都會在每個實例上重新創建一遍,造成了記憶體浪費。

5 原型模式

使用原型模式,可以方便的為物件新增屬性和方法。

function Person () {
}
var p = new Person()
Person.prototype.name = 'hl'
Person.prototype.sayName = function () {
  console.log(this.name)
}
p.sayName() // hl
登入後複製
原型具有動態性,即先建立物件再修改原型,實例也可以獲得對應的屬性和方法。

原型模式也並非沒有缺點,第一,原型模式不能傳遞初始化參數,導致每個實例都會獲得相同的屬性;第二,對於引用類型的值,所有實例引用的是同一個對象,看下面的範例:

function Person () {
}
Person.prototype.relative = ['father','mother']

var person1 = new Person()
var person2 = new Person()
person1.relative.push('sister')
console.log(person2.relative) // [ 'father', 'mother', 'sister' ]
登入後複製
修改person1的屬性,person2的屬性也被修改了。實例一般是需要有屬於自己的屬性的,因此很少單獨使用原型模式。

6 組合使用建構函式模式和原型模式

建立物件最常用的方式,就是組合使用建構函式模式和原型模式。建構函數用於自訂屬性,原型模式用於定義共享的屬性和方法。

function Person (name) {
  this.name = name
}
Person.prototype.sayName = function () {
  console.log(this.name)
}
登入後複製
7 動態原型模式

原型可以在建構函式中初始化,以便更好的封裝物件建立過程。

function Person(name) {
  this.name = name
  if (typeof this.sayName !== 'function') {
    Person.prototype.setName= function (name) {
      this.name = name
    }
    Person.prototype.sayName = function () {
      console.log(this.name)
    }
  }
}
登入後複製
不必用if檢查每一個屬性或方法,只需要檢查原型初始化後應該存在的其中一個屬性或方法即可。

8 穩健建構子模式

穩健物件指的是沒有公共屬性,其屬性和方法也不引用this對象,並且不使用 new 操作符建立物件。適合用在一些需要安全的環境中,防止資料被修改。

function Person (name) {
  return {
    sayName: function () {
      console.log(name)
    }
  }
}
var person = Person('hl')
登入後複製
穩妥模式所建立的對象,除了使用建構函式內定義的方法,沒有辦法修改和存取傳入到建構函式中的原始資料。

以上是創建物件的有哪幾種模式?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板