prototype 1.5 RC2 $ 函数的解读

最近闲的无聊，跟人打赌，看看能不能在一天时间内里面把prototype 1.5的 $函数读懂，赚顿饭吃吃，下面把理解贴出来，让大家看看算不算读懂了。
首先把想关代码贴一下。
[code]
function $(element) {
if (arguments.length > 1) {
for (var i = 0, elements = [], length = arguments.length; i < length; i++)
elements.push($(arguments[i]));
return elements;
}
if (typeof element == 'string')
element = document.getElementById(element);
return Element.extend(element);
}

if (!window.Element)
var Element = new Object();

Element.extend = function(element) {
if (!element) return;
if (_nativeExtensions || element.nodeType == 3) return element;

if (!element._extended && element.tagName && element != window) {

var methods = Object.clone(Element.Methods), cache = Element.extend.cache;
if (element.tagName == 'FORM')
Object.extend(methods, Form.Methods);
if (['INPUT', 'TEXTAREA', 'SELECT'].include(element.tagName))
Object.extend(methods, Form.Element.Methods);

Object.extend(methods, Element.Methods.Simulated);
for (var property in methods) {
var value = methods[property];
if (typeof value == 'function' && !(property in element))
element[property] = cache.findOrStore(value);
}

}

element._extended = true;
return element;
}

Element.extend.cache = {

findOrStore: function(value) {

return this[value] = this[value] || function() {
return value.apply(null, [this].concat($A(arguments)));
}
}
}
Element.Methods = { ...}//代码太多，请参考prototype.js
[/code]下面为我的解读：
$函数可以接收多个参数，参数的类型可以为String或者用Element类扩展过的html element。当传入的为多个参数的时候，返回的为一个数组；单个参数为一个扩展过的element 或者null。

接下来解读Element.extend(element)成为理解$函数返回对象的关键。Element为一个singleton对象，对其extend方法的理解，我认为难点主要集中于[code]element[property] = cache.findOrStore(value);[/code]的理解。这句话将cache.findOrStore返回的函数copy给elememt[property],使其成为element的一个方法。
然而这样做完全可以直接将[code]function() {
return value.apply(null, [this].concat($A(arguments)));
}
[/code]copy给element[property]。
为什么还需要通过函数cache.findOrStore这个函数的调用呢。那么这个cache体现在哪里呢，进一步问为什么函数名叫findOrStore呢？
那么让我们仔细看看cache.findOrStore这个函数体。
该函数返回的是一个function，在返回这个function的时候。[color=red]他首先查看this[value]是否存在，存在则返回this[value],否则新生成一个函数，赋值给this[value]再返回。[/color]所以当你第二次调用这个函数的时候，他优先的查看是否this[value]具有值，我想这就是他取名于cache，并教findOrStore的意义吧。
接着让我再问一下，this[value]给那个对象动态添加了方法呢？根据JavaScript this关键字的含义，其应该存在于Element.extend.cache这个Object中。
BTW:value.apply(null, [this].concat($A(arguments)));中的this，为调用该方法的element。理解这一点是Extend.methods的方法理解的前提。
验证方法：你可以在findOrStore方法中增加一行alert(this[value]),当你第一遍使用$函数时他应该全部为undefined，当你第二遍使用的时候其将有值。更为简单的方法为直接alert(this['findOrStore']).
总结，Extend.cache充分体现了JS的特性。findOrStore方法设计的实在精妙。this指针真的比较难理解。