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