首页 > 代码库 > jQuery.extend

jQuery.extend

合并对象

 extend 函数在 合并对象 方面的用法。

jQuery.extend(target , [object1] ,[objectN])

合并 object1 ... objectN 到 target 对象,如果只有一个参数,则该 target 对象会被合并到 jQuery 对象中。

var obj1 = {
    name: Tom,
    age: 21
}

var obj2 = {
    name: Jerry,
    sex: boy
}

$.extend(obj1, obj2); // {name: "Jerry", age: 21, sex: "boy"}

obj1 // {name: "Jerry", age: 21, sex: "boy"}
obj2 // {name: "Jerry", sex: "boy"}

上述代码展示的是将 obj2 对象合并到 obj1 对象中,这种方法会 改变 obj1 对象的结构。如果你 不想改变 合并目标对象的结构,你可以这么做。

var obj1 = {
    name: Tom,
    age: 21
}

var obj2 = {
    name: Jerry,
    sex: boy
}

$.extend({}, obj1, obj2); // { name: "Jerry", age: 21, sex: "boy" }

obj1 // { name: "Tom", age: 21 }
obj2 // { name: "Jerry", sex: "boy" }

 

深浅拷贝

 
jQuery.extend([deep], target, object1, [objectN])

 

和上面的讲述的不同的是,该方法多了一个类型为 boolean 的 [deep] 传参,当其为 true 时,将 object1 , objectN 深度复制 后合并到 target 中。

首先,我们理解一下什么叫做 深度复制 。看看其和 浅度复制 有什么区别。

var obj1 = {
    name: "John",
    location: {
        city: "Boston",
        county: "USA"
    }
}

var obj2 = {
    last: "Resig",
    location: {
        state: "MA",
        county: "China"
    }
}

$.extend(false, {}, obj1, obj2); // { name: "John", last: "Resig", location: { state: "MA", county: "China" }}

$.extend(true, {}, obj1, obj2); // { name: "John", last: "Resig", location: { city: "Boston", state: "MA", county: "China" }}

 

由此可见,执行 深度复制 会递归遍历每个对象中含有复杂对象(如:数组、函数、json对象等)的属性值进行复制,而且 浅度复制便不会这么做。

 

jQuery.extend