前言：jQuery下的方法有很多，而且都很实用。比如each方法，我们可以$.each()这样去使用，也可以$('div').each()这样去使用，两者有什么区别呢？
var jQuery = function( selector, context ) {
return new jQuery.fn.init( selector, context, rootjQuery );
}
jQuery.each = function(){}
前者是jQuery下的方法，可以直接使用，我们习惯性称为工具方法；
--------
jQuery.fn = jQuery.prototype = {
constructor: jQuery,
init: function(){}
}
jQuery.fn.each = function(){
}
后者是jQuery原型下的方法，需要实例jQuery对象后使用，我们习惯性称为jQuert实例对象方法。
一、模拟jQuery创建方法、扩展方法。
(function(window,undefined){
var jQ = function(selector){
return new jQ.fn.init(selector);
};
jQ.fn = jQ.prototype = {
jquery:'2.0.3', //jquery版本号信息
constructor: jQ, //添加构造器属性
length:0, //初始length属性
selector:'', //初始selector属性
init: function(selector){
//初始化jQuery对象
},
toArray: function(){},
get: function(){},
pushStack: function(){},
each: function(){},
ready: function(){},
slice: function(){},
first: function(){},
last: function(){},
eq: function(){},
map: function(){},
end: function(){},
push: function(){},
sort: function(){},
splice: function(){}
};
jQ.fn.init.prototype = jQ.fn;
jQ.extend = jQ.fn.extend = function(){
}
jQ.extend({
each: function(){},
type: function(){},
parseJSON: function(){}
/*.............*/
});
jQ.fn.extend({
attr: function(){},
removeAttr: function(){},
addClass: function(){},
removeClass: function(){},
toggleClass: function(){},
val: function(){},
css: function(){},
on: function(){}
/*.............*/
});
window.$$ = jQ;
})( window );
①、像jQ原型下有一些比较重要的方法，而且不会经常需要修改、优化，或者删除的方法。
②、而如果要继续添加、扩展方法。都是通过extend()去扩展方法。
jQ.extend = jQ.fn.extend = function(){
}
③、扩展工具方法
jQ.extend({
each: function(){},
type: function(){},
parseJSON: function(){}
/*.............*/
});
④、扩展jQuery对象方法
jQ.fn.extend({
attr: function(){},
removeAttr: function(){},
addClass: function(){},
removeClass: function(){},
toggleClass: function(){},
val: function(){},
css: function(){},
on: function(){}
/*.............*/
});
这样使得代码的更好维护，如果要添加方法只需要在extend中去操作，而不需要在核心代码中去操作。
二、extend扩展方法源码
在研究extend源码之前，来看看extend几种用法。
1、简单的说extend有四种用法：
①、扩展jquery工具方法
②、扩展jQuery实例对象方法
③、浅拷贝
④、深拷贝
2、进行细分的话，extend有以下几种情况
var obj1 = { name:'freddy', hobit:["basketball"], sex:null };
var obj2 = { age:18 };
var obj3 = {};
var obj4 = {};
var obj5 = {};
$.extend({}); //①扩jQuery展工具方法
$.fn.extend({}); //②扩展jQuery实例对象方法
$.extend(obj3,obj1); //③浅拷贝
$.extend(obj3,obj1,obj2); //③浅拷贝多个对象
$.extend(true,obj4,obj1); //④深拷贝
$.extend(true,obj4,obj1,obj2); //④深拷贝多个对象
$.extend(obj5,{name:'nick'},{age:18}); //⑤扩展对象
console.log(obj3);
console.log(obj4);
console.log(obj5);
对于浅拷贝、深拷贝不熟悉的可以看看我以前的文章【JavaScript】对象引用、浅拷贝、深拷贝详解
3、直接上extend源码（这里的目标对象为“被扩展的对象”或者“拷贝别人”的对象）
jQuery.extend = jQuery.fn.extend = function() {
var options, name, src, copy, copyIsArray, clone,
target = arguments[0] || {}, //设置第一个参数为目标对象
i = 1, //i为1是浅拷贝情况下，被拷贝的对象是arguments[1],从二个参数开始
length = arguments.length,
deep = false; //默认是浅拷贝
//$(true,arr4,arr1) || $(true,arr4,arr1,arr2);
if ( typeof target === "boolean" ) { //深拷贝情况第一个参数为true,布尔类型
deep = target;
target = arguments[1] || {}; //目标对象变成第二个参数了
i = 2; //被拷贝对象是arguments[2],从第三个参数开始
}
//看目标对象是否是对象
if ( typeof target !== "object" && !jQuery.isFunction(target) ) {
target = {};
}
//$.extend({}) || $.fn.extend({}) 扩展方法
if ( length === i ) { //只有一个参数的情况
target = this; //目标对象变成了$ 或者 $.fn
--i; //i变成0
}
for ( ; i < length; i++ ) { //for循环用于解决->拷贝多个对象的情况
if ( (options = arguments[ i ]) != null ) { //如果该参数对象不为undefined或null
for ( name in options ) {
src = target[ name ]; //保存目标对象属性
copy = options[ name ]; //保存该属性的值
//如果出现$.extend(obj1,{ name:obj1 }); 跳过本次循环
if ( target === copy ) {
continue;
}
//如果该属性下的值是"对象自变量"或者"数组"，就进行深拷贝
if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) { //深拷贝
if ( copyIsArray ) { //如果该属性下的值是"数组"
copyIsArray = false;
clone = src && jQuery.isArray(src) ? src : [];
} else { //如果该属性下的值是"对象自变量"
clone = src && jQuery.isPlainObject(src) ? src : {};
}
target[ name ] = jQuery.extend( deep, clone, copy ); //然后进行递归操作
} else if ( copy !== undefined ) { //浅拷贝
target[ name ] = copy;
}
}
}
}
return target;
};
注释写上去之后，一些都明了了，也并没有什么难点。如果有不明白的地方可以下方留言。三、扩展方法
<body>
<script src="https://cdn.bootcss.com/jquery/2.0.3/jquery.js"></script>
<script>
$.extend({
freddy: function(){
console.log('扩展jQuery工具方法');
}
});
$.fn.extend({
freddy: function(){
console.log('扩展jQuery实例对象方法');
}
});
$.freddy();
$(document).freddy();
</script>
</body>
运行结果
这样是不是很方面，就算不熟悉jquery源码，也能很快扩展出自己想要的方法。不过这里要注意的是，如果扩展的方法名如果跟jQuery原生的方法名重名（如css,attr）,会发生我们扩展的方法覆盖了原生的jQuery方法。
原文发布时间为：2018年06月30日
原文作者：穆弘
本文来源CSDN如需转载请联系原作者