js中常见的4种创建对象方式与优缺点

2023年5月27日上午6:15 • JavaScript

关于JavaScript中常见的四种创建对象方式和它们的优缺点的详细讲解如下：

一、对象字面量方式

使用对象字面量方式创建对象是JavaScript中最常见、最简单的方式。该方法的语法非常简洁，只需在大括号中定义对象属性和方法即可。

示例代码如下：

// 创建一个对象
var obj = {
  name: "Lucy",
  age: 20,
  sayHello: function() {
    console.log(`Hello, my name is ${this.name}, I'm ${this.age} years old.`);
  }
};

优点

对象字面量方式创建对象非常便捷，代码简洁且易于理解，适用于常量级别的对象。

缺点

在需要创建大量对象时，需要重复编写众多相似的代码，并且不便于代码复用。

二、工厂模式

工厂模式是一种创建对象的模式，通过工厂函数封装对象的创建过程，使得创建对象的方法统一，同时可以减少重复的代码量。

示例代码如下：

// 工厂函数
function createPerson(name,age){
  var obj = {};
  obj.name = name;
  obj.age = age;
  obj.sayHello = function(){
    console.log(`Hello, my name is ${this.name}, I'm ${this.age} years old.`);
  }
  return obj;
}

// 创建对象
var p1 = createPerson("Lucy",20);
var p2 = createPerson("Tom",22);

优点

工厂模式可以通过简单的方法来进行对象的创建，且能够对创建对象的过程进行封装与复用，可大大提高代码的效率和复用性。

缺点

工厂模式无法解决对象识别的问题（无法正确识别对象类型），不能为创建的对象添加额外的公共属性和方法，对象的类型无法判断，不利于代码的维护和扩展。

三、构造函数方式

构造函数方式是一种创建对象的模式，通过构造函数封装对象的创建过程，使得创建对象的方法更加简单和直观。

示例代码如下：

// 定义构造函数
function Person(name, age) {
  this.name = name;
  this.age = age;
  this.sayHello = function() {
    console.log(`Hello, my name is ${this.name}, I'm ${this.age} years old.`);
  }
}

// 创建对象
var p1 = new Person("Lucy",20);
var p2 = new Person("Tom",22);

优点

构造函数中采用了 this 关键字，使得代码更加直观、易于理解，而且可以通过 new 运算符来创建新的对象，不必显式地返回新的对象，无需手动封装。

缺点

构造函数方式存在一个问题，创建的每个对象都有一个副本函数，浪费了内存空间。

四、原型方式

原型方式是一种创建对象的模式，在原型对象上添加属性和方法，所有对象都可以共享原型对象的属性和方法，从而减少内存空间的开销。

示例代码如下：

// 定义构造函数
function Person() {}

// 添加实例方法
Person.prototype.name = "Lucy";
Person.prototype.age = 20;
Person.prototype.sayHello = function() {
  console.log(`Hello, my name is ${this.name}, I'm ${this.age} years old.`);
};

// 创建对象
var p1 = new Person();
var p2 = new Person();