js - 对象创建模式

<script>
  /*
    对象创建模式
  */
  
  /*
    方式一：Object构造函数模式
      套路：先创建空Object对象，再动态添加属性/方法
      适用场景：起始时不确定对象内部数据
      存在问题：语句太多
  */
  // 一个人：name:'Tom', age:'30'
  var p1 = new Object()
  p1.name = 'Tom'
  p1.age = 30
  p1.setName = function(name){
    this.name = name
  }
  // 测试
  p1.setName('Bob')
  console.log(p1.name, p1.age)

  /*
    方式二：对象字面量
      套路：使用{}创建对象，同时指定属性/方法
      使用场景：起始时对象内部数据是确定的
      存在问题：如果创建多个对象，有重复代码
  */
  // 创建一个对象只需要一个语句，解决了Object构造函数模式中语句太多问题
  var p2 = {
    name: 'Tom',
    age: '30',
    setName: function(name){
      this.name = name
    }
  }
  // 代码无法复用，如果需要创建第二个对象，就会存在重复代码
  var p22 = {
    name: 'Bene',
    age: '30'
  }

  /*
    方式三：工厂模式
      套路：通过工厂函数动态创建对象并返回
      适用场景：需要创建多个对象
      存在问题：对象没有一个具体的类型，都是Object类型
  */
  // 工厂函数：返回一个对象的函数
  function createPerson(name, age){
    var obj = {
      name: name,
      age: age
    }
    return obj
  }
  // 可以动态创建多个对象
  var p3 = createPerson('Tom', 30)
  var p33 = createPerson('Bene', 30)

  function createActor(name, age){
    var obj = {
      name: name,
      age: age
    }
    return obj
  }
  var a = createActor('Tom', 30) // p3和a都是Object类型，没办法判断其具体类型

  /*
    方式四：自定义构造函数模式
      套路：自定义构造函数，通过new创建对象
      适用场景：需要创建多个类型确定的对象
      存在问题：每个对象都有相同的数据，浪费内存
  */
  function Person(name, age){
    this.name = name
    this.age = age
    this.setName = function(name){
      this.name = name
    }
  }
  var p4 = new Person('Tom', 30)
  console.log(p4 instanceof Person) // true

  function Actor(name, age){
    this.name = name
    this.age = age
    this.setName = function(name){
      this.name = name
    }
  }
  var a4 = new Actor('Tom', 30)
  console.log(a4 instanceof Actor) // true 可以判断出对象的具体类型

  console.log(p4, a4)

  /*
    方式五：构造函数+原型的组合模式
      套路：自定义构造函数，属性在函数中初始化，方法添加到原型上
      适用场景：需要创建多个类型确定的对象
  */
  function Student(name, age){
    this.name = name
    this.age = age
  }
  // 方法添加到原型上，节省内存
  Student.prototype.setName = function(name){
    this.name = name
  }
</script>