JavaScript對(duì)象創(chuàng)建模式

1.object構(gòu)造函數(shù)

  • 先創(chuàng)建空object對(duì)象,再動(dòng)態(tài)添加屬性/方法
  • 適用場景:起始時(shí)不確定對(duì)象內(nèi)部數(shù)據(jù)
  • 存在問題:語句太多
let p = new Object()
p.name = 'Tom'
p.age = 12
p.setName = function(name) {
  this.name = name
}
p.setName("JACK")
console.log(p.name,p.age) //JACK 12

2.對(duì)象字面量模式

  • 使用{}創(chuàng)建對(duì)象,同時(shí)指定屬性/方法
  • 適用場景:起始時(shí)對(duì)象內(nèi)部數(shù)據(jù)是確定的
  • 存在問題: 如果創(chuàng)建多個(gè)對(duì)象,有重復(fù)代碼
let p = {
  name: 'Tom',
  age: 12,
  setName: function (name) {
    this.name = name
  }
}

3.工廠模式

  • 通過工廠函數(shù)動(dòng)態(tài)創(chuàng)建對(duì)象并返回
  • 適用場景:需要?jiǎng)?chuàng)建多個(gè)對(duì)象
  • 存在問題:對(duì)象沒有一個(gè)具體的類型,都是Object類型(所以此種方法較為少用)
  • 工廠函數(shù):返回一個(gè)對(duì)象的函數(shù)
function createPerson(name,age) {
  let obj = {
    name: name,
    age: age,
    setName: function(name) {
      this.name = name
    }
  }
  return obj
}
let p1 = createPerson('Tom',12)
let p2 = createPerson('Jack',13)

4.自定義構(gòu)造函數(shù)模式

  • 自定義構(gòu)造函數(shù),通過new創(chuàng)建對(duì)象
  • 適用場景:解決了工廠模式的問題,需要?jiǎng)?chuàng)建多個(gè)類型確定的對(duì)象
  • 存在問題:每個(gè)對(duì)象都有相同的數(shù)據(jù),浪費(fèi)內(nèi)存(例如p1和p2都是從Person構(gòu)造函數(shù)中產(chǎn)生的,那么它們都共同擁有相同的方法,該方法重復(fù)了占用了內(nèi)存,故最好將其放在原型中)
function Person(name,age) {
  this.name = name
  this.age = age
  this.setName = function(name) {
    this.name = name
  }
}
let p1 = new Person('Tom',12)
p1.setName('Jack')
console.log(p1.name,p1.age) //Jack 12

5.構(gòu)造函數(shù)+原型模式

  • 自定義構(gòu)造函數(shù),屬性在函數(shù)中初始化,方法添加在原型上
  • 適用場景:需要?jiǎng)?chuàng)建多個(gè)類型確定的對(duì)象
function Person(name,age) {
  this.name = name
  this.age = age
}
Person.prototype.setName = function(name) {
  this.name = name
}
let p1 = new Person('Tom',12)
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容