2017.07.05
知道jQuery的第五年我才第一次思考其实现。期间有两年完全做着与js无关的事情，其实也没时间想这事。下面是思考的流水账，完美还原当时的思考过程，感觉这么久以来自己第一次智商上线了...
思考它的实现是从jQueryUI开始的。当时想，任意一个$('#id')对象都能任意调用UI的方法，是怎么实现的呢？
必然是在$('')上做了手脚。
由此想到了jQuery.fn，感觉是把函数挂在了这里
读源码发现每一个$('')都是new jQuery.fn.init()这种对象，而jQuery.fn.init.prototype=jQuery.fn
所以任意挂在jQuery.fn上的函数都是$('')的实例方法
而jQuery通过$.fn.extend给jQuery.fn添加函数。
$.extend也能添加函数，不过是挂在$下的，即$.func...俗称jQuery的静态方法
事实证明，今天中午我的猜想并没错。
而且因为$.prototype=$.fn,所以$.fn.init.prototype=$.prototype,所以new $.fn.init() = new $(),所以jQuery函数的实现会返回new $.fn.init()，其实和new $()是一样的。
至此解开了jQuery的谜团。所以想在jQuery对象上调用方法，只需使用$.fn.extend()将函数挂到jQuery的原型上即可，哈哈哈哈
细想起来，当年(2013年)之所以看不懂jQuery源码，一是没深刻理解prototype和constructor，二是没有明白new的是什么对象，第三是没理解$.extend=$.fn.extend=function(){...}这个函数是什么鬼（内部的this指针对于二者是不同的，一个代表$,一个则是$.fn），其四是根本没明白js迂回的方式实现的函数重载，就是利用arguments中元素作各种类型判断来进行重载，这个确实比较麻烦和难以理解。
通过这层理解，不论是jQuery源码还是jQueryUI的源码都将变得十分容易看懂了。
感觉离做一个切图仔的梦想又近了。。。(呸！切图仔根本不需要懂js啊！！！）
网友评论