Wil*_*ill 14 javascript oop inheritance resig ecmascript-5
John Resig(jQuery成名)提供了简单JavaScript继承的简洁实现.他的方法激发了我进一步改进事物的努力.我重写了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;
}
除了构造函数名称(constructorvs. 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的原创方法有什么不对？欢迎提出建议和反馈!
注意:自从我最初发布此问题以来,上述代码已被大幅修改.以上代表最新版本.要查看它是如何演变的,请查看修订历史记录.
前段时间,我查看了JS的几个对象系统,甚至实现了我自己的几个,例如class.js(ES5版本)和proto.js.
我之所以没用过它们,你最终会编写相同数量的代码.例证:Resig的Ninja示例(仅添加了一些空格):
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 with 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字节.Imo,额外的字节并不真正增加了单独的对象系统的复杂性.通过添加一些自定义函数可以很容易地缩短标准示例,但同样重要的是:它并不值得.
没那么快。它就是行不通。
考虑：
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只是另一个使用默认成员初始化的对象，让您认为它可以工作。
编辑：作为记录，这里是我自己的（尽管更冗长）Java 实现，类似于 Javascript 中的继承，它是在 2006 年制作的，当时我受到Dean Edward 的 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();