深入理解jquery中extend的实现

function getOpt(option){
 var _default = {
 name : 'wenzi',
 age : '25',
 sex : 'male'
 }
 $.extend(_default, option);
 return _default;
}
getOpt(); // {name: "wenzi", age: "25", sex: "male"}
getOpt({name:'bing'}); // {name: "bing", age: "25", sex: "male"}
getOpt({name:'bing', age:36, sex:'female'}); // {name: "bing", age: 36, sex: "female"}

function getOpt(option){
 var _default = {
 name : 'wenzi',
 age : '25',
 sex : 'male'
 }
 `$.extend(_default, option);`
 return _default;
}

function getOpt(target, obj1, obj2, obj3){
 $.extend(target, obj1, obj2, obj3);
 return target;
}

var _default = {
 name : 'wenzi',
 age : '25',
 sex : 'male'
}
var obj1 = {
 name : 'obj1'
}
var obj2 = {
 name : 'obj2',
 age : '36'
}
var obj3 = {
 age : '67',
 sex : {'error':'sorry, I dont\'t kown'}
}
getOpt(_default, obj1, obj2, obj3); // {name: "obj2", age: "67", sex: {error: "sorry, I dont't kown"}}

function getOpt(target, obj1, obj2, obj3){
 var result = $.extend(target, obj1, obj2, obj3); 
 return result; // // result即修改后的target值
}

function getOpt(target, obj1, obj2, obj3){
 var result = $.extend({}, target, obj1, obj2, obj3); 
 return result; // // result即为{}修改后的值
}

$.extend({
 _name : 'wenzi',
 _getName : function(){
 return this._name;
 }
})

$._name; // wenzi
$._getName(); // wenzi

var obj = {name:'wenzi', sex:'male'};
var obj1 = obj; // 赋值
obj1.name = 'bing';
console.log(obj.name); // bing

var s = 'hello';
var t = s;
t = 'world';
console.log(s); // hello

_default.sex.error = 'hello world';

var obj = {name:'wenzi', score:80};
var obj1 = {score:{english:80, math:90}}
$.extend(true, obj, obj1);
obj.score.english = 10;
console.log(obj.score.english); // 10
console.log(obj1.score.english); // 80

// 为与源码的下标对应上，我们把第一个参数称为`第0个参数`，依次类推
jQuery.extend = jQuery.fn.extend = function() {
 var options, name, src, copy, copyIsArray, clone,
 target = arguments[0] || {}, // 默认第0个参数为目标参数
 i = 1, // i表示从第几个参数凯斯想目标参数进行合并，默认从第1个参数开始向第0个参数进行合并
 length = arguments.length,
 deep = false; // 默认为浅度拷贝

 // 判断第0个参数的类型，若第0个参数是boolean类型，则获取其为true还是false
 // 同时将第1个参数作为目标参数，i从当前目标参数的下一个
 // Handle a deep copy situation
 if ( typeof target === "boolean" ) {
 deep = target;

 // Skip the boolean and the target
 target = arguments[ i ] || {};
 i++;
 }

 // 判断目标参数的类型，若目标参数既不是object类型，也不是function类型，则为目标参数重新赋值 
 // Handle case when target is a string or something (possible in deep copy)
 if ( typeof target !== "object" && !jQuery.isFunction(target) ) {
 target = {};
 }

 // 若目标参数后面没有参数了，如$.extend({_name:'wenzi'}), $.extend(true, {_name:'wenzi'})
 // 则目标参数即为jQuery本身，而target表示的参数不再为目标参数
 // Extend jQuery itself if only one argument is passed
 if ( i === length ) {
 target = this;
 i--;
 }

 // 从第i个参数开始
 for ( ; i < length; i++ ) {
 // 获取第i个参数，且该参数不为null和undefind，在js中null和undefined，如果不区分类型，是相等的，null==undefined为true，
 // 因此可以用null来同时过滤掉null和undefind
 // 比如$.extend(target, {}, null);中的第2个参数null是不参与合并的
 // Only deal with non-null/undefined values
 if ( (options = arguments[ i ]) != null ) {
 
 // 使用for~in获取该参数中所有的字段
 // Extend the base object
 for ( name in options ) {
 src = target[ name ]; // 目标参数中name字段的值
 copy = options[ name ]; // 当前参数中name字段的值

 // 若参数中字段的值就是目标参数，停止赋值，进行下一个字段的赋值
 // 这是为了防止无限的循环嵌套，我们把这个称为，在下面进行比较详细的讲解
 // Prevent never-ending loop
 if ( target === copy ) {
  continue;
 }

 // 若deep为true，且当前参数中name字段的值存在且为object类型或Array类型，则进行深度赋值
 // Recurse if we're merging plain objects or arrays
 if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {
  // 若当前参数中name字段的值为Array类型
  // 判断目标参数中name字段的值是否存在，若存在则使用原来的，否则进行初始化
  if ( copyIsArray ) {
  copyIsArray = false;
  clone = src && jQuery.isArray(src) "htmlcode">

// Prevent never-ending loop
if ( target === copy ) {
 continue;
}


为什么要有这样的判断，我们来看一个简单的例子，如果没有这个判断会怎么样：




var _default = {name : 'wenzi'};
var obj = {name : _default}
$.extend(_default, obj);
console.log(_default);


输出的_default是什么呢：




_default = {name : _default}; 


_default是object类型，里面有个字段name，值是_default，而_default是object类型，里面有个字段name，值是_default……，无限的循环下去。于是jQuery中直接不进行操作，跳过这个字段，进行下一个字段的操作。


2.2 深度拷贝时进行递归处理


我们在前面稍微的讲解了一下，变量值为简单类型（如number, string, boolean）进行赋值时是不会影响上一个变量的值的，因此，如果当前字段的值为Object或Array类型，需要对其进行拆分，直到字段的值为简单类型（如number, string, boolean）时才进行赋值操作。


3. $.extend()与$.fn.extend()
上面讲解的全都是$.extend()，根本就没讲$.fn.extend() 。可是，你有没有发现一个细节，在这段代码的第一行是怎么写的：




jQuery.extend = jQuery.fn.extend = function(){}


也就是说$.extend()与$.fn.extend()共用的是同一个函数体，所有的操作都是一样的，只不过两个extend使用的对象不同罢了：$.extend()是在jQuery($)上进行操作的；而$.fn.extend()是在jQuery对象上进行操作的，如$(‘div').extend()
4. 总结
这就是jQuery中extend的实现，以后若我们需要用到上面的功能时，除了使用$.extend() ，我们也可以在不引入jQuery框架的情况下，自己写一个简单的extend()来实现上面的功能。
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。