John Resig(jQueryで有名)は、SimpleJavaScriptInheritanceの簡潔な実装を提供します。彼のアプローチは、物事をさらに改善しようとする私の試みに影響を与えました。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
また、コンストラクター名( vs. 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!");
誰かが私のアプローチとジョン・レシグの元のアプローチに何か問題があると思いますか?提案やフィードバックは大歓迎です!
注:上記のコードは、この質問を最初に投稿してから大幅に変更されています。上記は最新バージョンを表しています。それがどのように進化したかを確認するには、改訂履歴を確認してください。