jQuery.extend

来源：互联网发布：你的名字发绳淘宝编辑：程序博客网时间：2024/05/16 23:46

文章转自http://www.cnblogs.com/chyingp/archive/2013/06/03/jquery-extend.html

从jQuery的源码中可以看到，jQuery.extend和jQuery.fn.extend其实是同指向同一方法的不同引用
瞄了下它的代码，其实不复杂，但是在jQuery中扮演了极其重要的作用

jQuery.extend 对jQuery本身的属性和方法进行了扩展
jQuery.fn.extend 对jQuery.fn的属性和方法进行了扩展

// 扩展jQuery对象本身，此处添加了jQuery.noConflict方法jQuery.extend({    noConflict: function（deep）{        //实现细节略    },    //..})// 扩展jQuery.fn，此处添加 jQuery.fn.data方法jQuery.fn.extend({    data: function( key, value ) {        //实现细节略    },    //...})

extend的各种用法

下面会举例说明extend的常见使用方法，最后面的时候简单提下extend方法内部一些实现细节

实例一：扩展jQuery本身

代码如下

jQuery.extend({nick: 'casper'});console.log(jQuery.nick);   //输出：'casper'

实例二：扩展对象

代码如下，将obj2的的属性/方法拷贝到obj1上，需要注意的有两点
obj1本身会被修改
返回的事修改后的obj1

var obj1 = {nick: 'casper'}，    obj2 = {nick: 'chyingp', age: 25};var obj3 = jQuery.extend(obj1, obj2);console.log( JSON.stringify(obj1) );    // 输出 {"nick":"chyingp","age":25}console.log( JSON.stringify(obj3) );    // 输出 {"nick":"chyingp","age":25}

实例三：浅拷贝-当obj中存在引用

如下代码，obj1.scores 的值是个指向对象的引用，当obj2中存在同名应用时，默认obj2中的同名引用会覆盖obj1中那个

var obj1 = { nick: 'casper',  scores: { math: 100, English: 100 } },    obj2 = { scores: { hitory: 100 } },    obj3 = jQuery.extend(obj1, obj2);console.log( JSON.stringify(obj1) );    // 输出 {"nick":"casper","scores":{"hitory":100}}

实例四：深拷贝-当obj中存在引用

还是实例三的代码，不同的是，第一个参数改成true，表明这是深拷贝

var obj1 = { nick: 'casper',  scores: { math: 100, English: 100 } },    obj2 = { scores: { hitory: 100 } },    obj3 = jQuery.extend( true, obj1, obj2 );console.log( JSON.stringify(obj1) );    // 输出 {"nick":"casper","scores":{"math":100,"English":100,"hitory":100}}

实例五：扩展jQuery.fn

如下代码，给jQuery.fn添加 say 方法~

jQuery.fn.extend({    say: function(){        console.log("hello, I'm "+this.attr('id'));    }});$('#casper').say(); // 输出 hello, I'm casper

0 0