jquery extend用法

jquery extend用法

jQuery.extend() 函数用于将一个或多个对象的内容合并到目标对象。
jQuery 的扩展方法 extend 是我们在写插件的过程中常用的方法，当然，如果你没有用到，至少也见过了；通常我们使用 jQuery 的 extend 时，大都是为了实现默认字段的覆盖，即传入某个字段的值，则使用传入值，否则使用默认值。下面来看看详细的介绍吧。

一、合并

$.extend() 语法：jQuery.extend( target [, object1 ] [, objectN ] )；
extend 方法需要至少传入一个参数，第一个必需，后面的都是可选参数。若传给extend是两个或两个以上的参数都是对象类型，那么就会把后面所有对象的内容合并给target（第一个对象）上。
合并方式：有则覆盖，无则追加

var target = {name:'xiaohua'};
var obj1 = {name:'xiaoming'};
$.extend(target,obj1);

console.log(target.name); //xiaoming
console.log(obj1.name); //xiaoming

var obj2 = {score:{english:80, math:90}}
$.extend(target,obj2);

console.log(target);  //{name: "xiaoming", score:{english:80, math:90}}

二、扩展

extend 方法只传入一个参数，那么 jQuery 对象本身被默认为目标对象。这样就可以在 jQuery 命名空间下添加新的属性与功能。对于插件开发者，在 jQuery 中添加新属性与方法是很有用的。

$.extend({
	_addProperty : 'addPropertyExtend',
	_addFunction : function(){
		return this._addProperty+' is result';
	}
});

var add1 = $._addProperty;  //jquery 添加的属性调用方式
var add2 = $._addFunction();  //jquery 添加的方法调用方式
console.log(add1);  //addPropertyExtend
console.log(add2);  //addPropertyExtend is result

三、继承 —— 浅拷贝和深拷贝

什么是浅拷贝，什么是深拷贝，先看下面的例子：

//字符串
var str = 'abc';
var str1 = str;
str1 = 123;
console.log(str);  //打印出：abc

//json对象
var obj = {name:'xiaoming', age:20};
var obj1 = obj;
obj1.name = 'xiaoli';
console.log(obj.name);  //打印出： xiaoli

//数组
var arr = ['Json',28,'Lily',26];
var arr1 = arr;
arr1[1] = 24;
console.log(arr);  //打印出： ["Json", 24, "Lily", 26]

从上面的几个例子中可以得知，字符串类型将原有值拷贝给新变量，是直接把数据拷贝给新变量的存储空间，故在改变新变量时，不会影响到原有变量数据；当变量值为对象和数组时，是将变量的引用地址简单的复制了一份给新变量，并不是将真正的对象克隆了一份，即原有变量和新变量指向的都是同一个地址。故，当给新变量修改或添加新属性时，都会影响到原有变量。对对象和数组的这种方式就是浅拷贝。所谓的深拷贝就不是拷贝引用地址，而是复制一份新对象给新的变量，对新变量无论是修改或者添加都不会改变原有变量的数据。jQuery提供了深拷贝的语法：

语法：jQuery.extend( [deep ], target, object1 [, objectN ] )
用途：复制js对象，或将两个或更多对象的内容合并到第一个对象。

```
var object1 = {
	date: '2019-01-01',
	day: {
		HH: 10,
		mm: 35
	}
};
var object2 = {
	day: {
		mm: 45
	},
	c: 100
};

$.extend(true,object1, object2);
console.log('原来的object1--->'+JSON.stringify(object1)); 
 //打印出：原来的object1--->{"date":"2019-01-01","day":{"HH":10,"mm":45},"c":100}
console.log('原来的object2--->'+JSON.stringify(object2));
//打印出：原来的object2--->{"day":{"mm":45},"c":100}
object1.day.mm = 50;
object1.day.ss = 28;
console.log('新的object1--->'+JSON.stringify(object1));
//打印出：新的object1--->{"date":"2019-01-01","day":{"HH":10,"mm":50,"ss":28},"c":100}
console.log('新的object2--->'+JSON.stringify(object2));
//打印出：新的object2--->{"day":{"mm":45},"c":100}
```

说明：如果第二个参数对象有的属性在第一个参数对象也有，还要继续在这个相同的参数向下一层找，比较相同参数的对象中是否还有不一样的属性，如果有，将其继承到第一个对象，如果没有，则覆盖。