jQuery源码个人经验(1)
jQuery源码个人心得(1)jquery版本v1.8.3首先整体看jQuery的代码组织结构jQuery.fn.init.prototype jQuer
jQuery源码个人心得(1)
jquery版本v1.8.3
首先整体看jQuery的代码组织结构
jQuery.fn.init.prototype = jQuery.fn;
三段代码,真要看明白,必须对js的基础概念有一定的理解。
首先就是原型式继承的理解,关于原型式继承的详细介绍可以参考网上更专业的文章,原型式继承核心的一个东西就是prototype属性,
前文说过,函数就会有一个prototype属性,通过在prototype属性上添加属性和方法,就可以为以该函数为构造函数的对象扩充属性和方法。
return new jQuery.fn.init( selector, context, rootjQuery );这一句代码就有很大的迷惑性。千万别掉进这个代码中。
第一段代码中其实就是定义了一个变量jQuery变量,并将一个函数赋予这个变量
你可以在解释器中执行如下代码:
var j = function (){ return new j.fn.init();}
你会看到j仅仅一个函数,并且也不存在语法错误。
接着看第二段代码,是函数就会有prototype属性,这里对jQuery这个函数的prototype属性进行了扩充,如同大家扩充String对象的indexOf方法一样
这里的扩充是希望达到类似的效果
var s = new String('abc'); s.indexOf('a');
同理
var j = new jQuery(); j.xxx();
但一般我们不这么用,我们这样用$('id'); 对应到代码一中就是 new jQuery.fn.init('id');
别急这里就有另外一个问题啦,那就是如何给jQuery对象自我扩充的能力呢?
请看第三段代码。
这里我们将jQuery的属性fn赋予了jQuery.fn.init.prototype,而jQuery.fn.init就是我们调用jQuery对象时new的那个对象,
这样,我们在扩充jQuery的fn属性时就间接地扩充了jQuery对象的能力。