jQuery源码学习之五 (jQUery继承方法)

jQuery 利用extend进行扩展。


参考jQuery API关于extend 的用法:

$.extend([deep],target,object1,objectN)

$.fn.extend(object)


extend函数结构分析:

jQuery.extend = jQuery.fn.extend = function() {
    变量的声明
    if(){}       //是否是深拷贝
    if(){}      //参数是否正确
    if(){}      //是否是插件的情况
    for() {     //多个对象情况
        if()    //防止循环引用
        if()    //深拷贝
        else if //浅拷贝
    }
}
 
 

extend函数逐行分析:

if 第一个参数是boolean值,deep将保持传递进来的boolean值,target 变为第二个参数,i变为2

jQuery.extend = jQuery.fn.extend = function() {
var options, name, src, copy, copyIsArray, clone,
            target = arguments[0] || {},
	    i = 1,
	    length = arguments.length,
	    deep = false;
... }}
 
 

 
 if 赋值完后的target不是对象也不是函数,则 target赋值为一个空{}; 
 
jQuery.extend = jQuery.fn.extend = function() {

        var options, name, src, copy, copyIsArray, clone,
            target = arguments[0] || {},
	    i = 1,
	    length = arguments.length,
	    deep = false;

       if () {}
       if ( typeof target !== "object" && !jQuery.isFunction(target) ) {
            target = {};
       }
       ...
    }
}
if  实参的长度等于i ( 意义等同于 当第一个参数不是boolean时,i=1,即实参的长度为1,只传入一个参数;否则i=2 ,即实参的长度为2,传入2个参数)也就是说,没有传入目标对象时,target赋值为this;i的长度-1;
jQuery.extend = jQuery.fn.extend = function() {

        var options, name, src, copy, copyIsArray, clone,
            target = arguments[0] || {},
	    i = 1,
	    length = arguments.length,
	    deep = false;

       ...
       if ( length === i ) {
         target = this;
         --i;
       }
       ...
}

开始for循环

如果除boolean值外,传入了target参数(实参个数大于等于3),则从target参数之后的参数开始循环;

如果除boolean值外,没有传入了target参数(实参个数小于等于2),则从boolean值之后开始循环(没有boolean参数,则从第一个参数开始循环)。

for  in 内的第一个if防止了循环引用,循环引用实例:

var a={n:1};
var b={0:a};
a[n]=b[0];        //发生循环引用,会无限制循环

接下来的if ...else...区分 深拷贝和浅拷贝

jQuery.extend = jQuery.fn.extend = function() {
	var options, name, src, copy, copyIsArray, clone,
		target = arguments[0] || {},
		i = 1,
		length = arguments.length,
		deep = false;

        ...
     for ( ; i < length; i++ ) {
        if ( (options = arguments[ i ]) != null ) {
            for ( name in options ) {
                src = target[ name ];
                copy = options[ name ];

                if ( target === copy ) {
                    continue;
                }
                        if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {
                            if ( copyIsArray ) {
                                copyIsArray = false;
                                clone = src && jQuery.isArray(src) ? src : []; 
                            } else {
                           //src 是对象则赋值给clone,否则 clone赋值为空{}
                           clone = src && jQuery.isPlainObject(src) ? src : {};
                             } 
                           target[ name ] = jQuery.extend( deep, clone, copy ); //递归实现深拷贝
                        } else if ( copy !== undefined ) {
                            target[ name ] = copy; 
                       }
            }
        }
    }
    return target;
}
 
 
 
 

转载于:https://www.cnblogs.com/hdchangchang/p/3965321.html

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值