(92-176)
原型定义
jQuery.fn = jQuery.prototype = { // The current version of jQuery being used jquery: version, constructor: jQuery, // Start with an empty selector selector: "", // The default length of a jQuery object is 0 length: 0, toArray: function() { return slice.call( this ); }, // Get the Nth element in the matched element set OR // Get the whole matched element set as a clean array get: function( num ) { return num != null ? // Return just the one element from the set ( num < 0 ? this[ num + this.length ] : this[ num ] ) : // Return all the elements in a clean array slice.call( this ); }, // Take an array of elements and push it onto the stack // (returning the new matched element set) pushStack: function( elems ) { // Build a new jQuery matched element set var ret = jQuery.merge( this.constructor(), elems ); // Add the old object onto the stack (as a reference) ret.prevObject = this; ret.context = this.context; // Return the newly-formed element set return ret; }, // Execute a callback for every element in the matched set. // (You can seed the arguments with an array of args, but this is // only used internally.) each: function( callback, args ) { return jQuery.each( this, callback, args ); }, map: function( callback ) { return this.pushStack( jQuery.map(this, function( elem, i ) { return callback.call( elem, i, elem ); })); }, slice: function() { return this.pushStack( slice.apply( this, arguments ) ); }, first: function() { return this.eq( 0 ); }, last: function() { return this.eq( -1 ); }, eq: function( i ) { var len = this.length, j = +i + ( i < 0 ? len : 0 ); return this.pushStack( j >= 0 && j < len ? [ this[j] ] : [] ); }, end: function() { return this.prevObject || this.constructor(null); }, // For internal use only. // Behaves like an Array's method, not like a jQuery method. push: push, sort: arr.sort, splice: arr.splice };
1. jquery: version 版本信息， constructor: jQuery 原型的构造函数属性修改为函数jQuery，selector: "", 属性存放选择器，length存放jQuery对象的长度，将jQuery对象模仿成数组对象，使得可以像处理数组那样处理jQuery对象。
2.将类数组转化为数组
//模仿出一个类数组对象 var a = { 0: 2, 1: 4, 2: 6,length:3} console.log(Array.prototype.slice.call(a));//[ 2, 4, 6 ]
jQuery对象是一个类数组对象，我们可以用slice将其转化为数组。
3.get方法
var arr = [], slice = arr.slice; //提取出get，这个操作会覆盖原代码中的get jQuery.fn.get = function( num ) { return num != null ? // Return just the one element from the set ( num < 0 ? this[ num + this.length ] : this[ num ] ) : // Return all the elements in a clean array slice.call( this ); } var $div = $('div') //正数和0 //这个情况下与[]访问符效果一样 console.log($div.get(0) === $div[0]) //负数位置 console.log($div.get(-1)) //为空时转化为将对象数组， console.log($div.get())
这里先讲一下三目运算符[con]？[code] ：[code];三目预算符等价于If(){}else(){}。
if( a != null ){ if( a<0 ){ this[ num + this.length ] }else{ this[ num ] } }else{ slice.call( this ) } //等价于 a != null ?( num < 0 ? this[ num + this.length ] : this[ num ] ) :slice.call( this );
相比较，功能一样，代码的量缩小，可读性变差。自己取舍。
在负数情况下，length+index = 元素的位置。
4.jQuery对象栈。
var $ = {0:1,prev: Object.prototype} console.log($[0]) $ = {0:2,prev:$} console.log($[0]) $ = {0:3,prev:$} console.log($[0]) //回溯 $ = $.prev console.log($[0])
在这个例子中，我们通过在新对象中存储对上一对象的引用，可以实现栈式的回溯访问。
jQuery对象在遍历功能中运用了这一原理，在遍历操作后返回的是一个新的jQuery对象，这个新的对象存在对上一对象的引用，以实现链式的回溯访问。
下面来看jQuery中的实现
var slice = [].slice; jQuery.fn.pushStack = function( elems ) { // Build a new jQuery matched element set var ret = jQuery.merge( this.constructor(), elems ); // Add the old object onto the stack (as a reference) ret.prevObject = this; ret.context = this.context; // Return the newly-formed element set return ret; } jQuery.fn.slice = function() { return this.pushStack( slice.apply( this, arguments ) ); } jQuery.merge = function( first, second ) { var len = +second.length, j = 0, i = first.length; for ( ; j < len; j++ ) { first[ i++ ] = second[ j ]; } first.length = i; return first; } jQuery.fn.end = function() { return this.prevObject || this.constructor(null); } console.log($('li').slice(2,4).css('background-color','red').end());
这里pushStack扮演的角色就是设置一个对上个对象引用的属性，因为它不是初始化的jQuery对象，我们还要设置一下它的上下文context， merge 的作用是合并对象设置length。
end 的作用是返回上个对象，当没有这个属性就构造一个空jQuery对象（because constructor: jQuery, line 96）。
总得来说，遍历是为了对当前已存在jQuery对象筛选，采用栈的原因是方便我们在链式调用中回溯，这要比重新构造jQuery对象来得快的多。
5.从代码中可以很清楚的看到jQuery.fn.each实际就是jQuery.each方法第一个参数传入this，因为这个方法在很早很频繁的使用，所以在这里就先来分析。
//simple function isArraylike(obj){ return obj.length - 1 in obj; } // args is for internal usage only jQuery.each = function( obj, callback, args ) { var value, i = 0, length = obj.length, isArray = isArraylike( obj ); if ( args ) { if ( isArray ) { for ( ; i < length; i++ ) { value = callback.apply( obj[ i ], args ); if ( value === false ) { break; } } } else { for ( i in obj ) { value = callback.apply( obj[ i ], args ); if ( value === false ) { break; } } } // A special, fast, case for the most common use of each } else { if ( isArray ) { for ( ; i < length; i++ ) { value = callback.call( obj[ i ], i, obj[ i ] ); if ( value === false ) { break; } } } else { for ( i in obj ) { value = callback.call( obj[ i ], i, obj[ i ] ); if ( value === false ) { break; } } } } return obj; }; var a1 = [1,2,3], a2 = {0:1,1:2,2:3,length:3}, a3 = {a:1,b:2,c:3}; jQuery.each(a1,function(i,el){ console.log(i+':'+el) }) jQuery.each(a2,function(i,el){ console.log(i+':'+el) }) jQuery.each(a3,function(i,el){ console.log(i+':'+el) })
情况分析：
~带参数情况
~数组及类数组情况
~对象情况
~如果返回false则终止遍历
效率分析：
~for in 的效率比for(var i =0;i<arr.length;i++)低很多
~forEach不适用？
这里的 isArray 实际指的是数组和类数组（这也是类数组对象的优点）。一个大的if..else将代码分成两个模块，代码基本一样，作者注释到带参数仅内部使用。先来讨论不带参数的情况。
进行分支，然后当数组类数组时，用for循环遍历， callback.call( obj[ i ], i, obj[ i ] ) ，利用call方法，指定this为当前对象并调用回调函数，后面的参数依次是i位置，objec[i]当前对象。因为有一个false终止遍历功能，用判断然后break;。对象的情况一样，只是循环时采用for in。
回到最初，含有参数时，与不带参数的情况基本一样，但关键处， callback.apply( obj[ i ], args ) 回调函数调用的参数完全不同，这里用的是apply方法。
6.map和each很相似，但map的侧重点是对返回值处理，each是对每个对象执行一个函数。
//因为我们将方法提取出来，很多辅助的方法访问不到，我们重新定义。 var arr = []; concat = arr.concat; function isArraylike( obj ) { var length = obj.length, type = jQuery.type( obj ); if ( type === "function" || jQuery.isWindow( obj ) ) { return false; } if ( obj.nodeType === 1 && length ) { return true; } return type === "array" || length === 0 || typeof length === "number" && length > 0 && ( length - 1 ) in obj; } jQuery.fn.map = function( callback ) { return this.pushStack( jQuery.map(this, function( elem, i ) { return callback.call( elem, i, elem ); })); }; // arg is for internal usage only jQuery.map = function( elems, callback, arg ) { var value, i = 0, length = elems.length, isArray = isArraylike( elems ), ret = []; // Go through the array, translating each of the items to their new values if ( isArray ) { for ( ; i < length; i++ ) { value = callback( elems[ i ], i, arg ); if ( value != null ) { ret.push( value ); } } // Go through every key on the object, } else { for ( i in elems ) { value = callback( elems[ i ], i, arg ); if ( value != null ) { ret.push( value ); } } } // Flatten any nested arrays return concat.apply( [], ret ); }; console.log($(':checkbox').map(function() { return this.id; }).get().join())
情况分析：
~数组及类数组情况
~对象情况
~value不存在
效率分析：
~for in 的效率比for(var i =0;i<arr.length;i++)低很多
情况和each基本一样，关键地方， if ( value != null ) 判断值不存在的情况， this.pushStack 加入堆栈。
这里有一个技巧，因为apply的第二个参数为数组，利用它可以将先前收集的数据数组（方便收集数据）当作数据处理，
var arr = []; concat = arr.concat; var ret = [[1,2],[3,4],5]; console.log([].concat(1,[2,3])) console.log([].concat(ret)) //不能深入合并 console.log(concat.apply([],ret)) //可以
7.slice先前讲过，下面主要来讲eq
eq和get方法类同，区别有两个地方，一个是对不传入参数时及溢出的处理方式，一个是eq的结果将进行pushStack处理
jQuery.fn.eq = function( i ) { var len = this.length, j = +i + ( i < 0 ? len : 0 ); return this.pushStack( j >= 0 && j < len ? [ this[j] ] : [] ); } console.log($('div').eq(0))
因为两个方法判断部分相似，如果不考虑不传入参数及溢出的情况。可以直接调用get方法。
jQuery.fn.eq = function(i){ return this.pushStack([this.get(i)]) } console.log($('div').eq(1))
最后作者存储push，sort，splice数组方法。
