四種方法搞定JavaScript創建多個對象

本篇文章為大家帶來了關於javascript的相關知識，其中主要介紹了關於創建多個物件的相關內容，包括了字面量方法、工廠模式方法、建構子以及原型加上構造函數方法的問題，下面一起來看一下，希望對大家有幫助。

【相關推薦：javascript影片教學、web前端】

在開發過程中我們經常會遇到需要創建很多個相似的對象，很可能有很多相同的屬性或方法，那我們創建多個對象的方法有哪些呢？最好的方法有又是哪一個呢？一起來來看看吧！

1、建立多個物件－字面量方法

物件的字面量方方式是建立物件最常用的方式之一，以字面量方式建立的物件屬性預設是可寫的、可列舉、可設定。

如下程式碼展示了使用字面量方式建立多個物件：

// 字面量方式创建多个对象
var person1 = {
    name: 'jam',
    age: 18,
    address: '上海市',
    eating: function () {
        console.log(this.name + '在吃饭')
    }
}
var person2 = {
    name: 'tom',
    age: 20,
    address: '北京市',
    eating: function () {
        console.log(this.name + '在吃饭')
    }
}
var person3 = {
    name: 'liming',
    age: 19,
    address: '天津市',
    eating: function () {
        console.log(this.name + '在吃饭')
    }
}

#經過上述範例程式碼我們可以看出，僅僅創建了3個物件就用了24行，可以看出字面量方式的弊端：創建相同的物件時，需要編寫重複的程式碼太多。

2、建立多個物件－工廠模式方法

工廠模式其實是一種常見的設計模式；
通常我們會有一個工廠方法，透過該工廠方法我們可以產生想要的物件；

如下程式碼展示了使用工廠模式方法建立多個物件的操作：

// 工厂函数方式创建多个对象
function createPerson (name, age, address) {
    var p = {}
    p.name = name
    p.age = age
    p.address = address
    p.eating = function () {
        console.log(name + '在吃饭')
    }
    return p
}

var p1 = createPerson('jam', 19, '上海市')
var p2 = createPerson('tom', 14, '北京市')
var p3 = createPerson('li', 13, '天津市')

p3.eating() // li在吃饭

可以看出使用工廠模式方法創建了三個物件使用的程式碼明顯比字面量少了很多行，but這就是最好的方式了嗎？ NO! NO! NO!
工廠模式方法的**弊端**就在於：以上述範例程式碼為例。當我們列印p1,p2,p3後，取得不到物件最真實的類型，例如p1是人還是動物還是工具

3、建立多個物件－建構子方法

建構子相信大家並不陌生。所謂的建構函數，就是提供一個生成物件的模板，並描述物件基本結構的函數。一個建構函數，可以產生多個對象，每個對像都有相同的結構。

如下程式碼展示了使用建構函式方法建立多個物件：

// 约定俗成的规范，构造函数名字首字母大写
function Person (name, age, address) {
    this.name = name
    this.age = age
    this.address = address
    this.eating = function () {
        console.log(this.name + '在吃饭')
    }
    this.running = function () {
        console.log(this.name + '在跑步')
    }
}

var p1 = new Person('jam', 20, '北京市')
var p2 = new Person('tom', 14, '上海市')
var p3 = new Person('li', 13, '天津市')

console.log(p1)
// 输出结果
//  Person {
//     name: 'jam',       
//     age: 20,
//     address: '北京市', 
//     eating: [Function],
//     running: [Function]
//   }
p1.eating()  // jam在吃饭

#建構子有個不成文的規範，那就是建構子的名字首字母大寫或駝峰。
建構函數方式並不是最完美的創建多個物件的方式，也是有缺點的。
缺點：每個方法都要在每個實例上重新創建一遍，例如同樣的eating方法和running方法都需要在p1,p2,p3的實例上去創建一遍，浪費很多的記憶體空間

4、建立多個物件－原型加建構函式方式

#二者的組合模式即在建構函式上定義實例屬性，那麼就在創建物件上只需要傳入這些參數。在原型物件用於定義方法和共享屬性。

如下程式碼展示了使用原型加建構函式方式來建立多個物件：

function Person (name, age, address) {
    this.name = name
    this.age = age
    this.address = address
    this.eating =
        this.running = function () {
            console.log(this.name + '在跑步')
        }
}
// 将eating方法和running方法加在原型上，就不需要每次创建一个对象都去在内存中加一遍一样的方法
Person.prototype.eating = function () {
    console.log(this.name + '在吃饭')
}
Person.prototype.running = function () {
    console.log(this.name + '在跑步')
}
var p1 = new Person('jam', 20, '北京市')
var p2 = new Person('tom', 14, '上海市')
var p3 = new Person('li', 13, '天津市')

console.log(p1)
// 输出结果：
//  Person {
//     name: 'jam',       
//     age: 20,
//     address: '北京市', 
//     eating: [Function],
//     running: [Function]
//   }
p1.eating()  // jam在吃饭

最後的當然是壓軸的呀，這個原型和建構函式方式是目前在ECMAScript中使用得最廣泛、認同度最高的一種創建物件的方法。

【相關推薦：javascript影片教學、web前端】

#

以上是四種方法搞定JavaScript創建多個對象的詳細內容。更多資訊請關注PHP中文網其他相關文章！