javascript 類的基礎知識

經典的JavaScript構造

首先，讓咱們建立一個帶有原型的簡單構造函數。這是最接近你會在本地JavaScript找到一個類。這是很是強大的，高效的，但並無徹底工做就像你所指望的，若是從類的語言來。

classical.js #rectangle

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，使其稍微更高效，以顯示如何重寫功能。

classical.js #square

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

使用方法很簡單。剛剛建立的每一個實例，並調用每一個函數。

classical.js ＃TEST

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

純原型對象

讓咱們作相同的例子，但不使用構造函數。這一次，咱們將只使用純原型繼承。

讓咱們定義一個矩形原型，爲咱們的全部對象的基本模式。

prototypal.js #rectangle

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();
  }
};

 

如今，讓咱們定義一個名爲廣場子對象覆蓋一些屬性來改變行爲。

prototypal.js #square

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;
};

要建立這些原型的實際狀況下，咱們簡單地建立從原型對象繼承新的對象，而後手動設置其本地狀態。

prototypal.js ＃TEST

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系統。控制器函數接受做爲參數模型和視圖對象，並輸出一個新的控制器對象。全部的狀態被存儲在經由範圍的關閉。

factory.js #controller

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。

factory.js #usage

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);

// Output
View now has 5
View now has 6
View now has 5
Saving value 5 somewhere
Now hiding view