JavaScript对象创建模式

JavaScript对象创建模式

Object构造函数模式

用法:先创建空Object对象,再动态添加属性/方法
适用场景:起使时不确定对象内部数据
问题:语句太多
代码解析:

  var p = new Object()
  p = {}
  p.name = 'Tom'
  p.age = 12
  p.setName = function (name) {
    this.name = name
  }
  p.setaAge = function (age) {
    this.age = age
  }
  console.log(p)

对象字面量模式

用法:使用{}创建对象,同时指定属性/方法
适用场景:起始时对象内部数据是确定的
问题:如果出昂见多个对象,有重复代码
代码解析:

 var p = {
    name: 'Tom',
    age: 23,
    setName: function (name) {
      this.name = name
    }
  }
  console.log(p.name, p.age)  //Tom 23
  p.setName('JACK')
  console.log(p.name, p.age)  //JACK 23
  }

工厂模式

用法:通过工厂函数动态创建对象并返回
适用场景:需要创建多个对象
问题:对象没有一个具体类型,都是Object类型
代码解析:

//工厂函数:返回一个需要的数据的函数
function createPerson(name, age) {
    var p = {
      name: name,
      age: age,
      setName: function (name) {
        this.name = name
      }
    }
    return p
  }
  var p1 = createPerson('Tom', 12)
  var p2 = createPerson('JAck', 13)
  console.log(p1)   //Object
  console.log(p2)   //Object

自定义构造函数模式

用法:自定义构造函数,通过new创建对象
适用场景:需要创建多个类型确定的对象
问题:每个对象都有相同的数据,浪费内存
代码解析:

function Person(name, age) {
    this.name = name
    this.age = age
    this.setName = function (name) {
      this.name = name
    }
  }
  var p1 = new Person('Tom', 12)
  var p2 = new Person('Tom2', 13)
  console.log(p1, p1 instanceof Person) //true

构造函数+原型的组合模式

若需要了解原型相关内容,可参考本人的另一篇博客JavaScript原型与原型链
用法:自定义构造函数,属性在函数中初始化,方法添加到原型上
适用场景:需要创建多个类型确定的对象
代码解析:

 function Person (name, age) {
    this.name = name
    this.age = age
  }
  Person.prototype.setName = function (name) {
    this.name = name
  }
  var p1 = new Person('Tom', 12)
  var p2 = new Person('JAck', 23)
  p1.setName('TOM3')
  console.log(p1)  //Person {name: "TOM3", age: 12}
  console.log(p1)  //Person {name: "JAck", age: 23}
  Person.prototype.setAge = function (age) {
    this.age = age
  }
  p1.setAge(23)
  console.log(p1.age)  //23

  Person.prototype = {}
  p1.setAge(34)
  console.log(p1)  //Person {name: "TOM3", age: 34}

你可能感兴趣的:(JavaScript对象创建模式)