首先把想关代码贴一下。
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下面为我的解读:
$函数可以接收多个参数,参数的类型可以为String或者用Element类扩展过的html element。当传入的为多个参数的时候,返回的为一个数组;单个参数为一个扩展过的element 或者null。
接下来解读Element.extend(element)成为理解$函数返回对象的关键。Element为一个singleton对象,对其extend方法的理解,我认为难点主要集中于
element[property] = cache.findOrStore(value);的理解。这句话将cache.findOrStore返回的函数copy给elememt[property],使其成为element的一个方法。
然而这样做完全可以直接将
function() { return value.apply(null, [this].concat($A(arguments))); }copy给element[property]。
为什么还需要通过函数cache.findOrStore这个函数的调用呢。那么这个cache体现在哪里呢,进一步问为什么函数名叫findOrStore呢?
那么让我们仔细看看cache.findOrStore这个函数体。
该函数返回的是一个function,在返回这个function的时候。 他首先查看this[value]是否存在,存在则返回this[value],否则新生成一个函数,赋值给this[value]再返回。所以当你第二次调用这个函数的时候,他优先的查看是否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指针真的比较难理解。