JavaScript对象创建模式

╰半夏微凉° 2022-05-19 10:51 230阅读 0赞

# 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原型与原型链][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]: https://blog.csdn.net/LUOandHUANG/article/details/81134586