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);  //

相关文章