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

功能

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

2. 浅层克隆

3. 深层克隆

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

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

$.extened      this 指向 $

$.fn.extened  this 指向 $.fn

$.extened = $.fn.extened = function () {
  // $.extened this --> $
  // $.fn.extend this --> 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: 'orange'}); // 谁调用的.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
// }