资讯专栏INFORMATION COLUMN

详解 Jquery extend() 和Jquery.fn.extend()

hlcfan / 3281人阅读

摘要:文档上的解释将一个或者多个对象扩展一个新对象,返回一个新的对象是否深度克隆对象,将要扩展到的新对象,待合并到新对象的第一个对象,待合并到新对象的第个对象例将合并到作为一个新对象,此时输出的所输出内容将是两个对象属性集合,我们之所以这么做,可

Jquery extend()

API文档上的解释:将一个或者多个对象扩展一个新对象,返回一个新的对象
$.extend([deep],target,obj1,objN)
deep:是否深度克隆对象,
target:将要扩展到的新对象,
obj1:待合并到新对象的第一个对象,
objN:待合并到新对象的第N个对象.
例:$.extend(obj1,obj2)//将obj2合并到obj1作为一个新对象,
var obj1 = {
name:"sunwukong",
age:18
}
var obj2 = {

price:50,
weight:100

}
$.extend(obj1,obj2);
此时输出的obj1 所输出内容将是两个对象属性集合,
我们之所以这么做,可以将obj1看做一个普通的人,而添加到obj2之后可以新添加功能,有了新的功能以后能跑能跳
注意:如果此时有相同属性名,obj1中的相同属性名的属性值将被obj2所覆盖

(function($){
           $.extend({
               speak:function(){
                   alert("how are you!");
               }
           });
    })(jQuery);

此时我们可以直接调用$.speak这个方法
扩展到这个方法只跟$有关,跟具体实例化对象是没有关系的

Jquery.fn.extend()

把对象挂载到Jquery的prototype属性,来扩展新的jquery方法
Jquery.fn.extend = jquery.prototype ={
speak:function(){
consolor.log("aa")
}}
调用:
$("#btn").speak()//此时我们的fn可以代表的是我们当前这个对象
这种可以用于我们公共的js方法的调用
alert($.fn.jquery );获取当前jquery的版本号

两者的区别

1. 两者的调用方式
$.extend(deep,target,obj1,obj2)
一般由传入全局的函数来调用,主要用于扩展个全局函数,如:$.init(),$.ajax();
jQuery.fn.extend(),
一般由具体的实例对象来调用,可以用来拓展个选择器,例如$.fn.each();
2. 两者的主要功能不同
$.extend(deep,target,obj1,obj2)一般用于给jquery自身添加方法
jQuery.fn.extend(),
3. 开发中可能会遇到的bug
bug之$.extend(deep,target,obj1,obj2)
var obj1 = {
name:"sunwukong",
age:18,
banlance:{big:false,nianji:12,pal:"ad"}
}
var obj2 = { price:50, banlance:{big:true,pal:"ad"} }
var obj3 = {}
$.extend(obj3,obj1,obj2)
obj3{name:"sunwukong",age:18, price:50,banlance:{big:true,pal:"ad"}}
此时相同属性第二个将第一个完全覆盖
var obj3 = {}
$.extend(true,obj3,obj1,obj2)
obj3{name:"sunwukong",age:18, price:50,banlance:{big:true,nianji:12,pal:"ad"}}
此时调用深克隆可以将对应的数据进行obj2中没有的obj1属性也进行添加

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/95733.html

相关文章

  • jQuery结构简析

    摘要:构成类数组对象,引入,并使其自增版本信息模拟数组,即这里构成一个类数组对象由于这里把作为构造函数调用,得到一个对象,所以我们把作为的原型。 本文简单实现jQuery框架,深入理解javascript对象。本文的对照版本是jQuery-1.2.6.js 本文注重jquery结构设计思路,并不侧重具体功能的实现以及兼容性和安全性的部分。 首先建立基本框架如下: (function(wind...

    xiaokai 评论0 收藏0
  • jQuery.extend()详解

    摘要:方法作用是,用一个或多个其他对象来扩展一个对象。通常使用格式如下上述代码含义是将合并到中,并返回。如果该方法里面两个参数都是数组呢控制台输出的为如果方法省略了参数,则表示将合并到全局对象中去。 jQuery.extend()方法作用是,用一个或多个其他对象来扩展一个对象。 通常使用格式如下:jQuery.extend(dest,src1,src2,src3...);上述代码含义是:将s...

    Andrman 评论0 收藏0
  • jQuery.extend()详解

    摘要:方法作用是,用一个或多个其他对象来扩展一个对象。通常使用格式如下上述代码含义是将合并到中,并返回。如果该方法里面两个参数都是数组呢控制台输出的为如果方法省略了参数,则表示将合并到全局对象中去。 jQuery.extend()方法作用是,用一个或多个其他对象来扩展一个对象。 通常使用格式如下:jQuery.extend(dest,src1,src2,src3...);上述代码含义是:将s...

    gaosboy 评论0 收藏0
  • jQuery.extend()详解

    摘要:方法作用是,用一个或多个其他对象来扩展一个对象。通常使用格式如下上述代码含义是将合并到中,并返回。如果该方法里面两个参数都是数组呢控制台输出的为如果方法省略了参数,则表示将合并到全局对象中去。 jQuery.extend()方法作用是,用一个或多个其他对象来扩展一个对象。 通常使用格式如下:jQuery.extend(dest,src1,src2,src3...);上述代码含义是:将s...

    hellowoody 评论0 收藏0
  • jQuery 源码系列(一)总体架构

    摘要:到目前为止,的贡献者团队共名成员,多条,可想而知,是一个多么庞大的项目。参考源码分析整体架构源码解析读书笔记第二章构造对象函数详解本文在上的源码地址,欢迎来。 欢迎来我的专栏查看系列文章。 决定你走多远的是基础,jQuery 源码分析,向长者膜拜! 我虽然接触 jQuery 很久了,但也只是局限于表面使用的层次,碰到一些问题,找到 jQuery 的解决办法,然后使用。显然,这种做法的...

    svtter 评论0 收藏0

发表评论

0条评论

hlcfan

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<