js框架开发之旅--原型和类

不是所有的js框架都有类的概念， Douglas Crockford在他的Classical Inheritance in JavaScript中讨论了基于类的对象模型。这是一个非常精彩的关于如何实现js继承的讨论。后来，他写了另一篇文章Prototypal Inheritance in JavaScript，他的结论是：不使用类对象模型，仅通过原型，也能完整的实现js继承。

至于为什么js类库都提基于类的对象模型？具体的原因也许只有作者自己才清楚。大概一些人喜欢模仿他原来喜欢的语言的对象模型。Prototype受了Ruby的严重影响，提供了Class来封装自己的代码。实际上，Prototype也仅是自己框架本身在使用Class。
这篇文章我将介绍基于原型的继承和基于类的继承，并且通过类来实现面向对象的js。这些类会在我们的框架turing.js中使用。

类和原型

一些语言把一切都作为对象来处理，数字也是对象，字符串也是对象，类也是对象。但是不要把所有的对象都作为类的实例，我们是面向对象的编程不是面向类的对象。

js正的需要类吗？如果你是Java或Ruby程序员，你会惊讶发现js根本没有class这个关键词。没关系，如果需要的话，我们可以自己构建一些类似的功能。

原型的使用

基于原型的继承看上去是这样的：

function Vector(x, y) {
  this.x = x;
  this.y = y;
}

Vector.prototype.toString = function() {
  return 'x: ' + this.x + ', y: ' + this.y;
}

v = new Vector(1, 2);
// x: 1, y: 2 

如果你没有接触过js对象编程，头几行可能让你感到奇怪。我定义了一个叫Vector的函数，然后用new Vector（）调用它。实际上是创建了一个新的对象然后调用函数Vector，this就用来指向新的对象。
prototype属性用来扩展实例的方法。通过这种方式，如果你已经实例化了一个对象，然后再prototype里添加新的属性，以前的实例也会加上同样的属性。有意思吧？

Vector.prototype.add = function(vector) {
  this.x += vector.x;
  this.y += vector.y;
  return this;
}

v.add(new Vector(5, 5));

// x: 6, y: 7

基于原型的继承

js实现继承没有一个固定的方式，如果我们想通过继承Vector创建一个Point类，可以像下面这样：

function Point(x, y, colour) {
  Vector.apply(this, arguments);
  this.colour = colour;
}

Point.prototype = new Vector;
Point.prototype.constructor = Point;

p = new Point(1, 2, 'red');
p.colour;
// red
p.x;
// 1

通过使用apply，Point可以执行Vector的构造函数。你可能想知道prototype.constructor是怎么来的。constructor这是一个prototype的属性，用来指向创建这个对象的函数。
当你创建一个你自己的对象，你同时也从Object继承了一些方法，如toString和hasOwnProperty：

p.hasOwnProperty('colour');
// true

基于原型还是基于类

通过原型实现继承有好几种方式，我们需要对这些方式进行封装，然后提供一个统一的接口。这样可以保持代码的简洁性和可读性。

像上面这样把js的继承分几行写，在视觉上显得非常混乱。我们最好通过明确的开头和结尾把代码包起来。我们这个框架也一样，通过类可以把它包装起来。

类的设计

上面的代码在Prototype是这样的：

Vector = Class.create({
  initialize: function(x, y) {
    this.x = x;
    this.y = y;
  },

  toString: function() {
    return 'x: ' + this.x + ', y: ' + this.y;
  }
});

Point = Class.create(Vector, {
  initialize: function($super, x, y, colour) {
    $super(x, y);
    this.colour = colour;
  }
});

我们现在用自己的代码来实现这些功能。我们把代码要提供的功能点列一下：

1. 通过拷贝给类继承新的方法
2. 类的创建：使用apply和prototype.constructor运行构造函数。
3. 决定是否继承自某个父类的能力
4. 封装这些功能

继承

你可能注意到，extend在Prototype中频繁的使用，它所做的工作就是在不同的prototype之间进行方法的拷贝。这是我们了解prototype如何使用的最好的途径，其实原理和我们想象的一样简单：

for (var property in source)

  destination[property] = source[property];

类的创建

我们使用create方法来创建一个新类。该方法要像之前的例子一样，让类有继承的能力。

// This would be defined in our "oo" namespace
create: function(methods) {
  var klass = function() { this.initialize.apply(this, arguments); };

  // Copy the passed in methods
  extend(klass.prototype, methods);

  // Set the constructor
  klass.prototype.constructor = klass;

  // If there's no initialize method, set an empty one
  if (!klass.prototype.initialize)
    klass.prototype.initialize = function(){};

  return klass;
}

获取代码

我已经为框架增加了一个基础文件，它通过类实现了面向对象。代码可以在github上下载到：

turing.oo.js

牧客网--让自由职业变成一个靠谱的工作