jQuery中extend方法

$.extend

用一个或多个其他对象来扩展一个对象，返回被扩展的对象。

参数类型1：只传入一个对象就是对jQuery的工具方法进行扩展。

    $(function(){
        $.extend({
            console: function(sMsg){
                console.log(sMsg);
            }
        });
        $.console('jQuery');// jQuery
    });

参数类型2：传入多个对象就是对第一个对象进行扩展。

    $(function(){
        var oTarget = {};
        
        $.extend(oTarget, {name: 'hum'});
        console.log(oTarget.name); // hum
        
        $.extend(oTarget, {name: 'hum'}, {age: 20});
        console.log(oTarget.age); // 20
        
        $.extend(oTarget, {name: 'hum'}, {name: 'tyx', age: 20});
        console.log(oTarget.name); // tyx 同名属性会被覆盖
        
        // 注意：$.extend()的返回值都是被扩展的对象
    });

参数类型3：第一个参数是布尔值，后面多个对象。

　　如果第一个参数为true，那么会深拷贝；

　　如果第一个参数为false，进行的是浅拷贝(默认情况是浅拷贝)，返回结果和没有布尔参数时一样，但是目标对象的值不会改变(其他情况目标对象和返回结果是同一个对象)。

    $(function(){
        var oTarget = {courses: {math: 100, english: 80}};
        console.log($.extend(oTarget, {name: 'hum', courses: { math: 50, chinese: 99}}));// {name: 'hum', courses: { math: 50, chinese: 99}}
        console.log(oTarget); // {name: 'hum', courses: { math: 50, chinese: 99}}

        var oTarget = {courses: {math: 100, english: 80}};
        console.log($.extend(false, oTarget, {name: 'hum', courses: { math: 50, chinese: 99}}));// {name: 'hum', courses: { math: 50, chinese: 99}}
        console.log(oTarget); // {courses: { math: 100, english: 80}}

        var oTarget = {courses: {math: 100, english: 80}};
        console.log($.extend(true, oTarget, {name: 'hum', courses: { math: 50, chinese: 99, english: 80}}));// {name: 'hum', courses: { math: 50, chinese: 99, english: 80}}
        console.log(oTarget); // {name: 'hum', courses: { math: 50, chinese: 99, english: 80}}
    });

深拷贝和浅拷贝的区别：

　　深拷贝会让对象中的所有对象递归拷贝，目标对象和被拷贝对象之间不会存在任何引用关系；

　　浅拷贝不会让对象递归拷贝，目标对象和被拷贝对象内一层的对象类型属性相互引用。

    $(function(){
        var oTarget = {courses: {math: 100, english: 80}};
        var oCopy = {name: 'hum', courses: { math: 50, chinese: 99}};
        console.log($.extend(oTarget, oCopy));// {name: 'hum', courses: { math: 50, chinese: 99}}
        console.log(oTarget); // {name: 'hum', courses: { math: 50, chinese: 99}}
        console.log(oCopy.courses == oTarget.courses); // true 两个对象的courses属性指向同一个对象
        oTarget.courses.chinese = 200;
        console.log(oCopy.courses.chinese);// 200

        var oTarget = {courses: {math: 100, english: 80}};
        var oCopy = {name: 'hum', courses: { math: 50, chinese: 99}};
        console.log($.extend(true, oTarget, oCopy));// {name: 'hum', courses: { math: 50, chinese: 99, english: 80}}
        console.log(oTarget); // {name: 'hum', courses: { math: 50, chinese: 99, english: 80}}
        console.log(oCopy.courses == oTarget.courses); // false 两个对象的courses属性不再指向同一个对象
        oTarget.courses.chinese = 200;
        console.log(oCopy.courses.chinese);// 99
    });

 

$.fn.extend

该方法只传递一个对象的时候，就是对$.fn的扩展。

其他情况下和$.extend方法一样，来扩展对象。

<div>内容</div>
<script src="jQuery.js"></script>
<script>
    $(function(){
        $.fn.extend({
            changeColor: function(){
                $(this).css('color', 'blue');
            }
        });
        $('div').changeColor();
    });
</script>