1.前段时间一直忙于研究数据可视化(d3.js,three.js) 以及 php的 laravel框架，生活上也遇到很多事情，这大概就是人生中的迷茫期吧。
回想起，刚出来工作的时候，目标很明确，要学习什么。将来要达到什么样的高度，要跟大神们肩并肩，谈天论地。朝着这个目标一直
努力着。但随着见过的、做过的、东西越多，反而越来越迷茫-----感觉啥都会，借着度娘，工作中基本不会遇到什么问题了。
但仔细想来又啥都不会。闭着眼睛一写，这也记不住，那也记不住（也许是年龄大的原因吧）。目标一直未变，但怎样自己才能成为自己的偶像，却很困惑。
独自在前端的海洋中漂行着，摸索着，我知道一定走了很多弯路，但我也知道一直前进着。前行之中缺少一盏明灯，怎样才能找到自己的明灯呢？
无聊之时读了读jQuery的源码，希望能够找到自己的那盏灯。
/**
1. $.extend的用法。 第一个参数是决定是否需要深复制。 由 true, false。 默认是浅复制
params:
options => 接收传递过来的arguments 的中间参数。
name => 没对对象的key值。
src => 当传递的对象key值相同到时候。要和并
copy => 复制的value 值。
copyIsArray => 判断value对象是不是数组。
clone => 当深度复制的时候。需要新建一个变量。不会改变原始的值。
target => 最开始是默认值是取传进来的第一个参数。过后往后一直跳。$.extend(a,b,c); target 为 a, 为b,为c。
i => 决定当前target 等于参数中的某个值
length =>
deep => 默认是false 是决定是否需要深复制的参数。 true 是深复制。 false 是浅复制*/jQuery.extend = jQuery.fn.extend = function() { var options, name, src, copy, copyIsArray, clone,
target = arguments[ 0 ] || {},
i = 1,
length = arguments.length,
deep = false; // 判断 target 来决定是否 深复制
if ( typeof target === "boolean" ) {
deep = target;
//当深复制的时候，需要跳过第一个参数。 来循环传进来的参数。 刚开始 1,2,3
target = arguments[ i ] || {};
i++;
} // 当 target 不是一个对象且 不是一个函数对象 这个时候就把target 变为空对象。
if ( typeof target !== "object" && !jQuery.isFunction( target ) ) {
target = {};
} // 如果传递过来的参数只有一个的情况下。target 就是该参数。
if ( i === length ) {
target = this;
i--; // 把i 改为1 } for ( ; i < length; i++ ) {
// 处理非空 或者 undefined 的情况。 null == null 。 undefined == null;
//options 是来接收除了第一个参数外的所有参数。中间桥梁的作用吧
if ( ( options = arguments[ i ] ) != null ) {
// name in options 决定了 传过来的值必须是对象。如果不是对象的话。将要被拆分
for ( name in options ) {
//这个是决定后面同级 的key 值， 后面将要覆盖前面的。
src = target[ name ];
//获取 key值为 name 的 value值。
copy = options[ name ];
// Prevent never-ending loop 阻止无限循环。 ？？？没有搞懂，设么情况下才会出现这种情况。
if ( target === copy ) {
continue;
}
/**
1.深复制，且value 为对象属性的时候执行递归复制。 isPlainObect(copy) 判断copy第不是一个 纯对象
2.copy 时一个数组的时候。执行里面的函数。
3.(因为只有对象value 和 数组value 是需要进行深复制的。)
*/
if ( deep && copy && ( jQuery.isPlainObject( copy ) ||
( copyIsArray = Array.isArray( copy ) ) ) ) {
if ( copyIsArray ) {
copyIsArray = false;
clone = src && Array.isArray( src ) ? src : [];
} else {
clone = src && jQuery.isPlainObject( src ) ? src : {};
}
// 创建新对象。来进行深度复制。
target[ name ] = jQuery.extend( deep, clone, copy );
//除了对象数组，和undefined 的值。
} else if ( copy !== undefined ) {
target[ name ] = copy;
}
}
}
} // Return the modified object
return target;
};
本段来自jquery。 version = 3.2.1 版本。 每个人的观点必定有不一样的地方。有错的地方希望大家指出来。共同学习。
上面这段代码中有个地方一直没有想出来。
// Prevent never-ending loop 阻止无限循环。 ？？？没有搞懂，设么情况下才会出现这种情况。 {} != {} 没有想出来什么情况下才会出现target === copy的情况。
if ( target === copy ) {
continue;
}
目前看了大概10分之1吧，学习了很多套路。也许真的能够找到自己的那盏明灯。
以上就是jquery的extend方法解析的详细内容，更多请关注php中文网其它相关文章！
前言
jQuery 中的 $.extend() 是经常使用到工具函数，多用于合并参数（对象），具体用法在这里不过多赘述，可通过传参控制合并过程中是否使用深度拷贝；而ES2015中新增的 Object.assign()方法，也可以实现对象的合并，不过合并过程中使用的是浅拷贝；本文参考了jQuery的extend方法的源码，将自己实现对象合并，即将多个对象的属性复制到目标对象上，若有相同的属性，后面的对象覆盖前面的。
浅拷贝的方式实现对象合并
之前的一篇博文 有专门介绍对象和数组的深浅拷贝，不了解的童鞋请移步。先看实现再解释
function extend() { //extend 浅拷贝实现
var name,options,copy,
length = arguments.length,
i = 1,
target = arguments[0] || {}; //取目标对象
if(['object','function'].indexOf(typeof target) < 0){
target = {};
}
for(;i<length;i++){
options = arguments[i]
if(options != null){ //排除空参数的情况 extend({},,)
for(name in options){ //遍历对象 赋值
copy = options[name];
if (copy !== undefined) {
target[name] = copy;
}
}
}
}
return target
} //测试数据
var test1 = {
a : 1,
b : {
c : 2,
d : 3
},
e : [1,'a']
},
test2 = {
b : {
c : 4,
d : 5,
f : 6
},
e : [1,'a'],
g : 7
} var test = extend({},test1,test2);
console.log(test.b.d); //5
test2.b.d = 'x'; //修改test2
console.log(test.b.d); // 'x' test随之修改
思路如下：
1、默认取第一个参数为目标对象，若第一个参数非对象数据类型，则赋值为空对象
2、遍历剩下的参数（源对象），将源对象的属性复制到目标对象上 。
3、返回目标对象为合并的结果
相关文章
精彩导读
热门资讯
关注我们
