物件的建立模式大概有這幾種：

• Object建構函式模式
• 物件字面量
• 工廠模式
• 自定義建構函式模式
• 建構函式+原型的組合模式

Object建構函式模式

Object建構函式模式

• 套路: 先建立空Object物件, 再動態新增屬性/方法
• 適用場景: 起始時不確定物件內部資料
• 問題: 語句太多

<script type="text/javascript">
  /*
  一個人: 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)
  p.setName('Bob')
  console.log(p.name, p.age)

</script>

 

物件字面量模式

• 套路: 使用{}建立物件, 同時指定屬性/方法
• 適用場景: 起始時物件內部資料是確定的
• 問題: 如果建立多個物件, 有重複程式碼

<script type="text/javascript">
  var p = {
    name: 'Tom',
    age: 12,
    setName: function (name) {
      this.name = name
    }
  }

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

  var p2 = {  //如果建立多個物件程式碼很重複
    name: 'Bob',
    age: 13,
    setName: function (name) {
      this.name = name
    }
  }

</script>

 

工廠模式

• 套路: 通過工廠函式動態建立物件並返回
• 適用場景: 需要建立多個物件
• 問題: 物件沒有一個具體的型別, 都是Object型別

<script type="text/javascript">
  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

</script>
 

自定義建構函式模式

• 套路: 自定義建構函式, 通過new建立物件
• 適用場景: 需要建立多個型別確定的物件
• 問題: 每個物件都有相同的資料, 浪費記憶體

<script type="text/javascript">
  //定義型別
  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)
  console.log(p1 instanceof Person)

  function Student (name, price) {
    this.name = name
    this.price = price
  }
  var s = new Student('Bob', 13000)
  console.log(s instanceof Student)

  var p2 = new Person('JACK', 23)
  console.log(p1, p2)
  
</script>

建構函式+原型的組合模式

• 套路: 自定義建構函式, 屬性在函式中初始化, 方法新增到原型上
• 適用場景: 需要建立多個型別確定的物件

<script type="text/javascript">
  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)

</script>