JQuer中对extend的理解

一.理解:

1.extend()是jQuery中一个重要的函数,主要的作用是实现对对象的扩展。

2.通常我们使用jquery的extend时,大都是为了实现默认字段的覆盖,即若传入某个字段的值,则使用传入值,否则使用默认值。
eg:

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

二.extend能实现的功能:

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

jQuery.extend( target [, object1 ] [, objectN ] ),extend方法需要至少传入一个参数,第一个必需,后面的都是可选参数。若传给extend是两个或两个以上的参数都是对象类型,那么就会把后面所有对象的内容合并给target(第一个对象)上。

eg:

function getOpt(option){
 var _default = {
 name : 'wenzi',
 age : '25',
 sex : 'male'
 }
 `$.extend(_default, option);`
 return _default;
}

上面代码的解析:
extend()中接收了两个参数_default和option,那么extend方法执行时,就会把option对象上字段的值全给了_default。于是_default上设置的默认值就会被option上的值覆盖。当然,若option上没有这个字段,就不会覆盖_default上字段的值。

扩展:当我们传入更多的参数的时候:
如下代码:

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

由代码可以得到:传入了4个参数,然后getOpt()返回第一个参数的值。从运行的得到结果我们可以看到,属性值永远是最后一个属性的值。更多的话同理

2. 深度拷贝和浅度拷贝
(1)举例说明:

var obj = {name:'wenzi', sex:'male'};
var obj1 = obj; // 赋值
obj1.name = 'bing';
console.log(obj.name); // bing

解析:修改了obj1中的name值,结果obj中的值也跟着发生了变化,这是为什么呢。其实这就是浅度拷贝:这仅仅是将obj对象的引用地址简单的复制了一份给予变量 obj1,而并不是将真正的对象克隆了一份,因此obj和obj1指向的都是同一个地址。当修改obj1的属性或给obj1添加新属性时,obj都会受到影响。

(2).变量的值不是对象和数组,修改后面的变量是不会影响到前面的变量:

var s = 'hello';
var t = s;
t = 'world';
console.log(s); // hello

深度拷贝就不是拷贝引用地址,而是实实在在的复制一份新对象给新的变量.

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值