jQuery和Ext都怎么实现继承的

jQuery和Ext都怎么实现继承的,有什么异同?各有什么优势?
       JavaScript是一门基于对象的语言,但不是面向对象,也就是说语言层面没有提供继承的语法,但是可以通过应用层面实现继承。由于把这种实现放到了应用层面,所以实现就变得五花八门了,可以通过拷贝、原型链等。了解两种继承的调用方式对理解下边说到的实现原理是很有帮助的。
       3.1、Ext(3.x)的继承跟《JavaScript高级程序设计》里讲到的寄生组合模式类似,这种实现方式复杂,不太容易理解。具体是在当前类和超类之间插入一个空对象,作为子类的原型对象,这个空对象的构造函数的原型指向超类的原型,然后把子类的方法,全部放入到这个空对象上。这样可以做到方法通过原型链实现继承,实例属性通过借用构造函数实现继承。这种方法也是目前最完美的实现方案。ExtJS继承的源码解析参考这里。
       3.2、jQuery的继承的实现是基于拷贝的,这种实现比较简单,容易理解。但是要注意的是,jQuery这个function本身和jQuery的原型都有继承方法,其中jQuery.extend是把方法、属性拷贝到function上,后续可以直接通过jQuery.method调用;jQuery.fn.extend是把方法、属性拷贝到jQuery的原型上,后续可以通过jQuery实例(实际是jQuery.fn.init的实例,这个init函数的原型指向jQuery的原型)调用:
Js代码  收藏代码
jQuery.extend = jQuery.fn.extend = function() {  
    var options, name, src, copy, copyIsArray, clone,  
       target = arguments[0] || {}, i = 1,     
length = arguments.length, deep = false;  
    // Handle a deep copy situation  
    if ( typeof target === "boolean" ) {  
       deep = target;  
       target = arguments[1] || {};  
       // skip the boolean and the target  
       i = 2;  
    }  
    // Handle case when target is a string or something (possible in deep copy)  
    if ( typeof target !== "object" && !jQuery.isFunction(target) ) {  
       target = {};  
    }  
    // extend jQuery itself if only one argument is passed  
    if ( length === i ) {  
       target = this;//如果参数只有一个,target就指向this  
       --i;  
    }  
    for ( ; i < length; i++ ) {  
       // Only deal with non-null/undefined values  
       if ( (options = arguments[ i ]) != null ) {  
           // Extend the base object  
           for ( name in options ) {//开始复制  
              src = target[ name ];  
              copy = options[ name ];  
              // Prevent never-ending loop  
              if ( target === copy ) {  
                  continue;  
              }  
              // Recurse if we're merging plain objects or arrays  
              if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {  
                  if ( copyIsArray ) {  
                     copyIsArray = false;  
                     clone = src && jQuery.isArray(src) ? src : [];  
                  } else {  
                     clone = src && jQuery.isPlainObject(src) ? src : {};  
                  }  
                  // Never move original objects, clone them  
                  target[ name ] = jQuery.extend( deep, clone, copy );  
              // Don't bring in undefined values  
              } else if ( copy !== undefined ) {  
                  target[ name ] = copy;  
              }  
           }  
       }  
    }  
    // Return the modified object  
    return target;  
};  
     需要特别注意的是这个this,当jQuery.extend的时候,this指的是jQuery.fn.init这个function,后续的方法、属性复制是复制给function的;当通过jQuery.fn.extend的时候,this指向的是原型对象,后续的方法、属性复制是复制给了原型对象。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值