$.extend()方法和fn.extend()方法除了细微区别，基本上是一样的本质上都差不多，extend在英文里原意是继承

功能

1). 扩展方法（重中之重）

2). 浅层克隆

3). 深层克隆

因为有插件库，jQuery有很好的生态，插件库就是基于$.extend做到的，所以扩展方法是重中之重

$.extend() 和 $.fn.extend()的源码用的是一个公用的方法区别在于this

$.extened = $.fn.extened = function () {

    // $.extened this --> $

    // $.fn.extend this --> this.fn

}

$.extened      this指向$

$.fn.extened  this指向$.fn

区别

$.extend()      自定义方法加到工具方法

$.fn.extend()  自定义方法加到实例方法

一、扩展方法

$.extend()

产生自定义范围的随机数的方法

<div id="demo" style="width:200px;height:100px;background:#008c8c;color:#fff;text-align:center;line-height:100px;"></div>

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>

	$.extend({
		definedMandom : function (start, final) {
			// [0, 1) * len + start
			var len = final - start;
			return Math.random() * len + start;
		},
		abc : function () {
			// 接着加方法abc
		}
	}); 

	// 如果有第二个团队，可以接着添加方法
	$.extend({

	});


	$('#demo').click(function(){

		var r = $.definedMandom(5, 10);

		$(this).text(r);

	});

</script>

$.fn.extend()

拖拽

<div id="drag" style="width:100px;height:100px;background-color:yellow;position:absolute;"></div>

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>

	$.fn.extend({

	drag : function () {
		var disX,
			disY,
			self = this;

		$(this).on('mousedown', function(e){

			disx = e.pageX - $(this).offset().left;
			disY = e.pageY - $(this).offset().top;

			$(document).on('mousemove', function (e) {
				$(self).css({
						left: e.pageX - disx, 
						top: e.pageY - disY,
					});
			});

			$(document).on('mouseup', function (e) {
				$(document).off('mousemove').off('mouseup');
			});
		});

		return this; 
	},
	abc : function () {
		
	}
	});

	$('#drag').drag().css({backgroundColor:'yellow'}); // 谁调用的drag，this就是谁

</script>

二、浅层克隆

浅层克隆和深层克隆用$.extend 和 $.fn.extend都一样，参数由二位到多位

1、原始值的浅层克隆

从左向<-右继承，obj2往obj1里面复制，不影响obj2

var obj1 = {
	name: "a",
	age: 6
}

var obj2 = {
	name: "b",
	age: 50,
	smoke: true
}


$.extend(obj1, obj2);

console.log(obj1); // {name: 'b', age: 50, smoke: true}

原始值浅层克隆的效果

1). 重复的属性age被覆盖

2). 没有的属性smoke添加上

2、引用值的浅度克隆

引用值只复制数据地址，地址指向的是同一个房间，obj1改变了obj2也跟着变

var obj1 = {
	name: "a",
	age: 6
}

var obj2 = {
	name: "b",
	age: 50,
	smoke: true,
	fortune: {
		ccb: 1000,
		icbc: 2000
	}
}

$.extend(obj1, obj2);

obj1.fortune.ccb = '钱都花完了余额0';

console.log(obj2.fortune.ccb); // 钱都花完了余额0

如果obj1也有同样的引用值fortune会被obj2覆盖

var obj1 = {
	name: "a",
	age: 6,
	fortune: {
		ccb: 0,
		icbc: 0
	}
}

var obj2 = {
	name: "b",
	age: 50,
	smoke: true,
	fortune: {
		ccb: 1000,
		icbc: 2000
	}
}

$.extend(obj1, obj2);

console.log(obj1.fortune); // {ccb: 1000, icbc: 2000}

3、三个参数的浅度克隆

把obj2里面的和obj3里面的东西，都放到obj1里面。注意，不是obj3放到obj2再放到obj1。不管后面写多少个，都往obj1里面放

var obj1 = {
	name: "a",
	age: 6,
	fortune: {
		ccb: 0,
		icbc: 0
	}
}

var obj2 = {
	name: "b",
	age: 50,
	smoke: true,
	fortune: {
		ccb: 1000,
		icbc: 2000
	}
}

var obj3 = {
	name: "b",
	height: 180,
}

$.extend(obj1, obj2, obj3);

console.log(obj1); // {name: 'b', age: 50, fortune: {…}, smoke: true, height: 180}

三、深层克隆

深层克隆多一个参数true

1、原始值的深层克隆

只有原始值的深层克隆跟浅层克隆规则一样

var obj1 = {
	name: "a",
	age: 6,
}

var obj2 = {
	name: "b",
	age: 50,
	smoke: true,
}

var obj3 = {
	name: "b",
	height: 180,
}

$.extend(true, obj1, obj2, obj3);

console.log(obj1); // {name: 'b', age: 50, smoke: true, height: 180}

2、有引用值的深层克隆

obj2里面有引用值fortune，obj1里面没有引用值fortune

var obj1 = {
	name: "a",
	age: 6
}

var obj2 = {
	name: "b",
	age: 50,
	smoke: true,
	fortune: {
		ccb: 1000,
		icbc: 2000 
	}
}

var obj3 = {
	name: "b",
	height: 180,
}

$.extend(true, obj1, obj2, obj3);

obj1.fortune.ccb += 123;

console.log(
	obj1.fortune.ccb, // 1123
	obj2.fortune.ccb  // 1000
);

obj1和obj2里面都有引用值fortrune

var obj1 = {
	name: "a",
	age: 6,
	fortune: {
		ccb: 0,
		icbc: 0
	}
}

var obj2 = {
	name: "b",
	age: 50,
	smoke: true,
	fortune: {
		ccb: 1000,
		icbc: 2000,
		BC: 3000,
	}
}

var obj3 = {
	name: "b",
	height: 180,
}

$.extend(obj1, obj2, obj3);

console.log(obj1);
/*
{
	age: 50
	fortune: {ccb: 1000, icbc: 2000, BC: 3000},
	height: 180,
	name: "b"
	smoke: true
}
*/