jQuery中extend()源码分析
2017-08-24 15:11
453 查看
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 //判断是否是深拷贝,如$.extend(true,object1,boject2) //deep变为true,target变为object1 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) //用来处理不正确的参数,target必须是object或者函数类型,如果不是,赋值一个空的{} if ( typeof target !== "object" && !jQuery.isFunction(target) ) { target = {}; } // extend jQuery itself if only one argument is passed //当只有一个参数时,用来扩展方法,如插件的使用 if ( length === i ) { target = this;//当jQuery.extend()时,this指jQuery,添加工具方法;jQuery.fn.extend(),this指jQuery.fn,添加实例方法 --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 //因为var a = {}; // a.name=a;这种情况会无限循环,a.name.name.name.name...要避免这种情况 if ( target === copy ) { continue; } // Recurse if we're merging plain objects or arrays //当deep为真,copy存在并且copy时对象自变量({},new Object)或array,执行 if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) { 如果copy时数组 if ( copyIsArray ) { copyIsArray = false; clone = src && jQuery.isArray(src) ? src : [];//src存在并且是数组,src不变,否则赋值空数组 } else { //src存在并且是对象自变量,src值不变,否则赋值{} clone = src && jQuery.isPlainObject(src) ? src : {}; } // Never move original objects, clone them /*举例说明: * *var a = { name : { job : 'it' } }; var b = { name : {age : 30} }; 由于copy=b[name]是{age:30},对象自变量,就要再次调用extend(true,a[name],b[name]) b[name].age是number不是对象自变量,直接执行target[ name ] = copy; a[name]就是{job : 'it',age : 30} */ 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; };
举例:
深拷贝:
var a = { name : { firstName : 'Tom' } };
var b = { name : {firstName : 'Jack',lastName:'Simith'} };
$.extend( true , a , b );
alert(a.name.firstName);//Jack
alert(a.name.lastName);//Simith
alert(b.name.firstName);//Jack
alert(b.name.lastName);//Simith
//对a中的firstName进行修改,不会影响b中的firstName
a.name.firstName= 'William';
alert(a.name.first
4000
Name);//William
alert(b.name.firstName);//Jack
浅拷贝:
var a = { name : { firstName : 'Tom' } };
var b = { name : {firstName : 'Jack',lastName:'Simith'} };
$.extend( a , b );
alert(a.name.firstName);//Jack
alert(a.name.lastName);//Simith
alert(b.name.firstName);//Jack
alert(b.name.lastName);//Simith
//对a中的firstName进行修改,b中的firstName也会发生变化
a.name.firstName= 'William';
alert(a.name.firstName);//William
alert(b.name.firstName);//William
相关文章推荐
- jQuery源码研究分析学习笔记-jQuery.extend()、jQuery.fn.extend()(八)
- jQuery源码分析之extend方法
- Javascript笔记:(实践篇)从jQuery插件技术说起-分析extend方法的源码(发现extend方法里有bug)(下篇)
- jQuery.extend()方法和jQuery.fn.extend()方法源码分析
- 【jQuery-1.7.2源码分析】extend
- jQuery.extend()方法和jQuery.fn.extend()方法源码分析
- jQuery源码分析以及从jQuery对象创建的角度理解extend方法的原理
- Javascript笔记:jQuery源码分析以及从jQuery对象创建的角度理解extend方法的原理
- jquery 源码分析-核心(2)整个骨架jQuery.extend,jQuery.fn.extend
- jQuery源码分析系列:Extend扩展方法
- 【jQuery-1.7.2源码分析】extend
- jQuery 源码分析4: jQuery.extend
- jquery源码分析之扩展函数 extend, $.extend
- Javascript笔记:(实践篇)从jQuery插件技术说起-分析extend方法的源码(发现extend方法里有bug)(下篇)
- jquery源码分析之扩展函数 extend, $.extend
- jQuery的isNaN和isNumeric方法源码分析
- jQuery源码分析-05异步队列 Deferred 使用介绍
- JQuery源码分析(三)
- jQuery 源码学习(一)jQuery.extend()
- jQuery插件之jQuery.Form.js用法实例分析(附demo示例源码)