jQuery extend()详解及简单实例


Posted in jQuery onMay 06, 2017

jQuery extend()详解及简单实例

使用jQuery的时候会发现,jQuery中有的函数是这样使用的:

$.get(); 
$.post(); 
$.getJSON();

有些函数是这样使用的:

$('div').css(); 
$('ul').find('li');

有些函数是这样使用的:

$('li').each(callback); 
$.each(lis,callback);

这里涉及到两个概念:工具方法与实例方法。通常我们说的工具方法是指无需实例化就可以调用的函数,如第一段代码;实例方法是必须实例化对象以后才可以调用的函数,如第二段代码。jQuery中很多方法既是实例方法也是工具方法,只是调用方式略有不同,如第三段代码。为了更清晰解释JavaScript中的工具方法与实例方法,进行如下测试。

functionA(){ 
     
  } 
  A.prototype.fun_p=function(){console.log("prototpye");}; 
  A.fun_c=function(){console.log("constructor");}; 
  var a=new A(); 
  A.fun_p();//A.fun_p is not a function 
  A.fun_c();//constructor 
  a.fun_p();//prototpye 
  a.fun_c();//a.fun_c is not a function

通过以上测试可以得出结论,在原型中定义的是实例方法,在构造函数中直接添加的是工具方法;实例方法不能由构造函数调用,同理,工具方法也不能由实例调用。

当然实例方法不仅可以在原型中定义,有以下三种定义方法:

functionA(){ 
    this.fun_f=function(){ 
        console.log("Iam in the constructor"); 
    }; 
} 
A.prototype.fun_p=function(){ 
    console.log("Iam in the prototype"); 
}; 
var a=newA(); 
a.fun_f();//Iam in the constructor 
a.fun_i=function(){ 
    console.log("Iam in the instance"); 
}; 
a.fun_i();//Iam in the instance 
a.fun_p();//Iam in the prototype

这三种方式的优先级为:直接定义在实例上的变量的优先级要高于定义在“this”上的,而定义在“this”上的又高于 prototype定义的变量。即直接定义在实例上的变量会覆盖定义在“this”上和prototype定义的变量,定义在“this”上的会覆盖prototype定义的变量。

下面看jQuery中extend()方法源码:

jQuery.extend = jQuery.fn.extend = function() { 
    var options,name, src, copy, copyIsArray, clone, 
        target= arguments[0] || {}, 
        i =1, 
        length= arguments.length, 
        deep= false; 
    // Handle adeep copy situation 
    if ( typeoftarget === "boolean" ) { 
        deep= target; 
        //Skip the boolean and the target 
        target= arguments[ i ] || {}; 
        i++; 
    } 
    // Handlecase when target is a string or something (possible in deep copy) 
    if ( typeoftarget !== "object" && !jQuery.isFunction(target) ) { 
        target= {}; 
    } 
    // ExtendjQuery itself if only one argument is passed 
    if ( i ===length ) { 
        target= this; 
        i--; 
    } 
    for ( ; i< length; i++ ) { 
        //Only deal with non-null/undefined values 
        if ((options = arguments[ i ]) != null ) { 
            //Extend the base object 
            for( name in options ) { 
                src= target[ name ]; 
                copy= options[ name ]; 
                //Prevent never-ending loop 
                if( target === copy ) { 
                   continue; 
                } 
                //Recurse if we're merging plain objects or arrays 
                if( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray= jQuery.isArray(copy)) ) ) { 
                   if( copyIsArray ) { 
                       copyIsArray= false; 
                       clone= src && jQuery.isArray(src) ? src : []; 
                   }else { 
                       clone= src && jQuery.isPlainObject(src) ? src : {}; 
                   } 
                   //Never move original objects, clone them 
                   target[name ] = jQuery.extend( deep, clone, copy ); 
                //Don't bring in undefined values 
                }else if ( copy !== undefined ) { 
                   target[name ] = copy; 
                } 
            } 
        } 
    } 
    // Returnthe modified object 
    return target; 
};

(1)首先,jQuery和其原型中extend()方法的实现使用的同一个函数。

(2)当extend()中只有一个参数的时候,是为jQuery对象添加插件。在jQuery上扩展的叫做工具方法,在jQuery.fn(jQuery原型)中扩展的是实例方法,即使在jQuery和原型上扩展相同名字的函数也可以,使用jQuery对象会调用工具方法,使用jQuery()会调用实例方法。

(3)当extend()中有多个参数时,后面的参数都扩展到第一个参数上。

var a={}; 
$.extend(a,{name:"hello"},{age:10}); 
console.log(a);//Object{name: "hello", age: 10}

(4)浅拷贝(默认):   

var a={}; 
varb={name:"hello"}; 
$.extend(a,b); 
console.log(a);//Object{name: "hello"} 
a.name="hi"; 
console.log(b);//Object{name: "hello"}

b不受a影响,但是如果b中一个属性为对象:

var a={}; 
varb={name:{age:10}}; 
$.extend(a,b); 
console.log(a.name);//Object{age: 10} 
a.name.age=20; 
console.log(b.name);//Object{age: 20}

由于浅拷贝无法完成,则b.name会受到a的影响,这时我们往往希望深拷贝。

深拷贝:   

var a={}; 
varb={name:{age:10}}; 
$.extend(true,a,b); 
console.log(a.name);//Object{age: 10} 
a.name.age=20; 
console.log(b.name);//Object{age: 10}

b.name不受a的影响。

var a={name:{job:"Web Develop"}}; 
var b={name:{age:10}}; 
$.extend(true,a,b); 
console.log(a.name);//age: 10 job: "Web Develop"
//b.name没有覆盖a.name.job。

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

jQuery 相关文章推荐
jQuery鼠标悬停内容动画切换效果
Apr 27 jQuery
JQuery实现定时刷新功能代码
May 09 jQuery
jQuery实现radio第一次点击选中第二次点击取消功能
May 15 jQuery
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
May 20 jQuery
解决IE7中使用jQuery动态操作name问题
Aug 28 jQuery
jquery实现图片跟随鼠标的实例
Oct 17 jQuery
jQuery获取随机颜色的实例代码
May 21 jQuery
jquery ajax加载数据前台渲染方式 不用for遍历的方法
Aug 09 jQuery
jquery层次选择器的介绍
Jan 18 jQuery
jQuery选择器之层次选择器用法实例分析
Feb 19 jQuery
jquery实现上传文件进度条
Mar 26 jQuery
jQuery冲突问题解决方法
Jan 19 jQuery
jquery仿微信聊天界面
May 06 #jQuery
简单实现jQuery弹幕效果
May 06 #jQuery
jquery实现提示语淡入效果
May 05 #jQuery
Jquery获取radio选中的值
May 05 #jQuery
jQuery实现简单的抽奖游戏
May 05 #jQuery
jquery中each循环的简单回滚操作
May 05 #jQuery
jquery dataTable 获取某行数据
May 05 #jQuery
You might like
为查询结果建立向后/向前按钮
2006/10/09 PHP
php抓取页面的几种方法详解
2013/06/17 PHP
浅析PHP中Collection 类的设计
2013/06/21 PHP
PHP中快速生成随机密码的几种方式
2017/04/17 PHP
PHP实现的观察者模式实例
2017/06/21 PHP
PHP实现Huffman编码/解码的示例代码
2018/04/20 PHP
javascript下给元素添加事件的方法与代码
2007/08/13 Javascript
javascript实现倒计时N秒后网页自动跳转代码
2014/12/11 Javascript
JavaScript常用脚本汇总(三)
2015/03/04 Javascript
javascript中eval函数用法分析
2015/04/25 Javascript
使用console进行性能测试
2015/04/27 Javascript
在Ubuntu系统上安装Ghost博客平台的教程
2015/06/17 Javascript
ExtJS 4.2 Grid组件单元格合并的方法
2016/10/12 Javascript
原生javascript实现图片放大镜效果
2017/01/18 Javascript
Kindeditor单独调用单图上传增加预览功能的实例
2017/07/31 Javascript
angular2 ng2 @input和@output理解及示例
2017/10/10 Javascript
深入理解Vue keep-alive及实践总结
2019/08/21 Javascript
vue3+typeScript穿梭框的实现示例
2020/12/29 Vue.js
[04:19]DOTA2亚洲邀请赛 现场花絮
2015/03/11 DOTA
[01:03:54]Liquid vs IG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python语言实现将图片转化为html页面
2017/12/06 Python
Python程序员面试题 你必须提前准备!(答案及解析)
2018/01/23 Python
详谈python在windows中的文件路径问题
2018/04/28 Python
python多线程与多进程及其区别详解
2019/08/08 Python
Python3 翻转二叉树的实现
2019/09/30 Python
python飞机大战pygame碰撞检测实现方法分析
2019/12/17 Python
如何清空python的变量
2020/07/05 Python
Python实现快速大文件比较代码解析
2020/09/04 Python
wordpress添加Html5的表单验证required方法小结
2020/08/18 HTML / CSS
学校校庆演讲稿
2014/05/22 职场文书
图书馆标语
2014/06/19 职场文书
社区五一劳动节活动总结
2015/02/09 职场文书
会计求职简历自我评价
2015/03/10 职场文书
企业承诺书格式范文
2015/04/28 职场文书
读《茶花女》有感:山茶花的盛开与凋零
2020/01/17 职场文书
MySQL多表查询机制
2022/03/17 MySQL