关于jq中的$.extend()跟$.fn.extend()区别

一、$.extend()的用法

  1.为扩展jQuery类本身,为自身添加新的方法。

  $.extend({

  min:((a,b) => a > b ? b : a ),

  max:((a,b) => a > b ? a : b )

  })

  $.min(3,5) //它是跟$.each一样,属于工具方法

    2.对象的扩展

  a.这个用法跟ES6的Object.assign()方法类似,扩展或复制一个对象,看例子

  var obj1 = {a:1,b:2}

  var obj2 = {c:5,a:4}

  $.extend({},obj1,obj2) //{a: 4, b: 2, c: 5}

  

  b. extend()第一个参数boolean代表是否进行深度拷贝,一般默认false,可以省略不写。为true代表深度拷贝

  

  var result1=$.extend( true, {},
    { name: "John", location: {city: "Boston",county:"USA"} },
    { last: "Resig", location: {state: "MA",county:"China"} }
  );
  console.log(111,result1)//
  var result2=$.extend( {},
    { name: "John", location: {city: "Boston",county:"USA"} },
    { last: "Resig", location: {state: "MA",county:"China"} }
  );
  console.log(222,result2)
  

  可以看到第一个参数为false的时候,对象直接被覆盖,为true的时候,对象是被合并了。

二、$.fn.extend()把对象挂载到了jq的原型(jQuery.prototype)上,为jq实例添加方法

  (function($){
    $.fn.extend({
      speak:function(){
        alert("how are you!");
      }
    });
  })(jQuery);
  <div id="div">测试</div>
  $('#div').speak()
 
  大部分插件都是用jQuery.fn.extend()
原文地址:https://www.cnblogs.com/woniubushinide/p/11227458.html