Underscore.js学习

最新推荐文章于 2025-09-04 18:55:33 发布

转载最新推荐文章于 2025-09-04 18:55:33 发布 · 53 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lswit/p/5212427.html

文章标签：

#javascript #ViewUI

本文通过实例解析了Underscore.js中的_.each方法，并详细解释了其参数含义，特别是context的作用，展示了如何通过context改变iteratee函数的上下文。

each_.each(list, iteratee, [context]) 别名： forEach 
遍历list中的所有元素，按顺序用遍历输出每个元素。如果传递了context参数，则把iteratee绑定到context对象上。每次调用iteratee都会传递三个参数：(element, index, list)。如果list是个JavaScript对象，iteratee的参数是 (value, key, list))。返回list以方便链式调用。（注：如果存在原生的forEach方法，Underscore就使用它代替。）

刚开始看到的时候不太理解里面的参数的意思，于是写了段代码测试一下:

_ = require('underscore'); 
var a = [1, 2, 3];
function test(element, index, list) {
    if(list[index] == 2) {
            console.log(element);
            console.log(index);
            console.log(list);
        };
};
_.each(a,test(element, index, list));

/* 输出
2
1
[ 1, 2, 3 ]
第一行是数组中当前迭代到的值，第二行是该值的代码，第三行是这个数组
*/

但是最后的那个[context]还是不理解是什么意思，又改了一下：

_ = require('underscore'); 
var a = [1, 2, 3];
_.each(a,console.log);

/* 输出
1 0 [ 1, 2, 3 ]
2 1 [ 1, 2, 3 ]
3 2 [ 1, 2, 3 ]
*/

看不懂的输出，看到有提到源码，去看源码：

// _.each的源码部分
_.each = _.forEach = function(obj, iteratee, context) {
    if (obj == null) return obj;
    // 涉及到context的地方
    iteratee = createCallback(iteratee, context);
    var i, length = obj.length;
    if (length === +length) {
        for (i = 0; i < length; i++) {
            iteratee(obj[i], i, obj);
        }
    } else {
        var keys = _.keys(obj);
        for (i = 0, length = keys.length; i < length; i++) {
            iteratee(obj[keys[i]], keys[i], obj);
        }
    }
    return obj;
};

于是去看createCallback是什么鬼：

var createCallback = function(func, context, argCount) {
    if (context === void 0) return func;
    switch (argCount == null ? 3 : argCount) {
        case 1:
            return function(value) {
                return func.call(context, value);
            };
        case 2:
            return function(value, other) {
                return func.call(context, value, other);
            };
        case 3:
            return function(value, index, collection) {
                return func.call(context, value, index, collection);
            };
        case 4:
            return function(accumulator, value, index, collection) {
                return func.call(context, accumulator, value, index, collection);
            };
    }
    return function() {
        return func.apply(context, arguments);
    };
};