jquery 之 extend的实现

 

 

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"}}

 

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: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