【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、创建多个对象——工厂模式方法

工厂模式其实是一种常见的设计模式；
通常我们会有一个工厂方法，通过该工厂方法我们可以产生想要的对象；

如下代码展示了使用工厂模式方法创建多个对象的操作：

// 工厂函数方式创建多个对象functioncreatePerson(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、创建多个对象——构造函数方法

构造函数相信大家并不陌生。所谓构造函数，就是提供一个生成对象的模板，并描述对象的基本结构的函数。一个构造函数，可以生成多个对象，每个对象都有相同的结构。

如下代码展示了使用构造函数方法创建多个对象：

// 约定俗成的规范，构造函数名字首字母大写functionPerson(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 =newPerson('jam',20,'北京市')var p2 =newPerson('tom',14,'上海市')var p3 =newPerson('li',13,'天津市')

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

构造函数有个不成文的规范，那就是构造函数的名字首字母大写或者驼峰。

构造函数方式并不是最完美的创建多个对象的方式，也是有缺点的。

缺点：每个方法都要在每个实例上重新创建一遍，比如同样的eating方法和running方法都需要在p1,p2,p3的实例上去创建一遍，浪费很多的内存空间

4、创建多个对象——原型加构造函数方式

二者的组合模式即在构造函数上定义实例属性，那么在创建对象上只需要传入这些参数。在原型对象用于定义方法和共享属性。

如下代码展示了使用原型加构造函数方式创建多个对象：

functionPerson(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 =newPerson('jam',20,'北京市')var p2 =newPerson('tom',14,'上海市')var p3 =newPerson('li',13,'天津市')

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

最后的当然是压轴的呀，这种原型和构造函数方式是目前在ECMAScript中使用得最广泛、认同度最高的一种创建对象的方法。

看完之后是不是感觉创建多个对象也没有那么复杂，利用原型加构造函数的方法分分钟创建好了。
既然都看完了，点个赞再走吧！🤞🏻🤞🏻🤞🏻