jQuery对象之间的继承关系

本文深入探讨了jQuery的核心机制,特别是jQuery、jQuery.fn及jQuery.fn.init之间的关系,通过代码实例详细解释了这些组件如何共同作用以支持jQuery的功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

主要也就是jQuery,jQuery.fn和jQuery.fn.init之间的关系。我先把大概的代码提炼到这里。

var jQuery = function( selector, context ) {

return new jQuery.prototype.init( selector, context );

};

//上边定义了jQuery类。

//下边的定义应该很简单,定义了一个属性fn,到现在为止jQuery有两个属性fn和js默认的prototype原型,但是这两个属性是指向同一个对象,也就是说修改任何一个,另一个都会变化。

jQuery.fn = jQuery.prototype={

init:function(selector, context ){

//...................

return jQuery().find(selectot);

}

}

//测试一下,看看有什么不同。

for(var i in jQuery) alert(i + ' '+jQuery[i] );//有两个属性fn和prototype

jQuery.fn.test='yyyy';//给fn增加一个子属性

for(var i in jQuery.fn) alert(i + ' '+jQuery.fn[i] );//fn有一个属性test和一个方法init

for(var i in jQuery.prototype) alert(i + ' '+jQuery.prototype[i] );//prototype和fn一样

现在的init就是fn和prototype的一个方法。想调用只能 jQuery.fn.init()或者是jQuery.prototype.init(),那怎么办呢?你看我们一般都是这样调用fn里面的函数,$().xxx(),那就要想办法在jQuery中返回fn或者是protoype对象,为了达到这个目的实际上return jQuery.prototype就可以实现,但是程序本身还需要执行init这个方法,那就是下边的代码起了作用,把fn在绑定到init的 prototype原型上,这时候就相当月申明了一个jQuery.fn.init类,而且原型指向fn对象,是不是就统一了?这句效果就相当于

jQuery.fn.init=function(selector, context){

//...................

return jQuery().find(selectot);

////其他的fn方法

}

jQuery.fn.init.prototype = jQuery.fn;

fn的init方法和大多数的方法又是返回jQuery数组对象,实现了连写,实际上这里 fn属性的定义完全可以去掉。jQuery.fn.init.prototype = jQuery.fn;可以改成jQuery.fn.init.prototype = jQuery.protoype;效果一样,以后的扩展函数可以写成jQuery.protoype.xxx=function(){}但是为了兼容版本就不得不这样写了。

现在是不是大概有点明白了?这个只是从对象引用的角度分析,因为这样分析更容易接受,所以上边讲的调用都是静态调用,jQuery.fn.init();在静态调用的时候prototype就可以理解成一个静态的属性,如果加了new就不一样了,那就是类之间的继承,先做这样的测试

var obj=new jQuery();obj.init();下篇再说继承关系。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值