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");

   }

}

巴特西

javascript 之扩展对象 jQuery.extend

最新文章

热门文章

巴特西

javascript 之 扩展对象 jQuery.extend

最新文章

热门文章

javascript 之扩展对象 jQuery.extend