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]);
案例:这只是浅度拷贝
1 2 3 | var obj1={ name : 'Tom' ,age:21}; var obj2={name: 'Jerry' ,sex: 'boy' }; console.log($.extend({},obj1,obj2));<br>输出:{name: "Jerry" , age: 21, sex: "boy" } |
二、深浅拷贝
语法:jQuery.extend([deep] , target , object1 [ , objectN]);
对比:该语法与上面的描述多了一个boolean类型的【deep】传参,当为true是,将 object1, objectN深度复制后合并到target中。
案例:先来对比一下,理解什么是深度复制,什么是浅度复制的区别
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | 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" }}<br><br>总结:从这里可以看出,深度复制会递归遍历每个对象中含有复杂对象(如:数组,函数,json对象等) |
三、jQuery.fn.extend 和 jQuery.extend 的区别
概念: 类方法 和 实例方法
类方法:是直接可以使用类引用,不需要实例化就可以使用的方法,一般在项目中类方法都是被设置为工具类使用
实例方法:必须创建实例,然后才能通过实例调用 实例方法
说明:jQuery 是一个封装的很好的类,可以使用jQuery选择器来创建jQuery来创建jQuery的实例,比如:使id选择器$('#btn')来创建一个实例
区别:
1、jQuery.extend(object);相当于对类方法的扩展 ,可以理解为静态方法
1 2 3 4 5 6 7 | 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;相当于对实例方法的扩展
1 2 3 4 5 6 7 8 | $.fn.extend({ setRed:function(){ $( this ).css( "color" , "red" ); } }) $( '.tip' ).setRed(); 说明:$( ".tip" )创建了一个jQuery实例,通过它可以调用成员方法setRed |
2.1、以上代码可以实现预想的扩展,最好返this以满足jQuery链式操作的需要
1 2 3 4 5 6 | 改良后的代码 $.fn.extend(){ red:function(){ return $( this ).css( "color" , "red" ); } } |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步