四种方法搞定JavaScript创建多个对象

148 阅读 0 评论 98 点赞

我是靠谱客的博主英俊鸡，这篇文章主要介绍四种方法搞定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 + '在吃饭')
    }
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// 字面量方式创建多个对象
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 + '在吃饭')
    }
}
登录后复制

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在吃饭1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 工厂函数方式创建多个对象
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在吃饭
登录后复制

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在吃饭1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// 约定俗成的规范，构造函数名字首字母大写
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在吃饭
登录后复制

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在吃饭1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
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在吃饭
登录后复制