经典的JavaScript构造

首先，让我们创建一个带有原型的简单构造函数。这是最接近你会在本地JavaScript找到一个类。这是非常强大的，高效的，但并没有完全工作就像你所期望的，如果从类的语言来。

function Rectangle(width, height) {  this.width = width;  this.height = height;}Rectangle.prototype.getArea = function getArea() {  return this.width * this.height;};Rectangle.prototype.getPerimeter = function getPerimeter() {  return 2 * (this.width + this.height);};Rectangle.prototype.toString = function toString() {  return this.constructor.name + " a=" + this.getArea() + " p=" + this.getPerimeter();};

现在，让我们定义一个新类叫，从矩形继承广场对象。要做到继承，构造函数的prototype有从父构造函数的继承prototype。在这里，我们覆盖getPerimeter，使其稍微更高效，以显示如何重写功能。

function Square(side) {  this.width = side;  this.height = side;}// Make Square inherit from RectangleSquare.prototype = Object.create(Rectangle.prototype, { constructor: { value: Square } });// Override a methodSquare.prototype.getPerimeter = function getPerimeter() {  return this.width * 4;};

使用方法很简单。刚刚创建的每个实例，并调用每个函数。

var rect = new Rectangle(6, 4);var sqr = new Square(5);console.log(rect.toString())console.log(sqr.toString())

纯原型对象

让我们做相同的例子，但不使用构造函数。这一次，我们将只使用纯原型继承。

让我们定义一个矩形原型，为我们的所有对象的基本模式。

var Rectangle = {  name: "Rectangle",  getArea: function getArea() {    return this.width * this.height;  },  getPerimeter: function getPerimeter() {    return 2 * (this.width + this.height);  },  toString: function toString() {    return this.name + " a=" + this.getArea() + " p=" + this.getPerimeter();  }};

现在，让我们定义一个名为广场子对象覆盖一些属性来改变行为。

var Square = Object.create(Rectangle);Square.name = "Square";Square.getArea = function getArea() {  return this.width * this.width;};Square.getPerimeter = function getPerimeter() {  return this.width * 4;};

要创建这些原型的实际情况下，我们简单地创建从原型对象继承新的对象，然后手动设置其本地状态。

var rect = Object.create(Rectangle);rect.width = 6;rect.height = 4;var square = Object.create(Square);square.width = 5;console.log(rect.toString());console.log(square.toString());

对象工厂

我最喜欢的用于创建对象的方法是使用工厂函数。所不同的是，而不是定义与我的所有共享功能的原型对象，然后创建这些实例，我简单地调用，每次返回一个新对象的函数。

这个例子是一个超级简单的MVC系统。控制器函数接受作为参数模型和视图对象，并输出一个新的控制器对象。所有的状态被存储在经由范围的关闭。

function Controller(model, view) {  view.update(model.value);  return {    up: function onUp(evt) {      model.value++;      view.update(model.value);    },    down: function onDown(evt) {      model.value--;      view.update(model.value);    },    save: function onSave(evt) {      model.save();      view.close();    }  };}

要使用此功能，只需调用与所需参数的功能。注意如何我们可以在无需函数第一绑定到对象直接使用这些作为事件处理程序（setTimeout的）。由于它（函数）不使用this内部，也没有必要惹的价值this。

var on = Controller(  // Inline a mock model  {    value: 5,    save: function save() {      console.log("Saving value " + this.value + " somewhere");    }  },  // Inline a mock view  {    update: function update(newValue) {      console.log("View now has " + newValue);    },    close: function close() {      console.log("Now hiding view");    }  });setTimeout(on.up, 100);setTimeout(on.down, 200);setTimeout(on.save, 300);

// OutputView now has 5View now has 6View now has 5Saving value 5 somewhereNow hiding view