Js創建物件的幾種方法-有解無憂

1.使用Object建構式創建物件
先創建空的object物件，在動態地添加屬性，方法，適用場景：剛開始不清楚物件內部資料，問題：陳述句多

var p = new Object()
p = {}
p.name = '丁七歲'
p.age = 19
p.setName = function (name) {
    this.name = name
}
p.setaAge = function (age) {
    this.age = age
}
console.log(p)

在這里插入圖片描述
2.適用物件字面量創建物件
適用{}創建物件，同時指定屬性，方法，適用場景：剛開始你清楚物件的內部資料，問題：創建多個物件時，有重復的代碼

  var p = {
    name: '木檸QAQ',
    age: 19,
    setName: function (name) {
      this.name = name
    }
  }
  console.log(p)
  p.setName('檸木QAQ')
  console.log(p)

  var p2 = {
    name: '丁七歲',
    age: 19,
    setName: function (name) {
      this.name = name
    }
  }
  console.log(p2)

在這里插入圖片描述
重復的方法
3.使用工廠創建物件
通過工廠函式動態的創建物件并回傳，適用場景：需要創建多個物件，問題是你ta沒有一個具體的型別，全都是Object型別

  function createPerson(name, age) {
    var p = {
      name: name,
      age: age,
      setName: function (name) {
        this.name = name
      }
    }
    return p
  }

  var p1 = createPerson('ding', 19)
  var p2 = createPerson('QiSui', 18)
  console.log(p1)
  console.log(p2)

在這里插入圖片描述
4.使用自定義建構式創建物件
自定義建構式，通過new關鍵字創建物件，適用場景：需要創建多個物件，這些物件你還要知道是什么型別的，
問題是：每個物件都有相同的資料，浪費記憶體

  function Person(name, age) {
    this.name = name
    this.age = age
    this.setName = function (name) {
      this.name = name
    }
  }

  var p1 = new Person('丁七歲', 18)
  var p2 = new Person('丁七歲2', 19)
  console.log(p1, p1 instanceof Person)
  console.log(p1, p2 instanceof Person)

在這里插入圖片描述
5.使用自定義建構式加原型創建物件
你把方法放在原型里面，這樣就可以了，適用場景：需要創建多個型別要確定的物件

  function Person (name, age) {
    this.name = name
    this.age = age
  }
  Person.prototype.setName = function (name) {
    this.name = name
  }
  Person.prototype.setAge = function (age) {
    this.age = age
  }
  var p1 = new Person('丁七歲', 18)
  var p2 = new Person('丁七歲2', 19)
  console.log(p1)
  console.log(p2)

  p1.setName('丁七歲9988')
  p1.setAge(9988)

  p2.setName('丁七歲1234')
  p2.setAge(1234)

  console.log(p1)
  console.log(p2)

在這里插入圖片描述

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/163552.html

標籤：其他

上一篇：vue移動端專案頂部動態變化(插槽的應用)

下一篇：遇見 vue.js --------阿文的vue.js學習筆記（8 — 2）------串列渲染-----陣列及物件更新檢測