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

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

1、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、對象字面量模式

方式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、工廠模式

方式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、自定義構造函數模式

方式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、組合模式（構造函數+原型）

方式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)