John Resig（jQuery成名）提供了Simple JavaScript Inheritance的简洁实现。他的方法激发了我进一步改进事物的努力。我重写了Resig的原始Class.extend函数，以包含以下优点：
性能 - 在类定义，对象构造和基类方法调用期间减少开销
灵活性 - 针对较新的ECMAScript 5兼容浏览器（例如Chrome）进行了优化，但为旧浏览器（例如IE6）提供了相同的“垫片”
兼容性 - 在严格模式下验证并提供更好的工具兼容性（例如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;
}
除了构造函数名称（constructor与init）以及基类方法调用的语法之外，其用法几乎与Resig相同。
/* 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的original approach有什么不对吗？欢迎提出建议和反馈！
注意：自从我最初发布此问题以来，上述代码已被大幅修改。以上代表最新版本。要查看其进展情况，请查看修订历史记录。
答案 0 :(得分：5)
前段时间，我查看了JS的几个对象系统，甚至实现了我自己的一些对象系统，例如class.js（ES5 version）和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字节。
带有Object.create()的标准JS（这是一个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个字节。 Imo，额外的字节并不真正增加了单独的对象系统的复杂性。通过添加一些自定义函数可以很容易地缩短标准示例，但同样重要的是：它不值得。
答案 1 :(得分：4)
没那么快。它只是不起作用。
考虑：
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只是使用默认成员初始化的另一个对象，让您认为它有效。
/**
* 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();
答案 2 :(得分：1)
这就像你能得到的一样简单。它取自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];
}
};