【9】JavaScript 面向對象高級——對象創建模式

JavaScript面向對象高級——對象創建模式

一、Object構造函數模式

方式1: Object構造函數模式

• 流程: 先創建空Object對象, 再動態添加屬性/方法。
• 適用場景: 起始時不確定對象內部數據。
• 問題: 語句太多。

/*
一個人: name:"Tom", age: 12
 */
// 先創建空Object對象
var p = new Object()
p = {} //此時內部數據是不確定的
// 再動態添加屬性/方法
p.name = 'Tom'
p.age = 12
p.setName = function (name) {
  this.name = name
}

//測試
console.log(p.name, p.age) // Tom 12
p.setName('Bob')
console.log(p.name, p.age) // Bob 12

二、對象字面量模式

方式2: 對象字面量模式

• 流程: 使用{}創建對象, 同時指定屬性/方法。
• 適用場景: 起始時對象內部數據是確定的。
• 問題: 如果創建多個對象, 有重複代碼。

var p = {
  name: 'Tom',
  age: 12,
  setName: function (name) {
    this.name = name
  }
}

//測試
console.log(p.name, p.age)  // Tom 12
p.setName('JACK')
console.log(p.name, p.age)  // JACK 12

var p2 = {  //如果創建多個對象代碼很重複
  name: 'Bob',
  age: 13,
  setName: function (name) {
    this.name = name
  }
}

三、工廠模式

方式3: 工廠模式

• 流程: 通過工廠函數動態創建對象並返回。
• 適用場景: 需要創建多個對象。
• 問題: 對象沒有一個具體的類型, 都是Object類型。

function createPerson(name, age) { //返回一個對象的函數===>工廠函數
  var obj = {
    name: name,
    age: age,
    setName: function (name) {
      this.name = name
    }
  }
  return obj
}

// 創建2個人
var p1 = createPerson('Tom', 12)
var p2 = createPerson('Bob', 13)
// p1/p2是Object類型

function createStudent(name, price) {
  var obj = {
    name: name,
    price: price
  }
  return obj
}

var s = createStudent('張三', 12000)
// s也是Object類型

四、自定義構造函數模式

方式4: 自定義構造函數模式

• 流程: 自定義構造函數, 通過new創建對象。
• 適用場景: 需要創建多個類型確定的對象。
• 問題: 每個對象都有相同的數據, 浪費內存。

//定義類型
function Person(name, age) {
  this.name = name
  this.age = age
  this.setName = function (name) {
    this.name = name
  }
}

var p1 = new Person('Tom', 12)
p1.setName('Jack')
console.log(p1.name, p1.age)  // Jack 12
console.log(p1 instanceof Person)  // true

// 定義類型
function Student (name, price) {
  this.name = name
  this.price = price
}

var s = new Student('Bob', 13000)
console.log(s instanceof Student)  // true

var p2 = new Person('JACK', 23)
console.log(p1, p2) // Person{age:12, name:"Jack",...}  Person{age:23, name:"Jack",...}

五、組合模式（構造函數+原型）

方式5: 構造函數+原型的組合模式

• 流程: 自定義構造函數, 屬性在函數中初始化, 方法添加到原型上。
• 適用場景: 需要創建多個類型確定的對象。

function Person(name, age) { //在構造函數中只初始化一般函數
  this.name = name
  this.age = age
}

Person.prototype.setName = function (name) {
  this.name = name
}

var p1 = new Person('Tom', 23)
var p2 = new Person('Jack', 24)
console.log(p1, p2)