从jquery的each函数我们可以学到什么

1.0版each函数:

1
2
3
4
5
6
7
8
9
function( obj, fn, args ) {
if ( obj.length == undefined )//如果不是数组
for ( var i in obj )
fn.apply( obj[i], args || [i, obj[i]] );
else
for ( var i = 0; i < obj.length; i++ )
fn.apply( obj[i], args || [i, obj[i]] );
return obj;
}

遍历obj对象,直接用fn.apply调用。

1.2.6版each函数:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 function( object, callback, args ) {
var name, i = 0, length = object.length;

if ( args ) {
//对象没有length属性
if ( length == undefined ) {
//通过for in 遍历对象
for ( name in object )
if ( callback.apply( object[ name ], args ) === false )
break;
} else
for ( ; i < length; )
if ( callback.apply( object[ i++ ], args ) === false )
break;

// A special, fast, case for the most common use of each
} else {
if ( length == undefined ) {
for ( name in object )
if ( callback.call( object[ name ], name, object[ name ] ) === false )
break;
} else
for ( var value = object[0];
i < length && callback.call( value, i, value ) !== false; value = object[++i] ){}
}

return object;
}

先看下两个版本代码的区别,首先是函数参数名的调整:fn改为callback,最主要是对第三个参数的调用做修改优化,1.0直接 args || [i,obj[i]],而1.2.6
分开判断 ,在没有args的情况下 用call调用。而且把object.length 先保存在length变量中。

从这两段代码中我们也可以学到写javascript的一些技巧,比如args || [i, obj[i]]这种写法,
args为空直接采用[i,obj[i]]而不用使用if和else来判断。这就像Python工匠里说的在边界处思考

我们再来通过JavaScript 中 apply 、call 的详解来温故下call和apply的区别:

apply 方法传入两个参数:一个是作为函数上下文的对象,另外一个是作为函数参数所组成的数组。
call 方法第一个参数也是作为函数上下文的对象,但是后面传入的是一个参数列表,而不是单个数组。

欢迎关注我的公众号:沉迷Spring
显示 Gitment 评论
0%