Jquery中$.extend()的用法，打狗棒法之《歹挑狗身》

本文链接：https://blog.csdn.net/xiaorui51/article/details/108635502

本文详细介绍了jQuery中$.extend()的用法，包括如何为jQuery类添加类方法，如何合并对象内容，以及与jQuery.fn.extend()的区别。通过多个示例解析了递归合并对象、合并默认选项与用户选项的方法，并强调了错误的属性初始化会导致SyntaxError。

摘要由CSDN通过智能技术生成

1. jquery.extend(), 为jQuery类添加类方法

第一种方式用jQuery扩展，比如：

        jQuery.extend({
            min: function(a, b) {
                return a < b ? a : b
            },
            max: function(a, b) {
                return a > b ? a : b
            }
        });

        console.log(jQuery.min(1, 4));
        console.log(jQuery.max(22, 2));

输出结果：
在这里插入图片描述
第二种方法，用$扩展，比如：

        (function($) {
            $.extend({
                a1: function() {
                    $("#log").append("a1_function");
                },
                a2: function() {
                    $("#log").append("a2_function");
                }
            });
        })(jQuery);

调用直接用$.类名

  //调用直接用$.类名
        $.a1();
        $.a2();

页面输出
在这里插入图片描述

2. jquery.extend(), 将两个或更多对象的内容合并到第一个对象。

w3c中解释
在这里插入图片描述
当我们提供两个或多个对象给 $. e x t e n d () ，对象的所有属性都添加到目标对象（ t a r g e t 参数）。如果只有一个参数提供给$ .extend()，这意味着目标参数被省略。在这种情况下，jQuery对象本身被默认为目标对象。这样，我们可以在jQuery的命名空间下添加新的功能。
例子1 合并两个对象，并修改第一个对象

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Extend</title>
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
</head>

<body>
    <div id="log"></div>
    <script>
        var object1 = {
            apple: 0,
            banana: {
                weight: 52,
                price: 100
            },
            cherry: 97
        };
        var object2 = {
            banana: {
                price: 200
            },
            durian: 122
        };
        //第一种情况：合并两个对象，并修改第一个对象
        //在默认情况下，通过$.extend()合并操作不是递归的;如果第一个对象的属性本身是一个对象或数组，
        //那么它将完全用第二个对象相同的key重写一个属性。这些值不会被合并。
        $.extend(object1, object2); //{"apple":0,"banana":{"price":200},"cherry":97,"durian":122}
        $("#log").append(JSON.stringify(object1));
    </script>
</body>
</html>

例子2 采用递归方式合并两个对象，并修改第一个对象。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Extend</title>
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
</head>

<body>
    <div id="log"></div>
    <script>
        var object1 = {
            apple: 0,
            banana: {
                weight: 52,
                price: 100
            },
            cherry: 97
        };
        var object2 = {
            banana: {
                price: 200
            },
            durian: 122
        };
        //第二种情况：采用递归方式合并两个对象，并修改第一个对象。
        //如果为false，则优先第一个元素，后面的不会覆盖前面的
        //如果将 true 作为该函数的第一个参数，那么会在对象上进行递归的合并。
        //$.extend(true, object1, object2); //{"apple":0,"banana":{"weight":52,"price":200},"cherry":97,"durian":122}
        $.extend(false, object1, object2); //{"apple":0,"banana":{"weight":52,"price":100},"cherry":97}
        $("#log").append(JSON.stringify(object1));
    </script>

</body>

</html>

例子3 合并 defaults 和 options 对象，并且不修改 defaults 对象

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Extend</title>
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
</head>

<body>
    <div id="log"></div>
    <script>
        var defaults = {
            validate: false,
            limit: 5,
            name: "defaults_name"
        };
        var option = {
            validate: true,
            name: "option_name"
                // 如果写成  name = "option_name" ，会报错如下
                //Uncaught SyntaxError: Invalid shorthand property initializer
        };
        //不修改原始数据
        var setting = $.extend({}, defaults, option);
        
        //第三种情况：合并 defaults 和 options 对象，并且不修改 defaults 对象
        $("#log").append("<div><b>defaults ---</b>" + JSON.stringify(defaults) + "</div>"); //defaults ---{"validate":false,"limit":5,"name":"defaults_name"}
        $("#log").append("<div><b>option ---</b>" + JSON.stringify(option) + "</div>"); //option ---{"validate":true,"name":"option_name"}
        $("#log").append("<div><b>setting ---</b>" + JSON.stringify(setting) + "</div>"); //setting ---{"validate":true,"limit":5,"name":"option_name"}
    </script>
</body>
</html>

期间犯了一个错误

// 如果写成 name = “option_name” ，会报错如下

//Uncaught SyntaxError: Invalid shorthand property initializer

也就是说键值对不能用等于号！

3. jQuery.fn.extend() 和jQuery.extend()的区别

把对象挂载到 jQuery 的 prototype 属性，来扩展一个新的 jQuery 实例方法，也就是通过这个 extend 添加的新方法，实例化的 jQuery 对象都能使用，因为它是挂载在 jQuery.fn 上的方法。

查看jQuery源码可发现，jQuery.fn = jQuery.prototype。jQuery.fn挂在原型上，由于对原型的修改会影响所有实例，因此fn上的方法会对每一个jQuery实例有效。

对jQuery.fn的扩展，就是为jQuery类添加成员函数，jQuery类的实例可以使用这个成员函数。
比如：

        jQuery.fn.extend({
            clickFunc: function() {
                $(this).click(function() {
                    alert($(this).text());
                });
            }
        });

调用

  $("#log").clickFunc(); //输出文本框的文本

在这里插入图片描述
jQuery.extend()是为jQuery类添加类方法（静态方法），需要通过jQuery类来调用（直接使用 $.xxx 调用）；
jQuery.fn.extend()是为jQuery类添加成员函数（实例方法），所有jQuery实例都可以直接调用（需要使用 $().xxx 调用）。

整合$.extend的常用方法于一起：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Extend</title>
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
</head>

<body>
    <div id="log"></div>
    <script>
        //扩展jquery的方法
        //(function($){})(jQuery)
        (function($) {
            $.extend({
                a1: function() {
                    $("#log").append("a1_function");
                },
                a2: function() {
                    $("#log").append("a2_function");
                }
            });
        })(jQuery);

        jQuery.extend({
            min: function(a, b) {
                return a < b ? a : b
            },
            max: function(a, b) {
                return a > b ? a : b
            }
        });

        jQuery.fn.extend({
            clickFunc: function() {
                $(this).click(function() {
                    alert($(this).text());
                });
            }
        });



        console.log(jQuery.min(1, 4));
        console.log(jQuery.max(22, 2));


        var object1 = {
            apple: 0,
            banana: {
                weight: 52,
                price: 100
            },
            cherry: 97
        };
        var object2 = {
            banana: {
                price: 200
            },
            durian: 122
        };

        var defaults = {
            validate: false,
            limit: 5,
            name: "defaults_name"
        };
        var option = {
            validate: true,
            name: "option_name"
                // 如果写成  name = "option_name" ，会报错如下
                //Uncaught SyntaxError: Invalid shorthand property initializer
        };
        //不修改原始数据
        var setting = $.extend({}, defaults, option);

        //第一种情况：合并两个对象，并修改第一个对象
        //在默认情况下，通过$.extend()合并操作不是递归的;如果第一个对象的属性本身是一个对象或数组，
        //那么它将完全用第二个对象相同的key重写一个属性。这些值不会被合并。
        //$.extend(object1, object2); //{"apple":0,"banana":{"price":200},"cherry":97,"durian":122}


        //第二种情况：采用递归方式合并两个对象，并修改第一个对象。
        //如果为false，则优先第一个元素，后面的不会覆盖前面的
        //如果将 true 作为该函数的第一个参数，那么会在对象上进行递归的合并。
        //$.extend(true, object1, object2); //{"apple":0,"banana":{"weight":52,"price":200},"cherry":97,"durian":122}
        $.extend(false, object1, object2); //{"apple":0,"banana":{"weight":52,"price":100},"cherry":97}

        //$("#log").append(JSON.stringify(object1));

        //第三种情况：合并 defaults 和 options 对象，并且不修改 defaults 对象
        $("#log").append("<div><b>defaults ---</b>" + JSON.stringify(defaults) + "</div>"); //defaults ---{"validate":false,"limit":5,"name":"defaults_name"}
        $("#log").append("<div><b>option ---</b>" + JSON.stringify(option) + "</div>"); //option ---{"validate":true,"name":"option_name"}
        $("#log").append("<div><b>setting ---</b>" + JSON.stringify(setting) + "</div>"); //setting ---{"validate":true,"limit":5,"name":"option_name"}

        //调用直接用$.类名
        $.a1();
        $.a2();

        $("#log").clickFunc(); //输出文本框的文本
    </script>

</body>

</html>