欢迎访问我的github:huanshen,有我的源码解析
1、each
跟for循环很像,但是更有用,如果你理解了就知道了。
// 遍历一个数组或者对象 obj 是需要遍历的数组或者对象 callback 是处理数组/对象的每个元素的回调函数,它的返回值实际会中断循环的过程 args 是额外的参数数组 each: function( obj,callback,args ) { var value,i = 0,length = obj.length,isArray = isArraylike( obj ); 如果args存在的话,callback中传入的参数是grgs,each循环次数确是由obj来确定的 if ( args ) { ( isArray ) { for ( ; i < length; i++ ) { value = callback.apply( obj[ i ],args ); if ( value === false ) { break; } } } else { for ( i in obj ) { value =; } } } A special,fast,case for the most common use of each 注意下面用的是call,上面是apply apply 的第二个参数以数组的形式传入,但是真正运行的时候, 传入的数组参数会变成一个个的形式,而不是一个数组参数 } { callback.call( obj[ i ],i,obj[ i ] ); ; } } } } return obj; },
2.makeArray
将类数组对象转化为数组。中间用到了merge函数,具体可见第三个函数,有说明。类数组对象(isArraylike)形如{0:"tt",2:"ccc",length:2};就是属性是数字形式,同时有length属性。
将类数组对象转换为数组对象 此方法为内部方法 makeArray: ( arr,results ) { var ret = results || []; if ( arr != null ) { 如果 arr 是一个类数组对象,调用 merge 合到返回值 ( isArraylike( Object(arr) ) ) { jQuery.merge( ret,typeof arr === "string" ? [ arr ] : arr ); } 如果不是数组,则将其放到返回数组末尾 等同于 ret.push(arr); core_push.call( ret,arr ); } } ret; },
关于中间的Object()可以看看下面的结果(暂时不是很清楚具体的作用):
var str="tttt"],obj={1:0},str2=Object(str); console.log( Object(str)){0: "t",1: "t",2: "t",3: "t",length: 4,[[PrimitiveValue]]: "tttt"} console.log(str2.length)4 console.log(Object(arr1))[1,3] console.log(Object(obj)){1: 0}
3、merge
可以合并两个数组或者类数组对象
把second中的属性添加到first中 second可以是数组或者类数组对象,又或者包含0,1属性的东西 merge: ( first,second ) { var l = second.length,i = first.length,j = 0; if ( typeof l === "number"for ( ; j < l; j++ ) { first[ i++ ] = second[ j ]; } } while ( second[j] !== undefined ) { first[ i++ ] = second[ j++ ]; } } first.length = i; first; },
4、map
功能跟each差不多,但是也有不一样的地方,主要是在处理第三个参数方面。
map: ( elems,arg ) { elems.length,1)"> isArraylike( elems ),ret = Go through the array,translating each of the items to their 如果是数组,isArray=true; 与each传入参数顺序是一致的 ( isArray ) { ) { value = callback( elems[ i ],arg ); if ( value != ) { ret[ ret.length ] = value; } } Go through every key on the object, 如果是对象 } elems ) { value = value; } } } Flatten any nested arrays core_concat.apply( [],ret ); },
5、proxy
proxy(),接受一个函数,然后返回一个新函数,并且这个新函数始终保持了特定的上下文(context )语境。
proxy: ( fn,context ) { tmp,args,proxy; typeof context === "string" ) { tmp = fn[ context ]; context = fn; fn = tmp; } Quick check to determine if target is callable,in the spec this throws a TypeError,but we will just return undefined. if ( !jQuery.isFunction( fn ) ) { undefined; } Simulated bind 如果传入的参数多余2个,把多余的参数转变为数组。 args = core_slice.call( arguments,2 ); proxy = () { 这里用到了柯里化 return fn.apply( context || this Set the guid of unique handler to the same of original handler,so it can be removed proxy.guid = fn.guid = fn.guid || jQuery.guid++ proxy; },
柯里化(Currying)是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数且返回结果的新函数的技术。具体可以看下面这个示例:可以看到前面两个参数并没有输出,最后一个参数和新的参数组成数组输出。在上面就是作为参数传入proxy中
t (l,t,y){ var args = [].slice.call( arguments,1)"> ); console.log(args) t(){ console.log(args.concat([].slice.call( arguments ))); } t; } var tt=t(1,1)">); tt("t");[3,"t"]