详解JavaScript中的原型OOP

什么是原型OOP

原型OOP是指JavaScript中通过原型链实现面向对象编程的方式。它利用每个JavaScript对象都有一个指向原型的指针，通过原型链可以实现继承和复用，从而实现面向对象编程的特性。

原型链

原型链是通过每个对象都有一个指向原型的指针，从而形成的链式结构。例如：

let animal = {
  eat: function() {
    console.log('I\'m eating.');
  }
};
let cat = {
  meow: function() {
    console.log('Meow.');
  }
};

cat.__proto__ = animal;

在这个例子中，我们创建了一个animal对象，并定义了一个eat方法。然后我们创建了一个cat对象，并定义了一个meow方法。接着，我们将cat的原型指向了animal对象。这样，cat对象就继承了animal对象的属性和方法。

构造函数

构造函数是一种特殊的函数，用于创建一个类。构造函数通过new关键字创建一个实例，这个实例可以访问构造函数中定义的属性和方法。例如：

function Animal(name) {
  this.name = name;
  this.eat = function() {
    console.log(this.name + ' is eating.');
  }
}

let cat = new Animal('Kitty');
cat.eat(); // 输出 "Kitty is eating."

在这个例子中，我们定义了一个Animal构造函数，其中包含一个name属性和一个eat方法。然后，我们创建了一个cat实例。我们通过new关键字来调用构造函数，并把"Kitty"作为参数传入。最后，我们调用cat对象的eat方法，输出"Kitty is eating."。

原型继承

原型继承是通过原型链实现的继承方式，它允许子类继承父类的属性和方法。例如：

function Animal(name) {
  this.name = name;
}
Animal.prototype.eat = function() {
  console.log(this.name + ' is eating.');
};

function Cat(name) {
  Animal.call(this, name);
}
Cat.prototype = Object.create(Animal.prototype);
Cat.prototype.constructor = Cat;
Cat.prototype.meow = function() {
  console.log('Meow.');
};

let kitty = new Cat('Kitty');
kitty.eat(); // 输出 "Kitty is eating."
kitty.meow(); // 输出 "Meow."

在这个例子中，我们定义了一个Animal构造函数，它包含一个name属性和一个eat方法。接着，我们定义了一个Cat构造函数，它继承了Animal构造函数，并添加了一个meow方法。

我们通过Object.create函数来创建一个对象，这个对象的原型指向了Animal.prototype。然后我们将Cat.prototype指向了这个新的对象，这样就建立了Cat对象和Animal对象之间的原型链。最后，我们把Cat.prototype.constructor指向了Cat构造函数。

这样，Cat对象就成功地继承了Animal对象的name属性和eat方法，并添加了meow方法。我们创建一个kitty实例，并调用eat和meow方法，输出"Kitty is eating."和"Meow."。

示例1：实现类的继承

下面是另一个示例，展示了如何使用原型继承实现类的继承：

function Shape(x, y) {
  this.x = x;
  this.y = y;
}
Shape.prototype.move = function(x, y) {
  this.x += x;
  this.y += y;
};

function Circle(x, y, r) {
  Shape.call(this, x, y);
  this.r = r;
}
Circle.prototype = Object.create(Shape.prototype);
Circle.prototype.constructor = Circle;

Circle.prototype.area = function() {
  return Math.PI * this.r * this.r;
};

let c = new Circle(0, 0, 5);
c.move(10, 10);
console.log(c.area()); // 输出 "78.53981633974483"

在这个例子中，我们定义了一个Shape构造函数，它有x和y属性以及一个move方法。然后，我们定义了一个Circle构造函数，它继承了Shape构造函数，并添加了一个r属性以及一个area方法。

我们通过Object.create函数来创建一个对象，这个对象的原型指向了Shape.prototype。然后我们将Circle.prototype指向了这个新的对象，这样就建立了Circle对象和Shape对象之间的原型链。最后，我们把Circle.prototype.constructor指向了Circle构造函数。

这样，Circle对象就成功地继承了Shape对象的x、y属性和move方法，并添加了r属性和area方法。我们创建一个c实例，并调用move和area方法，输出"78.53981633974483"。

示例2：利用原型实现单例模式

下面是另一个示例，展示了如何利用原型实现单例模式：

let Singleton = (function() {
  let instance;

  function SingletonClass(name) {
    if (instance) {
      return instance;
    }
    instance = this;

    this.name = name;
  }

  SingletonClass.prototype.getName = function() {
    return this.name;
  };

  return SingletonClass;
})();

let a = new Singleton('A');
let b = new Singleton('B');

console.log(a.getName()); // 输出 "A"
console.log(b.getName()); // 输出 "A"
console.log(a === b); // 输出 "true"

在这个例子中，我们定义了一个SingletonClass构造函数，并使用一个闭包保存了实例对象。当我们通过new关键字创建一个实例的时候，我们首先检查实例对象是否存在。如果实例对象已经存在，直接返回该对象。否则，我们就创建一个新的实例对象，并保存在闭包内。这样，我们的SingletonClass构造函数就变成了单例模式。

我们将getName方法添加到SingletonClass原型中，并在创建实例之后，我们可以通过getName方法来获取实例的name属性。这样，我们就实现了利用原型实现的单例模式。

我们创建了a和b两个实例，并分别调用getName方法，输出"A"。然后我们比较a和b是否相等，输出"true"，这是因为a和b都指向同一个实例对象。