JavaScript设计模式之原型模式分析【ES5与ES6】

什么是原型模式？

在JavaScript中，每个对象都有原型（prototype）属性。原型是一个对象，其他对象可以通过它来继承属性和方法。原型模式就是通过原型来创建新对象的模式。

原型模式是一种创建型设计模式，它允许我们通过克隆现有对象的方式来创建新对象，而不是通过使用构造函数创建。

实现原型模式（ES5）

在实现原型模式时，需要定义构造函数并添加属性和方法到原型对象上，然后通过new关键字创建实例。

示例1：使用原型模式创建Person对象

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

Person.prototype.sayHello = function () {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
};

const john = new Person('John', 30);
const jane = new Person('Jane', 25);

john.sayHello(); // output: "Hello, my name is John and I am 30 years old."
jane.sayHello(); // output: "Hello, my name is Jane and I am 25 years old."

在上述示例中，Person对象具有name和age属性，并且声明了sayHello()方法。这些属性和方法是通过将它们添加到Person对象的原型上而共享的。Person的每个实例都可以访问原型上的这些属性和方法。

实现原型模式（ES6）

在ES6中，可以使用类（class）来实现原型模式。类是一种特殊的函数，它可以用来创建新的对象并定义共享的属性和方法。

示例2：使用类实现Person对象

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

  sayHello() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

const john = new Person('John', 30);
const jane = new Person('Jane', 25);

john.sayHello(); // output: "Hello, my name is John and I am 30 years old."
jane.sayHello(); // output: "Hello, my name is Jane and I am 25 years old."

在上述示例中，使用class定义Person类并声明了constructor构造函数和sayHello()方法。constructor函数定义对象属性并初始化对象。sayHello()方法是共享的方法，并被类的所有实例所共享。

原型模式的优缺点

优点

• 可以共享属性和方法，避免创建大量重复的函数和对象。
• 通过原型链，可以实现继承。

缺点

• 如果需要重写对象的属性或方法，需要在每个实例中单独进行修改。
• 如果不小心修改了共享属性或方法，会影响到所有相关的对象。

结论

原型模式是一种创建对象的灵活和高效方式。在ES5和ES6中，都可以使用原型模式来创建新对象。然而，在使用原型模式时，需要注意共享属性和方法的影响。