JS中常见对象创建方式

对象在前端代码中是一个非常重要的概念，因为一切皆为对象。在 JS 中，有几种常用的设计模式可以用来创建对象，每种模式都有其优缺点和适用场景。本文将介绍几种常用的创建对象的设计模式。

1. 字面量

字面量是创建对象的一种简单方式，通过使用花括号 {} 来定义一个对象，并直接在其中添加属性和方法。这种方式简洁，适合于创建单个对象。然而，当需要创建大量相似对象时，这种方式会产生大量重复的代码。

const person = {
  name: 'xiao ming',
  age: 25,
  sayHello: function() {
    console.log('Hello, my name is ' + this.name);
  }
};

在ES6之前，JavaScript没有类的概念。但是我们可以使用函数来模拟类，从而创建可复用的对象。

2. 工厂模式

工厂模式是一种简单而有效的创建对象的方式。它使用一个函数或方法来封装和返回对象实例。这个函数或方法充当了一个工厂，根据不同的参数或条件创建不同类型的对象。工厂模式隐藏了对象的创建过程，使代码更加灵活和可维护。

function Person(name) {
  const object = {
    name: name,
    sayHello: function() {
      console.log('Hello, my name is ' + this.name);
    }
  };
  return object;
}

const ming = Person("xiaoming");

工厂模式的一个缺点是创建出来的对象无法和特定类型联系起来，它只是简单封装了复用代码，而没有建立起对象和类型之间的关系。

3.构造函数模式

构造函数模式使用一个函数来定义对象的属性和方法，并通过new关键字来创建对象的实例。构造函数模式为每个对象实例提供了相同的属性和方法，节省了内存开销。

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.sayHello = function() {
    console.log('Hello, my name is ' + this.name);
  };
}

var ming = new Person('xiaoming', 25);

在JavaScript中，每个函数都可以作为构造函数。只要一个函数是通过new来调用的，我们就可以称它为构造函数。

执行构造函数 new Person():

1. 首先会创建一个新对象
2. 然后将新对象的原型__proto__指向构造函数的 prototype 属性
3. 然后将执行上下文中的 this 指向这个新对象
4. 最后再执行整个函数，如果返回值不是对象，则返回新建的对象。

4. 原型模式

function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.sayHello = function() {
  console.log('Hello, my name is ' + this.name);
};

const ming = new Person('xiaoming', 25);

组合使用构造函数模式和原型模式可以兼顾实例属性和方法的独立性，以及共享属性和方法的复用性。构造函数用于定义对象的实例属性，而原型用于定义对象的共享属性和方法。

5. 组合使用构造函数模式和原型模式

组合使用构造函数模式和原型模式可以兼顾实例属性和方法的独立性，以及共享属性和方法的复用性。构造函数用于定义对象的实例属性，而原型用于定义对象的共享属性和方法。

function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.sayHello = function() {
  console.log('Hello, my name is ' + this.name);
};

var ming = new Person('xiaoming', 25);

6. 动态原型模式

动态原型模式是一种在构造函数中检查原型是否存在，并进行动态添加的方式。它可以将原型的定义延迟到真正需要时再执行，避免了污染全局命名空间。

function Person(name, age) {
  this.name = name;
  this.age = age;

  if (typeof this.sayHello !== 'function') {
    Person.prototype.sayHello = function() {
      console.log('Hello, my name is ' + this.name);
    };
  }
}

var ming = new Person('xiaoming', 25);

总结

JavaScript 中有多种创建对象的设计模式，包括字面量、工厂模式、构造函数模式、原型模式、组合使用构造函数模式和原型模式，以及动态原型模式。选择适合自己项目需求的模式可以提高代码的可维护性和可扩展性。

通过灵活运用这些设计模式，我们可以更好地组织和管理JavaScript中的对象。