Js object creation mode

Method 1: Object constructor mode 

  * routines: first create an empty Object object, then dynamically add properties / methods 
  * Applicable scene: at the start of uncertainty within the object data 
  * problem: too many statements

/ * 
  A person: name: "Tom", Age: 12 is 
   * / 
  // create an empty Object object 
  var P = new new Object () 
  P = {} // At this time, the internal data is indefinite 
  // then dynamically add properties / method 
  p.name = 'Tom' 
  p.age = 12 is 
  p.setName = function (name) {
     the this .name = name 
  } 

  // test 
  the console.log (p.name, p.age) 
  p.setName ( 'Bob ' ) 
  the console.log (p.name, p.age)

Second way: object literal mode 
  * Routine: {} used to create the object, while the specified property / method 
  * Application scenario: at the start of data within the object is determined 
  Problem: obvious disadvantage of this embodiment is not multiplexed, if create a large number of objects of the same type, the code will be very redundant

var P = { 
    name: 'Tom' , 
    Age: 12 is , 
    the setName: function (name) {
       the this .name = name 
    } 
  } 

  // test 
  the console.log (p.name, p.age) 
  p.setName ( 'JACK' ) 
  the console.log (p.name, p.age) 

  var P2 = {   // If the code is repeated to create multiple objects 
    name: 'Bob' , 
    Age: 13 is , 
    the setName: function (name) {
       the this .name = name 
    } 
  }

方式三: 工厂模式（利用内置对象的方式创建对象）
  * 套路: 通过工厂函数动态创建对象并返回
  * 适用场景: 需要创建多个对象
  * 问题: 对象没有一个具体的类型, 都是Object类型，没办法判断类型

function createObj(name, age) { //返回一个对象的函数===>工厂函数
    var obj = {
      name: name,
      age: age,
      setName: function (name) {
        this.name = name
      }
    }

    return obj
  }

  // 创建2个人
  var p1 = createObj('Tom', 12)
  var p2 = createObj('Bob', 13)
console.log(p1.constructor) // Object 指向的构造函数是Object 
console.log(p2.constructor) // Object 指向的构造函数是Object

  // p1/p2是Object类型
// 那么为什么说没办法判断类型呢？那么我们创建一条狗的对象
// 可以看出，狗的constructor也是指向Object，那么我们人和狗的类型就没办法去区分了
let dog = createObj('旺财',10)
console.log(dog.constructor) // Object 指向的构造函数是Object


  function createStudent(name, price) {
    var obj = {
      name: name,
      price: price
    }
    return obj
  }
  var s = createStudent('张三', 12000)
  // s也是Object

方式四: 自定义构造函数模式
  * 套路: 自定义构造函数, 通过new创建对象
  * 适用场景: 需要创建多个类型确定的对象
  * 问题: 每个对象都有相同的数据, 浪费内存

function Person(name,age){
    // 1.系统自动创建对象，并且把这个对象赋值到this上，此步不需要我们操作
    // let this = new Object()
    
    // 2.给这个对象赋属性、方法，需要我们自己操作
    this.name = name
    this.age = age
    this.eat = function(){
        console.log(name + '吃饭')
    }
    
    // 3.系统自动返回创建的对象
    // return this
}

let p1 = new Person("邵威儒",28)
console.log(p1.constructor) // Person 指向的构造函数是Person

function Dog(name,age){
    this.name = name
    this.age = age
}

let dog = new Dog("旺财",10)
console.log(dog.constructor) // Dog 指向的构造函数是Dog

 默认是返回新创建的对象，特别需要注意的是 
 如果显式return一个对象数据类型，那么将来new的对象，就是显式return的对象

// 当我们显式return一个原始数据类型
function Person(name,age){
    this.name = name
    this.age = age
    
    return "1"
}

let p = new Person("邵威儒",28) // { name: '邵威儒', age: 28 }

// 当我们显式return一个对象数据类型时
function Person(name,age){
    this.name = name
    this.age = age
    
    return [1,2,3]
}

let p = new Person("邵威儒",28) // [ 1, 2, 3 ]
// 我们发现，当显式return一个对象数据类型时，我们new出来的对象，得到的是return的值

方式六: 构造函数+原型的组合模式
  * 套路: 自定义构造函数, 属性在函数中初始化, 方法添加到原型上
  * 适用场景: 需要创建多个类型确定的对象

function Person(name, age) { //在构造函数中只初始化一般函数
    this.name = name
    this.age = age
  }
  Person.prototype.setName = function (name) { //共享方法绑定到prototype上
    this.name = name
  }

  var p1 = new Person('Tom', 23)
  var p2 = new Person('Jack', 24)
  console.log(p1, p2)

Js object creation mode

Guess you like