jQuery.js中继承的实现

  对于JavaScript语言,虽然标榜是面向对象的语言,但是和那些像Java一样传统的面向对象的语言相比,其面向对象的实现,总显得一些别扭。就拿继承来说吧,传统面向对象的语言都是在语言层面上支持了,而JavaScript就要自己来实现继承这个功能了,下面来看看jQuery.js是怎么实现这个功能的。

  在jQuery.js中一个jQuery.extend()的静态方法,它提供了jQuery.js中的整个继承功能,也是jQuery.js中的一个重要的方法,其代码分析如下:

jQuery.extend  =  jQuery.fn.extend  =   function (obj, prop) {
  
//  防止传入错误的参数prop;
   if ( argumnets.length  >   1   &&  ( prop  ===   null   ||  prop  ==  undefined)
    
return  obj;

  
//  如果prop为空,则将obj扩展到自己身上,jQuery.js中大部分都是为空;
   if ! prop ) {
    prop 
=  obj;
    obj 
=   this ;
  }

  
//  将prop的所有属性复制到obj;
   for  ( var  i  in  prop )
    obj[ i ] 
=  prop[ i ];

  
return  obj;
}

  这个方法与prototype.js中实现的也差不多,在prototype.js中少的只是没有参数prop的判断,而在调用这个方法的时候也存在一点点差异,在prototype.js中一般是明确指定扩展到谁,而在jQuery.js中一般只有需要扩展的方法,而没有明确再指定一个需要扩展到谁,这个是通过extend()方法内部的判断来指定。

  在这里还有一个特殊的地方,就是在函数开头的地方有jQuery.extend = jQuery.fn.extend,而在程序的前面已经将jQuery.prototype赋值给jQuery.fn了,所以在后面的调用中会出现jQuery.extend()和jQuery.fn.extend()的不同调用,这两个方法调用产生的结果也不一样,jQuery.extend()的调用并不会把方法扩展到对象的实例上,引用它的方法也需要通过jQuery类来实现,如jQuery.init()(这是一个很重要的方法,后面分析),而jQuery.fn.extend()的调用把方法扩展到了对象的prototype上,所以实例化一个jQuery对象的时候,它就具有了这些方法,这是很重要的,在jQuery.js中到处体现这一点,如下代码可以更好的体会这一点。

< script type  =   " text/javascript " >
  
//  定义一个类,构造函数;
   var  testClass  =   function () {
    
this .name  =   " Woody " ;
  };

  
//  通过prototype对象定义类的其他成员;
  testClass.prototype  =  {
    altName: 
function () {
      testClass.altName( 
this .name );   //  调用testClass.altName()方法;
    }
  };

  
//  实现继承的方法;
  testClass.extend  =   function (o, p) {
    
if  (  ! p ) { p  =  o; o  =   this ; }
    
for  (  var  i  in  p ) o[ i ]  =  p[  i ];
    
return  o;
  };

  
//  对testClass进行扩展;
  testClass.extend({
    altName: 
function ( str ) {
      alert( 
" My name is  "   +  str);
    },
    add: 
function ( i ) {
      alert( 
++ i );
    }
  });

  
var  tc  =   new  testClass();  //  实例化一个tesClass对象;

  
//  反射机制,看tc实例继承了哪些属性方法;
   //  从运行结果来看,它只继承了name,altName();
   for  (  var  i  in  tc ) alert( i  +   "  =  "   +  tc[ i ]);

  
//  调用tc实例的altName()方法,而在定义中又调用testClass.altName()方法;
  tc.altName();

  
//  该方法只能通过类来调用,不能通过实例来调用,比如tc.add(0)就会出错;
  testClass.add(  0  );
</ script >

  好好体会这个函数,继续我的jQuery.js研究之旅。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值