改进简单的JavaScript继承

Question

约翰·雷西格（jQuery的知名人物）提供了简单JavaScript继承的简洁实现。他的方法启发了我进一步改进事物的尝试。我已经重写了雷西格最初的Class.extend函数，并包括以下优点：

• 性能 - 类定义、对象构造和基类方法调用过程中的开销更少

• 灵活性 - 优化了新的ECMAScript 5兼容浏览器（例如Chrome），但为旧的浏览器（例如IE6）提供了等效的“shim”

• 兼容性 - 在严格模式下验证并提供更好的工具兼容性（例如VSDoc/JSDoc注释、Visual Studio IntelliSense等）

• 简单性 - 您不必成为“忍者”来理解源代码（如果您失去ECMAScript 5功能，它甚至更简单）

• 健壮性 - 通过更多的“边角案例”单元测试（例如在IE中覆盖toString）

因为这几乎看起来太美好而难以置信，所以我想确保我的逻辑没有任何根本性的缺陷或错误，并看看是否有人可以提出改进或驳斥代码。因此，我展示了classify函数：

function classify(base, properties)
{
    /// <summary>Creates a type (i.e. class) that supports prototype-chaining (i.e. inheritance).</summary>
    /// <param name="base" type="Function" optional="true">The base class to extend.</param>
    /// <param name="properties" type="Object" optional="true">The properties of the class, including its constructor and members.</param>
    /// <returns type="Function">The class.</returns>

    // quick-and-dirty method overloading
    properties = (typeof(base) === "object") ? base : properties || {};
    base = (typeof(base) === "function") ? base : Object;

    var basePrototype = base.prototype;
    var derivedPrototype;

    if (Object.create)
    {
        // allow newer browsers to leverage ECMAScript 5 features
        var propertyNames = Object.getOwnPropertyNames(properties);
        var propertyDescriptors = {};

        for (var i = 0, p; p = propertyNames[i]; i++)
            propertyDescriptors[p] = Object.getOwnPropertyDescriptor(properties, p);

        derivedPrototype = Object.create(basePrototype, propertyDescriptors);
    }
    else
    {
        // provide "shim" for older browsers
        var baseType = function() {};
        baseType.prototype = basePrototype;
        derivedPrototype = new baseType;

        // add enumerable properties
        for (var p in properties)
            if (properties.hasOwnProperty(p))
                derivedPrototype[p] = properties[p];

        // add non-enumerable properties (see https://developer.mozilla.org/en/ECMAScript_DontEnum_attribute)
        if (!{ constructor: true }.propertyIsEnumerable("constructor"))
            for (var i = 0, a = [ "constructor", "hasOwnProperty", "isPrototypeOf", "propertyIsEnumerable", "toLocaleString", "toString", "valueOf" ], p; p = a[i]; i++)
                if (properties.hasOwnProperty(p))
                    derivedPrototype[p] = properties[p];
    }

    // build the class
    var derived = properties.hasOwnProperty("constructor") ? properties.constructor : function() { base.apply(this, arguments); };
    derived.prototype = derivedPrototype;
    derived.prototype.constructor = derived;
    derived.prototype.base = derived.base = basePrototype;

    return derived;
}

用法几乎与Resig的相同，除了构造函数名称(constructor vs. init)和基类方法调用的语法。

/* Example 1: Define a minimal class */
var Minimal = classify();

/* Example 2a: Define a "plain old" class (without using the classify function) */
var Class = function()
{
    this.name = "John";
};

Class.prototype.count = function()
{
    return this.name + ": One. Two. Three.";
};

/* Example 2b: Define a derived class that extends a "plain old" base class */
var SpanishClass = classify(Class,
{
    constructor: function()
    {
        this.name = "Juan";
    },
    count: function()
    {
        return this.name + ": Uno. Dos. Tres.";
    }
});

/* Example 3: Define a Person class that extends Object by default */
var Person = classify(
{
    constructor: function(name, isQuiet)
    {
        this.name = name;
        this.isQuiet = isQuiet;
    },
    canSing: function()
    {
        return !this.isQuiet;
    },
    sing: function()
    {
        return this.canSing() ? "Figaro!" : "Shh!";
    },
    toString: function()
    {
        return "Hello, " + this.name + "!";
    }
});

/* Example 4: Define a Ninja class that extends Person */
var Ninja = classify(Person,
{
    constructor: function(name, skillLevel)
    {
        Ninja.base.constructor.call(this, name, true);
        this.skillLevel = skillLevel;
    },
    canSing: function()
    {
        return Ninja.base.canSing.call(this) || this.skillLevel > 200;
    },
    attack: function()
    {
        return "Chop!";
    }
});

/* Example 4: Define an ExtremeNinja class that extends Ninja that extends Person */
var ExtremeNinja = classify(Ninja,
{
    attack: function()
    {
        return "Chop! Chop!";
    },
    backflip: function()
    {
        this.skillLevel++;
        return "Woosh!";
    }
});

var m = new Minimal();
var c = new Class();
var s = new SpanishClass();
var p = new Person("Mary", false);
var n = new Ninja("John", 100);
var e = new ExtremeNinja("World", 200);

这是我的 QUnit 测试，它们全部通过：

equals(m instanceof Object && m instanceof Minimal && m.constructor === Minimal, true);
equals(c instanceof Object && c instanceof Class && c.constructor === Class, true);
equals(s instanceof Object && s instanceof Class && s instanceof SpanishClass && s.constructor === SpanishClass, true);
equals(p instanceof Object && p instanceof Person && p.constructor === Person, true);
equals(n instanceof Object && n instanceof Person && n instanceof Ninja && n.constructor === Ninja, true);
equals(e instanceof Object && e instanceof Person && e instanceof Ninja && e instanceof ExtremeNinja && e.constructor === ExtremeNinja, true);

equals(c.count(), "John: One. Two. Three.");
equals(s.count(), "Juan: Uno. Dos. Tres.");

equals(p.isQuiet, false);
equals(p.canSing(), true);
equals(p.sing(), "Figaro!");

equals(n.isQuiet, true);
equals(n.skillLevel, 100);
equals(n.canSing(), false);
equals(n.sing(), "Shh!");
equals(n.attack(), "Chop!");

equals(e.isQuiet, true);
equals(e.skillLevel, 200);
equals(e.canSing(), false);
equals(e.sing(), "Shh!");
equals(e.attack(), "Chop! Chop!");
equals(e.backflip(), "Woosh!");
equals(e.skillLevel, 201);
equals(e.canSing(), true);
equals(e.sing(), "Figaro!");
equals(e.toString(), "Hello, World!");

我的方法与John Resig的原始方法相比，有什么问题吗？欢迎提出建议和反馈！

注意：自从我最初发布这个问题以来，上面的代码已经被大幅修改。上面的内容代表了最新版本。要了解它是如何发展的，请查看修订历史记录。

- Will

---

我建议使用Object.create和traitsjs。在JavaScript中，继承并不好用，应该使用对象组合。 - Raynos

也许我只是还不习惯，但是 traits 的语法让我感到头晕。我想我会等待它有更多的追随者之后再尝试。 - Will

Answer 1

前一段时间，我看了几个JS对象系统，甚至实现了一些自己的，例如class.js（ES5版本）和proto.js。

我从未使用它们的原因是：最终你会写相同数量的代码。证明就是Resig的忍者示例（只加了一些空格）：

var Person = Class.extend({
    init: function(isDancing) {
        this.dancing = isDancing;
    },

    dance: function() {
        return this.dancing;
    }
});

var Ninja = Person.extend({
    init: function() {
        this._super(false);
    },

    swingSword: function() {
        return true;
    }
});

19行，264字节。

使用标准JS和Object.create()（这是一个ECMAScript 5函数，但为了我们的目的可以用自定义的ES3 clone()实现替代）：

function Person(isDancing) {
    this.dancing = isDancing;
}

Person.prototype.dance = function() {
    return this.dancing;
};

function Ninja() {
    Person.call(this, false);
}

Ninja.prototype = Object.create(Person.prototype);

Ninja.prototype.swingSword = function() {
    return true;
};

17行，282字节。在我看来，额外的字节并不值得增加单独对象系统的复杂性。通过添加一些自定义函数，很容易使标准示例变得更短，但是：这并不真正值得。

- Christoph

---

我曾经和你有同样的想法，但现在我不得不反对了。基本上，John Resig 和我所做的就是创建一个单一方法(“extend”)，它可以连接你在上面例子中拥有的确切的对象/原型行为（即它不是一个新的对象系统）。唯一的区别是使用 extend 方法时语法更短、更紧凑、更少出错。 - Will

经过反思，我同意使用标准的 wire-up 语法和使用 extend 语法一样简洁。但我仍然认为后者更加清晰、更少出错，并且更符合“约定优于配置”的理念，如果这样说可以的话。 - Will

我曾经费尽心思地思考Resig的方法，但却无法理解。这个方法非常简单明了。谢谢！ - Big McLargeHuge

等一下...你如何定义自定义构造函数？例如，在定义新忍者时设置Ninja.strength = function() { Math.random(); }？ - Big McLargeHuge

Answer 2

不要那么快。它只是不起作用。

考虑一下：

var p = new Person(true);
alert("p.dance()? " + p.dance()); => true

var n = new Ninja();
alert("n.dance()? " + n.dance()); => false
n.dancing = true;
alert("n.dance()? " + n.dance()); => false

base 只是另一个使用默认成员初始化的对象，让你认为它可以工作。

编辑：记录一下，这是我自己在 2006 年制作的类似 Java 继承的 Javascript 实现（尽管更冗长），当时我受到 Dean Edward's Base.js 的启发（当 他说 John 的版本只是他的 Base.js 重写时，我同意他的观点）。您可以在此处查看它的操作（并在 Firebug 中进行逐步调试）。

/**
 * A function that does nothing: to be used when resetting callback handlers.
 * @final
 */
EMPTY_FUNCTION = function()
{
  // does nothing.
}

var Class =
{
  /**
   * Defines a new class from the specified instance prototype and class
   * prototype.
   *
   * @param {Object} instancePrototype the object literal used to define the
   * member variables and member functions of the instances of the class
   * being defined.
   * @param {Object} classPrototype the object literal used to define the
   * static member variables and member functions of the class being
   * defined.
   *
   * @return {Function} the newly defined class.
   */
  define: function(instancePrototype, classPrototype)
  {
    /* This is the constructor function for the class being defined */
    var base = function()
    {
      if (!this.__prototype_chaining 
          && base.prototype.initialize instanceof Function)
        base.prototype.initialize.apply(this, arguments);
    }

    base.prototype = instancePrototype || {};

    if (!base.prototype.initialize)
      base.prototype.initialize = EMPTY_FUNCTION;

    for (var property in classPrototype)
    {
      if (property == 'initialize')
        continue;

      base[property] = classPrototype[property];
    }

    if (classPrototype && (classPrototype.initialize instanceof Function))
      classPrototype.initialize.apply(base);

    function augment(method, derivedPrototype, basePrototype)
    {
      if (  (method == 'initialize')
          &&(basePrototype[method].length == 0))
      {
        return function()
        {
          basePrototype[method].apply(this);
          derivedPrototype[method].apply(this, arguments);
        }
      }

      return function()
      {
        this.base = function()
                    {
                      return basePrototype[method].apply(this, arguments);
                    };

        return derivedPrototype[method].apply(this, arguments);
        delete this.base;
      }
    }

    /**
     * Provides the definition of a new class that extends the specified
     * <code>parent</code> class.
     *
     * @param {Function} parent the class to be extended.
     * @param {Object} instancePrototype the object literal used to define
     * the member variables and member functions of the instances of the
     * class being defined.
     * @param {Object} classPrototype the object literal used to define the
     * static member variables and member functions of the class being
     * defined.
     *
     * @return {Function} the newly defined class.
     */
    function extend(parent, instancePrototype, classPrototype)
    {
      var derived = function()
      {
        if (!this.__prototype_chaining
            && derived.prototype.initialize instanceof Function)
          derived.prototype.initialize.apply(this, arguments);
      }

      parent.prototype.__prototype_chaining = true;

      derived.prototype = new parent();

      delete parent.prototype.__prototype_chaining;

      for (var property in instancePrototype)
      {
        if (  (instancePrototype[property] instanceof Function)
            &&(parent.prototype[property] instanceof Function))
        {
            derived.prototype[property] = augment(property, instancePrototype, parent.prototype);
        }
        else
          derived.prototype[property] = instancePrototype[property];
      }

      derived.extend =  function(instancePrototype, classPrototype)
                        {
                          return extend(derived, instancePrototype, classPrototype);
                        }

      for (var property in classPrototype)
      {
        if (property == 'initialize')
          continue;

        derived[property] = classPrototype[property];
      }

      if (classPrototype && (classPrototype.initialize instanceof Function))
        classPrototype.initialize.apply(derived);

      return derived;
    }

    base.extend = function(instancePrototype, classPrototype)
                  {
                    return extend(base, instancePrototype, classPrototype);
                  }
    return base;
  }
}

而这就是如何使用它：

var Base = Class.define(
{
  initialize: function(value) // Java constructor equivalent
  {
    this.property = value;
  }, 

  property: undefined, // member variable

  getProperty: function() // member variable accessor
  {
    return this.property;
  }, 

  foo: function()
  {
    alert('inside Base.foo');
    // do something
  }, 

  bar: function()
  {
    alert('inside Base.bar');
    // do something else
  }
}, 
{
  initialize: function() // Java static initializer equivalent
  {
    this.property = 'Base';
  },

  property: undefined, // static member variables can have the same
                                 // name as non static member variables

  getProperty: function() // static member functions can have the same
  {                                 // name as non static member functions
    return this.property;
  }
});

var Derived = Base.extend(
{
  initialize: function()
  {
    this.base('derived'); // chain with parent class's constructor
  }, 

  property: undefined, 

  getProperty: function()
  {
    return this.property;
  }, 

  foo: function() // override foo
  {
    alert('inside Derived.foo');
    this.base(); // call parent class implementation of foo
    // do some more treatments
  }
}, 
{
  initialize: function()
  {
    this.property = 'Derived';
  }, 

  property: undefined, 

  getProperty: function()
  {
    return this.property;
  }
});

var b = new Base('base');
alert('b instanceof Base returned: ' + (b instanceof Base));
alert('b.getProperty() returned: ' + b.getProperty());
alert('Base.getProperty() returned: ' + Base.getProperty());

b.foo();
b.bar();

var d = new Derived('derived');
alert('d instanceof Base returned: ' + (d instanceof Base));
alert('d instanceof Derived returned: ' + (d instanceof Derived));
alert('d.getProperty() returned: ' + d.getProperty());  
alert('Derived.getProperty() returned: ' + Derived.getProperty());

d.foo();
d.bar();

- Gregory Pakosz

---

糟糕，谢谢你指出这个重大缺陷。我会再试一次，但最终可能还是会回到John Resig的原始功能上。 - Will

约翰的函数很完美（尽管他应该给迪恩·爱德华兹以功劳）。无论如何，就像当时我所做的那样，继续尝试它是有趣的，并且理解语言的内部工作将使你成为更好的程序员。有趣的是，我从未真正使用过我的实现，它只是为了好玩:)此外，我真的看不出试图将最大数量的逻辑缩减为最小量代码的意义: 当然，我的版本很冗长，但每次我返回阅读它时，我都明白正在发生什么。 - Gregory Pakosz

我相信现在一切都正常了。我对基本方法调用进行了微小的更改，使用“base.method.call(this)”语法来修复您报告的问题。您是否看到实现中还有其他问题？我不确定这是否是一个无意义的练习。我相信大多数开发人员避开JavaScript继承的原因之一是涉及理解实现的“黑魔法”，或者他们被迫使用丑陋的继承语法。我相信这有助于解决这两个问题（前提是它是正确的）。 - Will

了解内部机制并不是毫无意义的。然而，我一直认为在jQuery、Mootools等之间进行大小竞赛没有多少意义；但是，在我的个人项目中，我从未真正面临由臃肿脚本引起的页面加载减慢问题。那么，我不够专业（尽管我相信我在实现类似Java继承方面做得很好）来决定这是正确的方法：像Douglas Crockford这样的专家认为，人们应该努力“充分拥抱原型主义”，并“摆脱古典模型的限制”。 - Gregory Pakosz

Answer 3

这是最简单的内容之一。它来自于http://www.sitepoint.com/javascript-inheritance/。

// copyPrototype is used to do a form of inheritance.  See http://www.sitepoint.com/blogs/2006/01/17/javascript-inheritance/#
// Example:
//    function Bug() { this.legs = 6; }
//    Insect.prototype.getInfo = function() { return "a general insect"; }
//    Insect.prototype.report = function() { return "I have " + this.legs + " legs"; }
//    function Millipede() { this.legs = "a lot of"; }
//    copyPrototype(Millipede, Bug);  /* Copy the prototype functions from Bug into Millipede */
//    Millipede.prototype.getInfo = function() { return "please don't confuse me with a centipede"; } /* ''Override" getInfo() */
function copyPrototype(descendant, parent) {
  var sConstructor = parent.toString();
  var aMatch = sConstructor.match(/\s*function (.*)\(/);
  if (aMatch != null) { descendant.prototype[aMatch[1]] = parent; }
  for (var m in parent.prototype) {

    descendant.prototype[m] = parent.prototype[m];
  }
};

- John Fisher

---

这确实很简单，但在我看来并不是很有用（没有基类/超级访问权限），也不太美观。 - Will

@Will：你可以访问父类的方法。请查看链接以获取更多解释。 - John Fisher

@JohnFisher 我认为你在代码注释中想说的是 Bug.prototype 而不是 Insert.prototype。 - Larry Battle

@LarryBattle：我并没有什么意思，因为这不是我写的代码。它来自网站。 - John Fisher