jQuery中的 $.extend() 和 $.fn.extend()

jQuery中的 $.extend() 和 $.fn.extend()

ANGWH

于 2020-05-24 06:39:59 发布

注意：$.extend是为jQuery类添加添加类方法,用$.调用（类似$.ajax），$.fn.extend则是为jQuery对象添加方法（实例方法）,用DOM元素调用

文章标签： jquery
版权
$.extend() 和 $.fn.extend() 这两个方法都是给jQuery进行拓展，开发jQuery插件时经常使用
在jQuery源码中，你会看到关于这两个方法的代码的第一行是这样的

jQuery.extend = jQuery.fn.extend = function(){}
1
可以看出两个方法共用的是同一个函数体，所有的操作都是一样的，只不过两个方法使用的对象不同。

$.extend是为jQuery类添加添加类方法，可以理解为添加静态方法（工具方法）

    $.extend({
        min: function(a, b) { return a < b ? a : b; },
        max: function(a, b) { return a > b ? a : b; },
        add: function(a, b) { return a + b }
    });
    // 调用
    $.min(2,3); //  2 
    $.max(4,5); //  5
    $.add(5,5); //  10
1

$.extend() 也提供了深度拷贝的方法

    var obj = {
        name:'哈哈', 
        score:80
    };
    var obj1 = {
        name:'嘻嘻',
        success:'A',
        score:{
            Chinese:100,
            math:90
        }
    }
    $.extend(true, obj, obj1);
    
    console.log("obj" , obj);
    console.log("obj1" , obj1);

    obj.score.Chinese = 10;

    console.log(obj.score.Chinese);   // 10
    console.log(obj1.score.Chinese);  // 100
1

后者的内容克隆到前者，属性重名的直接覆盖，修改属性值互不干扰。


$.fn.extend则是为jQuery对象添加方法（实例方法）

查看jQuery源码也可以发现

jQuery.fn = jQuery.prototype = {}
1
可以明显的看到就是为jQuery的原型添加新的属性和方法。

    $.fn.extend({
        toWidth: function() {
            this.width(function(index,width){
                return width + 10
            }).css({
                backgroundColor : 'green'
            });
        }
    });
    // 使用新创建的.check() 方法
    $(".box").click(function(){
        $(this).toWidth();
    })
1

$.fn.extend()也有克隆，浅层克隆和深层克隆都有，互不影响。

浅层克隆

    $.fn.extend( obj, obj1);
    obj.score.Chinese = 10;
    obj1.score.math= 50;
1

深层克隆

    $.fn.extend(true, obj, obj1);
    obj.score.Chinese = 10;
    obj1.score.math = 50;
1
————————————————
版权声明：本文为CSDN博主「ANGWH」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/ANGWH/article/details/106307307