首頁>網頁設計教程>Javascript教程

JavaScript怎麼創建多個物件？詳解四種方法

作者：Eve Cole 更新時間：2022-06-29 14:16:35
JavaScript怎麼創建多個物件？ javascript物件導向創建多個物件的方法，哪個最好用？字面量？工廠模式方法？構造函數方法？原型方法？原型加構造函式方法？進來一看便知。

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

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中使用得最广泛、认同度最高的一种创建对象的方法。

看完之後是不是覺得創建多個物件也沒那麼複雜，利用原型加構造函數的方法分分鐘創建好了。
相關文章