前端工程师-jQuery-理解$.extend()$.fn.extend()$.fn

Posted 2020-10-30 nanshine

以下是自己的理解，欢迎借鉴的小伙伴指正，谢谢谢谢 

1.jQuery.fn.extend(object)：一般用来制作插件

官方解释：A jQuery plugin is simply a new method that we use to extend jQuery‘s prototype object. （一个我们用于扩展jquery原型对象的新的简单的jquery插件）

一看到扩展原型对象，那就明白了就是给jquery原型上添加方法,那么生成的jquery实例都可以通过原型链的规则，使用到这个方法

<script>
        $(function() {
            $.fn.extend({
                min: function(a, b) {
                    return a < b ? a : b;
                },
                max: function(a, b) {
                    return a > b ? a : b;
                }
            });
            console.log($.min(1, 2));
            //报错：$.min is not a function
            console.log($("p").min(1, 2));
            //1
        });
    </script>        

2.jQuery.extend(object)

官方解释：扩展jQuery对象本身。用来在jQuery命名空间上增加新函数。

扩展对象本身的话，那么，实例是找不到这些方法的

<script>
        $(function() {
            $.extend({
                min: function(a, b) {
                    return a < b ? a : b;
                },
                max: function(a, b) {
                    return a > b ? a : b;
                }
            });
            console.log($.min(1, 2));
　　　　  //1
            console.log($("p").min(1, 2));        
            //报错：$(...).min is not a function
 }); 

3.jQuery.fn(object)

 为什么放在最后说呢，请大家借鉴这个小伙伴的分享，感谢这位小伙伴，借用一下你的地址，

http://caibaojian.com/jquery-extend-and-jquery-fn-extend.html

摘要：借鉴以上地址的，原版就戳那个地址

jQuery.fn = jQuery.prototype = {
　　　init: function( selector, context ) {//….
//……
};
所以扩展方法的时候，要写在extend里面，不能把原型都改了呀，出大事