理解jquery的$.extend

理解jquery的$.extend

今日在写js插件过程当中须要使用扩展对象的方法，便想到了jQuery.extend这个方法，但又不甚了解，故去查了下官方API文档，本身也进行了相应尝试，现将所得总结以下：

$.extend和$.fn.extend的相关用法

jQuery.fn

jQuery.fn = jQuery.prototype = {
　　　init: function( selector, context ) {//….
//……
};

由上述代码能够看出$.fn是至关于$.prototype的，而jQuery是一个封装很好的类，所以当咱们使用$.fn时至关于给jQuery这个类添加成员函数，添加后jQuery类的实例便可以使用这个“成员函数”，例如当咱们使用$("#input-demo")时至关于建立了一个jQuery实例，当咱们要开发一个插件时，例如作一个特殊的编辑框，当它获取焦点时弹框显示当前输入框的内容，咱们能够作以下操做：

$.fn.extend({
  alertContentWhenFocus: function() {
    $(this).on('focus', function() {
      alert($(this).val());
    )
  }
})
$("#input-demo").alertContentWhenFocus();

$.extend(object)

当想给jQuery类添加静态方法时，咱们能够作以下操做：

$.extend({
  min: function(x, y) {return x < y ? x : y;},
  max: function(x, y) {return x > y ? x : y;}
})

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

该方法可用于一个或其它多个对象来扩展其中一个对象，并返回被扩展的对象，当咱们提供两个或两个以上的对象给$.extend时，对象全部的属性将会添加到目标对象,所以目标对象的参数将会被修改，若咱们想保留原对象，咱们能够传递一个空对象做为目标对象。当目标对象为空时，jQuery对象将会被默认为目标对象，这时至关于咱们在jQuery的命名空间下添加新的功能，这是常见的插件开发模式。

• deep:
  可选属性,当其值为true时，递归合并（又叫作深拷贝），当缺省时默认为false，是不会进行递归的合并操做的，但不可第一个参数传递false

• target:
  目标对象，将附加对象所包含的额外属性传递给目标对象做为新的参数，若是它是惟一的参数，这也为着目标参数被省略，此时，jQuery对象自己将被默认为目标对象，将扩展jQuery的命名空间，当咱们想向jQuery中添加新函数时须要用到

• object1:一个对象，它包含额外的属性合并到第一个参数 objectN:包含额外的属性合并到第一个参数

实例

var object = $.extend({}, object1, object2);

合并object1和object2对象，并在不修改object1对象的状况，合并后结果将会赋值给object

var settings = {first:'hello', second: 'world'};
var options = {first:'hello', second: 'JavaScript',third: 'nodeJs'};
var results = $.extend({}, settings, options);

输出：results 为 {first: "hello", second: "JavaScript", third: "nodeJs"}

$.extend(obj1,obj2)

合并两个对象，并修改第一个对象

var obj1 = {first: 1, second: {height: 178, weight: 70,length:100}};
var obj2 = {second: {height:180, weight:65, width: 90}, third: 90};
$.extend(obj1, obj2);

输出结果为：{first: 1, second: {height:180,weight:65, width: 90}, third: 90}

细心的读者可能会发现，输出的结果和咱们预想的结果好像有点不一样，输出结果的second属性与目标对象的second属性相比少了length这个属性，缘由是在这种状况下，$.extend()的合并操做不是递归的，这意味着当若是目标对象的属性自己是一个对象或者数组，那么第二个对象相同的key属性的value值将会覆盖第一个对象的value值，说明两个对象相同key的value值不是合并的关系，而是覆盖与被覆盖的关系。

$.extend(true,obj1,obj2)

当第一个值为true时，那么在对象上将会进行递归的合并，而不是简单的替换关系了，这样说可能有点深奥，下面看个例子就明白了。

var obj1 = {first: 1, second: {height: 178, weight: 70}};
var obj2 = {second: {height:180, weight: 65, width: 90}, third: 90};
$.extend(true,obj1,obj2)

输出结果为:{first: 1, second: Object, third: 90}

有注意的读者应该会发现，这个例子和上述的例子基本是相同的，但结果倒是咱们预想的结果了，当$.extend()的第一个参数为true时，在对象执行的合并将会是递归的合并，是比较合并的，而不是简单的替换与覆盖。

[后记]：这篇博文一样花费了挺久的时间，是本身在工做闲暇之余抽空搜寻资料创做的。在撰写的过程当中，我发现一个现象，一个并不难的知识点，若本身在网上搜寻资料看懂理解并不须要花费多少时间，但如果要将本身所理解撰写成博文却要难上数倍，首先要理清本身表达的思路，要将本身理解的过程梳理清楚，由浅至深结合例子将这个知识点分析透彻，以求读者在阅读这篇文章的过程当中能花费更短的时间读懂。我不是一个聪明的人，因此我看明白一个知识点须要花费的功夫可能会比其余人更长些，所以写出来的东西每每啰嗦些，但愿这篇博文对你们有所帮助。以上皆我的愚见，请笑纳！