原文鏈接在這里，作為一個菜鳥，我就一邊讀一邊寫

jQuery 2.0.3 源碼分析系列

前面看著差不多了，看到下面一條（我是真菜鳥），推薦木有入門或者剛剛JS入門摸不著邊的看看，大大們手下留情，想一起學習JS的可以給我留言。

// Give the init function the jQuery prototype for later instantiation jQuery.fn.init.prototype = jQuery.fn;

　　看到這里的時候有點迷茫啊。這個fn是啥玩意，百思不得其姐。最后只能找度娘了

jQuery.fn = jQuery.prototype = { init: function( selector, context ) {//….　 //…… };

然后發現，fn就是prototype 文章來源?jquery.fn.extend與jquery.extend

上面的意思其實就是

jQuery.prototype.init.prototype = jQuery.prototype;

往下走

aQuery.prototype = {init: function() {return this;},name: function() {return this} }

明顯實現鏈式的基本條件就是實例this的存在，并且是同一個

換句話說，就是被jQuery的方法處理之后，返回的對象還是處理之前的對象（初學者這么理解會好理解一些）。

extend的實現，我就只把英文翻譯成中文- -，這個能看懂就能看懂，我明天整理了，再后面寫下分析，其實說的已經很詳細了。。

jQuery.extend = jQuery.fn.extend = function() {var src, copyIsArray, copy, name, options, clone,target = arguments[0] || {}, // 常見用法 jQuery.extend( obj1, obj2 )，此時，target為arguments[0]i = 1,length = arguments.length,deep = false;// Handle a deep copy situation//處理深拷貝情況if ( typeof target === "boolean" ) { // 如果第一個參數為true，即 jQuery.extend( true, obj1, obj2 ); 的情況deep = target; // 此時target是truetarget = arguments[1] || {}; // target改為 obj1// skip the boolean and the targeti = 2;}// Handle case when target is a string or something (possible in deep copy)//處理案例時當目標是字符串或者什么其他的東西（可能是在深拷貝中）if ( typeof target !== "object" && !jQuery.isFunction(target) ) { // 處理奇怪的情況，比如 jQuery.extend( 'hello' , {nick: 'casper})~~target = {};}// extend jQuery itself if only one argument is passed//繼承jQuery對象自己，如果它只有一個參數傳遞if ( length === i ) { // 處理這種情況 jQuery.extend(obj)，或 jQuery.fn.extend( obj )target = this; // jQuery.extend時，this指的是jQuery；jQuery.fn.extend時，this指的是jQuery.fn--i;}for ( ; i < length; i++ ) {// Only deal with non-null/undefined values//只處理值 non-null/undefined if ( (options = arguments[ i ]) != null ) { // 比如 jQuery.extend( obj1, obj2, obj3, ojb4 )，options則為 obj2、obj3...// Extend the base object//繼承基礎對象for ( name in options ) {src = target[ name ];copy = options[ name ];// Prevent never-ending loop//防止無休止的循環if ( target === copy ) { // 防止自引用，不贅述continue;}// Recurse if we're merging plain objects or arrays// 如果是深拷貝，且被拷貝的屬性值本身是個對象if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {if ( copyIsArray ) { // 被拷貝的屬性值是個數組copyIsArray = false;clone = src && jQuery.isArray(src) ? src : [];} else { 被拷貝的屬性值是個plainObject，比如{ nick: 'casper' }clone = src && jQuery.isPlainObject(src) ? src : {};}// Never move original objects, clone them//不移動原對象，克隆他們target[ name ] = jQuery.extend( deep, clone, copy ); // 遞歸~// Don't bring in undefined values//不傳undefined值} else if ( copy !== undefined ) { // 淺拷貝，且屬性值不為undefinedtarget[ name ] = copy;}}}}// Return the modified object//返回修改后的對象return target;

下一次有空再看一遍以防忘記。

@北川 老師勿噴

歡迎各位留言互相學習。

恩，能看懂多少看多少把，還有一些，在后面的文章里面會看到。到時候有相關的內容，回頭再看這個。收益會更大

?

轉載于:https://www.cnblogs.com/nunn/p/3511457.html

總結

以上是生活随笔為你收集整理的菜鸟读jQuery 2.0.3 源码分析系列（1）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。