jquery 之 extend的实现

时间:2021-08-22 06:20:35
function getOpt(target, obj1, obj2, obj3){
$.extend(target, obj1, obj2, obj3);
return target;
} var _default = {
name : 'wenzi',
age : '',
sex : 'male'
}
var obj1 = {
name : 'obj1'
}
var obj2 = {
name : 'obj2',
age : ''
}
var obj3 = {
age : '',
sex : {'error':'sorry, I dont\'t kown'}
}
getOpt(_default, obj1, obj2, obj3); // {name: "obj2", age: "67", sex: {error: "sorry, I dont't kown"}}

extend:延伸,扩展,推广

1.将两种或更多对象的内容合并到一个对象

option={name:"wenzi",age:"25",sex:"male"}

var _default={name:"wenzi",age:"26",sex:"male",address:"地址"}

$.extend(_default,option);

得到的结果:_default={name:"wenzi",age:"25",sex:"male",address:"地址"}

可以看到若是option上设置了相同的{}中的属性 ,那么就会覆盖_default中的属性值,若是存在_default中没有的属性,就会合并到_default中,同理,若是传入多个参数,那么属性值永远是最后一个属性的值。

2.只有一个参数(必要参数),为jQuery扩展方法活属性

$.extend({

_name:"wenzi",

_getname:function(){return this._name}

})

jquery得到扩展:直接使用

$._name;

$._getname();

3.深度拷贝和浅度拷贝

//浅度拷贝

var obj={name:"wenzi",sex:"male"}

var obj1=obj;

obj1.name="bing";

console.log(obj.name)

obj和obj1指向了同一个地址,两者任何一个修改属性值时,另一个也会跟着变,这就是浅度拷贝。

//深度拷贝

var s="hello";

var t=s;

t="world";

console.log(s);

t对象并没有指向s的引用,而是实实在在的赋值一份新的对象给新的变量,t改变,s不会改变。

但是用getpt(_default,obj1,obj2,obj3);得到的_default值是{name:"obj2",age:"67",sex:{error:"sorry,i dont't kown"}}

此时若是 修改为 _default.sex.error='hello world'  那么obj3.sex.error="hello world" //这也是浅度拷贝

$.extend()也提供了深度拷贝的方法

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