$.extend
简单来说就是 实现单个对象的复制或者多个对象的合并
对象的复制
就对象复制的问题,初学者一般会直接:
var newObj = originObj;
这肯定是不对的,你会发现当你改变newObj的时候,originObj也随之改变了。因为newObj只是一个指向originObj的地址。
然后比较复杂的方法就是遍历originObj一个个对newObj赋值,垃圾方法!
再者是我用了很长时间的方法,现在想想也有问题:
var newObj = Object.create(originObj);
该方法往往用于对象的继承中。问题在于原本originObj的自有属性都成了newObj的__proto__属性:
var originObj = {
name: "hanhan",
age: 33
}
var newObj = Object.create(originObj);
newObj.job = "web_enginerr";
console.log(originObj);//不变
console.log(newObj);
结果如下:
最后说回$.extend:
用$.extend实现对象的继承:
var originFunc = function(){
this.name = "hanhan";
this.age = 33;
}
originFunc.prototype.Job = "writter";
var originObj = new originFunc();
var newObj = $.extend({}, originObj)
console.log(originObj);
console.log(newObj);
这时候会有另外一个问题:就是originObj的__proto__属性变成了newObj的自有属性;
上述代码的运行结果如下:
接下来我们细说$.extend:
jQuery.extend( [deep ], target, object1 [, objectN ] ):
将target和object1合并,出现同名属性时,object1的值覆盖target。
第一个参数:默认是true,所以
jQuery.extend( true, target, object1)=== jQuery.extend( target, object1)
然后我们重点来说说 deep = true 和 false的差别(实际上并不是深拷贝和浅拷贝的区别);
function funcObj1(){
this.name = "someOne";
this.age = 18;
}
funcObj1.prototype.protoHoby = "feel people";
var obj1 = new funcObj1();
function funcObj2(){
this.name = "Is_me";
this.job = "web-engineer";
}
funcObj2.prototype.protoCreate = function(){
console.log("hahahha");
}
var obj2 = new funcObj2();
//var thisObj = jQuery.extend(obj1, obj2);
var thisObj = jQuery.extend(true, obj1, obj2);
//var thisObj = jQuery.extend(false, obj1, obj2);
thisObj.my_self = "trytrytrytry";
console.dir(obj1);
console.dir(obj2);
console.log(thisObj);
deep为true时:
obj1 === thisObj;
obj1跟随thisObj变化而变化,其实就是$.extend返回的就是obj1,thisObj只是指向obj1的地址;
obj2不变;
obj2的__proto__变成了thisObj的自有属性,obj1的__proto__属性不变;
上面代码的运行结果如下:
deep为false时:
obj1 != thisObj;
obj1不变;
obj2不变;
obj1和obj2的__proto__都变成了thisObj的自有属性;
运行结果如下: