摘要：類(lèi)似于，但更加健壯和完善。當(dāng)為一個(gè)函數(shù)，正常處理。系列系列目錄地址。系列預(yù)計(jì)寫(xiě)八篇左右，重點(diǎn)介紹中的代碼架構(gòu)鏈?zhǔn)秸{(diào)用內(nèi)部函數(shù)模板引擎等內(nèi)容，旨在幫助大家閱讀源碼，以及寫(xiě)出自己的。如果有錯(cuò)誤或者不嚴(yán)謹(jǐn)?shù)牡胤?，?qǐng)務(wù)必給予指正，十分感謝。

僅看 cb 和 optimizeCb 兩個(gè)函數(shù)的名字，你可能想不到這是用來(lái)做什么的，盡管你可能想到 cb 是 callback 的縮寫(xiě)。

如果直接講解源碼，你可能想不明白為什么要這么寫(xiě)，所以我們從 _.map 函數(shù)開(kāi)始講起。

_.map 類(lèi)似于 Array.prototype.map，但更加健壯和完善。我們看下 _.map 的源碼：

// 簡(jiǎn)化過(guò)，這里僅假設(shè) obj 是數(shù)組
_.map = function (obj, iteratee, context) {
    iteratee = cb(iteratee, context);

    var length = obj.length, results = Array(length);
    for (var index = 0; index < length; index++) {
        results[index] = iteratee(obj[index], index, obj);
    }

    return results;
};

map 方法除了傳入要處理的數(shù)組之外，還有兩個(gè)參數(shù) iteratee 和 context，類(lèi)似于 Array.prototype.map 中的其他兩個(gè)參數(shù)，其中 iteratee 表示處理函數(shù)，context 表示指定的執(zhí)行上下文，即 this 的值。

然后在源碼中，我們看到，我們將 iteratee 和 context 傳入一個(gè) cb 函數(shù)，然后覆蓋掉 iteratee 函數(shù)，然后將這個(gè)函數(shù)用作最終的處理函數(shù)。

實(shí)際上，需要這么麻煩嗎？不就是使用 iteratee 函數(shù)處理每次迭代的值嗎？不就是通過(guò) context 指定 this 的值嗎？我們可以直接這樣寫(xiě)吶：

_.map = function (obj, iteratee, context) {
    var length = obj.length, results = Array(length);
    for (var index = 0; index < length; index++) {
        results[index] = iteratee.call(context, obj[index], index, obj);
    }
    return results;
};

// [2, 3, 4]
console.log(_.map([1, 2, 3], function(item){
    return item + 1;
})) 

// [2, 3, 4]
console.log(_.map([1, 2, 3], function(item){
    return item + this.value;
}, {value: 1})) 

你看看也沒(méi)有什么問(wèn)題吶，可是，萬(wàn)一 iteratee 我們不傳入一個(gè)函數(shù)呢？比如我們什么也不傳，或者傳入一個(gè)對(duì)象，又或者傳入一個(gè)字符串、數(shù)字呢？

如果用我們的方法自然是會(huì)報(bào)錯(cuò)的，那 underscore 呢？

// 使用 underscore

// 什么也不傳
var result = _.map([1,2,3]); // [1, 2, 3]

// 傳入一個(gè)對(duì)象
var result = _.map([{name:"Kevin"}, {name: "Daisy", age: 18}], {name: "Daisy"}); // [false, true]

var result = _.map([{name: "Kevin"}, {name: "Daisy"}], "name"); // ["Kevin", "daisy"]

我們會(huì)發(fā)現(xiàn)，underscore 竟然還能根據(jù)傳入的值的類(lèi)型不同，實(shí)現(xiàn)的效果不同。我們總結(jié)下：

當(dāng) iteratee 不傳時(shí)，返回一個(gè)相同的數(shù)組。

當(dāng) iteratee 為一個(gè)函數(shù)，正常處理。

當(dāng) iteratee 為一個(gè)對(duì)象，返回元素是否匹配指定的對(duì)象。

當(dāng) iteratee 為字符串，返回元素對(duì)應(yīng)的屬性值的集合。

由此，我們可以推測(cè)在 underscore 的 cb 函數(shù)中，有對(duì) iteratee 值類(lèi)型的判斷，然后根據(jù)不同的類(lèi)型，返回不同的 iteratee 函數(shù)。

所以我們來(lái)看看 cb 函數(shù)的源碼：

var cb = function(value, context, argCount) {
    
    if (_.iteratee !== builtinIteratee) return _.iteratee(value, context);

    if (value == null) return _.identity;

    if (_.isFunction(value)) return optimizeCb(value, context, argCount);

    if (_.isObject(value) && !_.isArray(value)) return _.matcher(value);

    return _.property(value);
};

這一看就牽扯到了 8 個(gè)函數(shù)！不要害怕，我們一個(gè)一個(gè)看。

if (_.iteratee !== builtinIteratee) return _.iteratee(value, context);

我們看看 _.iteratee 的源碼：

_.iteratee = builtinIteratee = function(value, context) {
    return cb(value, context, Infinity);
};

因?yàn)?_.iteratee = builtinIteratee 的緣故，_.iteratee !== builtinIteratee 值為 false，所以正常情況下 _.iteratee(value, context) 并不會(huì)執(zhí)行。

但是如果我們?cè)谕獠啃薷牧?_.iteratee 函數(shù)，結(jié)果便會(huì)為 true，cb 函數(shù)直接返回 _.iteratee(value, context)。

這個(gè)意思其實(shí)是說(shuō)用我們自定義的 _.iteratee 函數(shù)來(lái)處理 value 和 context。

試想我們并不需要現(xiàn)在 _.map 這么強(qiáng)大的功能，我只希望當(dāng) value 是一個(gè)函數(shù)，就用該函數(shù)處理數(shù)組元素，如果不是函數(shù)，就直接返回當(dāng)前元素，我們可以這樣修改：

當(dāng)然更多的情況是自定義對(duì)不同的 value 使用不同的處理函數(shù)，值得注意的是，underscore 中的多個(gè)函數(shù)都是用了 cb 函數(shù)，而因?yàn)?cb 函數(shù)使用了 _.iteratee 函數(shù)，如果你修改這個(gè)函數(shù)，其實(shí)會(huì)影響多個(gè)函數(shù)，這些函數(shù)基本都屬于集合函數(shù)，具體包括 map、find、filter、reject、every、some、max、min、sortBy、groupBy、indexBy、countBy、sortedIndex、partition、和 unique。

if (value == null) return _.identity;

讓我們看看 _.identity 的源碼：

_.identity = function(value) {
    return value;
};

這也就是為什么當(dāng) map 的第二個(gè)參數(shù)什么都不傳的時(shí)候，結(jié)果會(huì)是一個(gè)相同數(shù)組的原因。

_.map([1,2,3]); // [1, 2, 3]

如果直接看這個(gè)函數(shù)，可能覺(jué)得沒(méi)有什么用，但用在這里，卻又十分的合適。

if (_.isFunction(value)) return optimizeCb(value, context, argCount);

當(dāng) value 是一個(gè)函數(shù)的時(shí)候，就傳入 optimizeCb 函數(shù)，我們來(lái)看看 optimizeCb 函數(shù)：

var optimizeCb = function(func, context, argCount) {
    // 如果沒(méi)有傳入 context，就返回 func 函數(shù)
    if (context === void 0) return func;
    switch (argCount) {
        case 1:
            return function(value) {
                return func.call(context, value);
            };
        case null:
        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);
    };
};

也許你會(huì)好奇，為什么我要對(duì) argCount 進(jìn)行判斷呢？就不能直接返回嗎？比如這樣：

var optimizeCb = function(func, context) {
    // 如果沒(méi)有傳入 context，就返回 func 函數(shù)
    if (context === void 0) return func;
    return function() {
        return func.apply(context, arguments);
    };
};

當(dāng)然沒(méi)有問(wèn)題，但為什么 underscore 要這樣做呢？其實(shí)就是為了避免使用 arguments，提高一點(diǎn)性能而已，如果不是寫(xiě)一個(gè)庫(kù)，其實(shí)還真是沒(méi)有必要做到這點(diǎn)。

而為什么當(dāng)參數(shù)是 3 個(gè)時(shí)候，參數(shù)名稱(chēng)分別是 value, index, collection ，又為什么沒(méi)有參數(shù)為 2 的情況呢？其實(shí)這都是根據(jù) underscore 函數(shù)用到的情況，沒(méi)有函數(shù)用到兩個(gè)參數(shù)，于是就省略了，像 map 函數(shù)就會(huì)用到 3 個(gè)參數(shù)，就根據(jù)這三個(gè)參數(shù)的名字起了這里的變量名啦。

if (_.isObject(value) && !_.isArray(value)) return _.matcher(value);

這段就是用來(lái)處理當(dāng) map 的第二個(gè)參數(shù)是對(duì)象的情況：

// 傳入一個(gè)對(duì)象
var result = _.map([{name:"Kevin"}, {name: "Daisy", age: 18}], {name: "Daisy"}); // [false, true]

如果 value 是一個(gè)對(duì)象，并且不是數(shù)組，就使用 _.matcher 函數(shù)?？纯锤鱾€(gè)函數(shù)的源碼：

var nativeIsArray = Array.isArray;

_.isArray = nativeIsArray || function(obj) {
    return Object.prototype.toString.call(obj) === "[object Array]";
};

_.isObject = function(obj) {
    var type = typeof obj;
    return type === "function" || type === "object" && !!obj;
};


// extend 函數(shù)可以參考 《JavaScript 專(zhuān)題之手寫(xiě)一個(gè) jQuery 的 extend》
_.matcher = function(attrs) {
    attrs = _.extend({}, attrs);
    return function(obj) {
      return _.isMatch(obj, attrs);
    };
};

// 該函數(shù)判斷 attr 對(duì)象中的鍵值是否在 object 中有并且相等

// var stooge = {name: "moe", age: 32};
// _.isMatch(stooge, {age: 32}); => true

// 其中 _.keys 相當(dāng)于 Object.keys
_.isMatch = function(object, attrs) {
    var keys = _.keys(attrs), length = keys.length;
    if (object == null) return !length;
    var obj = Object(object);
    for (var i = 0; i < length; i++) {
        var key = keys[i];
        if (attrs[key] !== obj[key] || !(key in obj)) return false;
    }
    return true;
};

return _.property(value);

這個(gè)就是處理當(dāng) value 是基本類(lèi)型的值的時(shí)候，返回元素對(duì)應(yīng)的屬性值的情況：

var result = _.map([{name: "Kevin"}, {name: "Daisy"}], "name"); // ["Kevin", "daisy"]

我們看下源碼：

_.property = function(path) {
    // 如果不是數(shù)組
    if (!_.isArray(path)) {
      return shallowProperty(path);
    }
    return function(obj) {
        return deepGet(obj, path);
    };
};

var shallowProperty = function(key) {
    return function(obj) {
        return obj == null ? void 0 : obj[key];
    };
};

// 根據(jù)路徑取出深層次的值
var deepGet = function(obj, path) {
    var length = path.length;
    for (var i = 0; i < length; i++) {
        if (obj == null) return void 0;
        obj = obj[path[i]];
    }
    return length ? obj : void 0;
};

我們好像發(fā)現(xiàn)了新大陸，原來(lái) value 還可以傳一個(gè)數(shù)組，用來(lái)取深層次的值，舉個(gè)例子：

var person1 = {
    child: {
        nickName: "Kevin"
    }
}

var person2 = {
    child: {
        nickName: "Daisy"
    }
}

var result = _.map([person1, person2], ["child", "nickName"]); 
console.log(result) // ["Kevin", "daisy"]

如果你想學(xué)習(xí) underscore 的源碼，在分析集合相關(guān)的函數(shù)時(shí)一定會(huì)接觸 cb 和 optimizeCb 函數(shù)，先掌握這兩個(gè)函數(shù)，會(huì)幫助你更好更快的解讀源碼。

underscore 系列目錄地址：https://github.com/mqyqingfeng/Blog。

underscore 系列預(yù)計(jì)寫(xiě)八篇左右，重點(diǎn)介紹 underscore 中的代碼架構(gòu)、鏈?zhǔn)秸{(diào)用、內(nèi)部函數(shù)、模板引擎等內(nèi)容，旨在幫助大家閱讀源碼，以及寫(xiě)出自己的 undercore。

如果有錯(cuò)誤或者不嚴(yán)謹(jǐn)?shù)牡胤?，?qǐng)務(wù)必給予指正，十分感謝。如果喜歡或者有所啟發(fā)，歡迎 star，對(duì)作者也是一種鼓勵(lì)。