javascript 之 扩展对象 jQuery.extend

在JQuery的API手册中，extend方法挂载在JQuery 和 JQuery.fn两个不同的对象上，但在JQuery内部代码实现的是相同的，只是功能各不相同。

官方解释：

• jQuery.extend Merge the contents of two or more objects together into the first object. 把两个或者多个对象合并到第一个对象当中；

• jQuery.fn.extend Merge the contents of an object onto the jQuery prototype to provide new jQuery instance methods. 把对象挂载到 jQuery 的 prototype 上以扩展一个新的 jQuery 实例方法 。

一、合并对象

语法：jQuery.extend(target [,object1] [,objectN]);

案例：这只是浅度拷贝

var obj1={ name :'Tom',age:21};
var obj2={name:'Jerry',sex:'boy'};
console.log($.extend({},obj1,obj2));
输出：{name: "Jerry", age: 21, sex: "boy"}

 

二、深浅拷贝

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

对比：该语法与上面的描述多了一个boolean类型的【deep】传参，当为true是，将 object1, objectN深度复制后合并到target中。

案例：先来对比一下，理解什么是深度复制，什么是浅度复制的区别

var obj1={
    name="John",
    location:{
       city:"Boston",
       county:"USA"
   }
}

var obj2 = {
    last: "Resig",
    location: {
        state: "MA",
        county: "China"
    }
}

$.extend(false, {}, obj1, obj2); // { name: "John", last: "Resig", location: { state: "MA", county: "China" }}

$.extend(true, {}, obj1, obj2); // { name: "John", last: "Resig", location: { city: "Boston", state: "MA", county: "China" }}

总结：从这里可以看出，深度复制会递归遍历每个对象中含有复杂对象（如：数组，函数，json对象等）

　　

三、jQuery.fn.extend  和 jQuery.extend 的区别

概念： 类方法 和 实例方法

           类方法：是直接可以使用类引用，不需要实例化就可以使用的方法，一般在项目中类方法都是被设置为工具类使用

       实例方法：必须创建实例，然后才能通过实例调用 实例方法     

说明：jQuery 是一个封装的很好的类，可以使用jQuery选择器来创建jQuery来创建jQuery的实例，比如：使id选择器$('#btn')来创建一个实例

区别：

1、jQuery.extend(object);相当于对类方法的扩展  ，可以理解为静态方法 

jQuery.extend({
   min:function(a,b){ return a<b?a:b }  
   max:function(a,b){return a>b?a:b }
})

jQuery.min(2,3);
jQuery.max(4,5)

2、jQuery.fn.extend=jQuery.prototype.extend;相当于对实例方法的扩展

$.fn.extend({
   setRed:function(){
       $(this).css("color","red");  
   }
})

$('.tip').setRed();
说明：$(".tip")创建了一个jQuery实例，通过它可以调用成员方法setRed

2.1、以上代码可以实现预想的扩展，最好返this以满足jQuery链式操作的需要

改良后的代码
$.fn.extend(){
   red:function(){
       return $(this).css("color","red");
   }
}