JS面向对象基础讲解(工厂模式、构造函数模式、原型模式、混合模式、动态原型模式)

下面将分别讲解工厂模式、构造函数模式、原型模式、混合模式、动态原型模式的基础概念和应用，并且提供两个示例演示它们的具体用法。

工厂模式

工厂模式用于创建同一类型对象的方式，这种方式隐藏了对象创建的复杂性，避免了使用new关键字的过多，同时也可以使代码更加灵活。它通过一个函数来封装了所有实例化对象行为，并且返回一个新对象。下面是一个最简单的创建对象的工厂模式的示例：

function createObject() {
  var obj = new Object();
  obj.someProperty = "someValue";
  return obj;
}

var obj1 = createObject();
var obj2 = createObject();
console.log(obj1.someProperty); // 输出 "someValue"
console.log(obj2.someProperty); // 输出 "someValue"

在上面的例子中，我们使用了一个名为createObject()的函数来创建对象。当我们调用createObject()函数时，它会创建一个新的空对象，并将一些属性添加到该对象中，然后返回该对象。我们可以调用createObject()函数多次来创建多个实例。

构造函数模式

构造函数模式是使用new关键字创建对象的一种重要方式，它是JavaScript中创建对象的标准模式之一。当使用new关键字调用构造函数时，JavaScript 会在内存中创建一个空对象，并将这个新创建的对象的原型指向该构造函数的原型。

下面是一个最简单的使用构造函数模式创建对象的示例：

function Person(name) {
  this.name = name;
}
var person1 = new Person("Bob");

在上面的例子中，我们定义了一个名为Person的构造函数，它接收一个参数name。当我们以new Person()的方式调用它时，JavaScript会在内存中创建一个空对象，并将这个新创建的对象的原型指向Person构造函数的原型。然后，Person内部的this指向这个新创建的对象，并将name属性添加到这个对象中。最后，Person 函数返回创建的这个新对象。

原型模式

原型模式是一种非常常见的创建对象的方式，它主要利用函数的原型属性来实现对象之间的继承和共享属性。我们可以向原型对象添加属性和方法，然后可以使用这个原型，来创建新实例对象并继承它的属性和方法。下面是一个最简单的原型模式的示例：

function Person() {}
Person.prototype.name = "Bob";
var person1 = new Person();
console.log(person1.name); // 输出 "Bob"

在上面的例子中，我们定义了一个名为Person的构造函数，并将name属性添加到其原型对象中。当我们使用new Person()创建一个新对象时，它会继承Person原型对象中的name属性。

混合模式

混合模式是将多种对象创建方式结合在一起的创建对象的方案，它可以实现更灵活、更复杂的对象结构。我们可以将工厂模式、构造函数模式和原型模式结合起来使用，来创建更加复杂的对象。

下面是一个使用混合模式创建对象的示例，该示例将一个对象转换为可监听的对象。该对象包括一个内部data对象，一个添加on, off, emit方法的模块以及一个使用原型链实现复制数据的方法：

function extend(obj, extension) {
  for (var key in extension) {
    obj[key] = extension[key];
  }
}

// 工厂模式创建内部对象
function createData() {
  return { };
}

// 构造函数模式创建监听器模块
function EventTarget() {
  this.listeners = { };
}
EventTarget.prototype.on = function(type, callback) {
  if (typeof this.listeners[type] === "undefined") {
      this.listeners[type] = [];
  }
  this.listeners[type].push(callback);
};
EventTarget.prototype.off = function(type, callback) {
  if (this.listeners[type] instanceof Array) {
      var listeners = this.listeners[type];
      for (var i = 0, len = listeners.length; i < len; i++) {
          if (listeners[i] === callback) {
              listeners.splice(i, 1);
              break;
          }
      }
  }
};
EventTarget.prototype.emit = function(type, e) {
  e = e || { };
  if (!e.target) {
      e.target = this;
  }
  if (this.listeners[type] instanceof Array) {
      var listeners = this.listeners[type];
      for (var i = 0, len = listeners.length; i < len; i++) {
          listeners[i].call(this, e);
      }
  }
};

// 原型模式创建拷贝数据方法
createData.prototype = {
  clone: function() {
      var clone = new createData();
      extend(clone, this);
      return clone;
  }
};

// 混合模式创建可监听对象
function createObservable() {
  var observable = createData();
  extend(observable, new EventTarget());
  extend(observable, createData.prototype);
  return observable;
}

// 使用混合模式创建对象
var observableData = createObservable();
observableData.on("change", function(e) {
  console.log("data changed.");
});

在上面的例子中，我们首先使用工厂模式创建了一个名为createData()的函数来创建一个空对象。然后，我们使用构造函数模式创建一个名为EventTarget()的函数来定义一个具有 on(), off(), emit()方法的模块。使用原型模式下我们为createData()函数添加了一个clone()方法。最后，我们使用混合模式创建名为createObservable()的函数。在该函数内，我们使用工厂模式创建一个新的对象，并将该对象扩展为具有EventTarget原型的克隆对象。最终返回新对象。

动态原型模式

动态原型模式是一种创建对象方法，其特点是在构造函数的原型上添加方法，这样，每次创建新实例对象的时候，这个方法才会被重新定义一次，从而避免重复定义。动态原型模式根据是否已经定义原型方法来决定是否创建方法。下面是一个最简单的使用动态原型模式创建对象的示例：

function Person(name) {
  this.name = name;
  if (typeof Person.prototype.sayName !== "function") {
    Person.prototype.sayName = function() {
      console.log(this.name);
    };
  }
}

var person1 = new Person("Bob");
person1.sayName(); // 输出 "Bob"

在上面的例子中，我们首先定义了一个名为 Person 的构造函数。我们通过判断原型上是否已经存在sayName()方法，来决定是否在原型上创建这个方法。实现了动态原型的特性。

至此，我们已经介绍了工厂模式、构造函数模式、原型模式、混合模式以及动态原型模式的基础概念和应用。通过不同的创建对象方式，我们可以创建出简单的、复杂的、可维护的对象，从而让JavaScript更加灵活、更加强大。