當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

学习 lodash 源码整体架构，打造属于自己的函数式编程类库

發布時間：2023/12/9 编程问答 23 豆豆

生活随笔收集整理的這篇文章主要介紹了学习 lodash 源码整体架构，打造属于自己的函数式编程类库小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

前言

這是?學習源碼整體架構系列第三篇。整體架構這詞語好像有點大，姑且就算是源碼整體結構吧，主要就是學習是代碼整體結構，不深究其他不是主線的具體函數的實現。文章學習的是打包整合后的代碼，不是實際倉庫中的拆分的代碼。

上上篇文章寫了?jQuery源碼整體架構，學習 jQuery 源碼整體架構，打造屬于自己的 js 類庫

上一篇文章寫了?underscore源碼整體架構，學習 underscore 源碼整體架構，打造屬于自己的函數式編程類庫

感興趣的讀者可以點擊閱讀。

underscore源碼分析的文章比較多，而?lodash源碼分析的文章比較少。原因之一可能是由于?lodash源碼行數太多。注釋加起來一萬多行。

分析?lodash整體代碼結構的文章比較少，筆者利用谷歌、必應、?github等搜索都沒有找到，可能是找的方式不對。于是打算自己寫一篇。平常開發大多數人都會使用?lodash，而且都或多或少知道，?lodash比?underscore性能好，性能好的主要原因是使用了惰性求值這一特性。

本文章學習的?lodash的版本是：?v4.17.15。?unpkg.com地址 https://unpkg.com/lodash@4.17.15/lodash.js

文章篇幅可能比較長，可以先收藏再看。

導讀：

文章主要學習了?runInContext()?導出?_?lodash函數使用?baseCreate方法原型繼承?LodashWrapper和?LazyWrapper，?mixin掛載方法到?lodash.prototype、后文用結合例子解釋?lodash.prototype.value(wrapperValue)和?Lazy.prototype.value(lazyValue)惰性求值的源碼具體實現。

匿名函數執行

;(function() { }.call(this));

暴露 lodash

var _ = runInContext();

runInContext 函數

這里的簡版源碼，只關注函數入口和返回值。

var runInContext = (function runInContext(context) {// 瀏覽器中處理context為window// ...function lodash(value) {}{// ...return new LodashWrapper(value);}// ...return lodash; });

可以看到申明了一個?runInContext函數。里面有一個?lodash函數，最后處理返回這個?lodash函數。

再看?lodash函數中的返回值?newLodashWrapper(value)。

LodashWrapper 函數

function LodashWrapper(value, chainAll) {this.__wrapped__ = value;this.__actions__ = [];this.__chain__ = !!chainAll;this.__index__ = 0;this.__values__ = undefined; }

設置了這些屬性：

__wrapped__：存放參數?value。

__actions__：存放待執行的函數體?func，函數參數?args，函數執行的?this?指向?thisArg。

__chain__、?undefined兩次取反轉成布爾值?false，不支持鏈式調用。和?underscore一樣，默認是不支持鏈式調用的。

__index__：索引值默認 0。

__values__：主要?clone時使用。

接著往下搜索源碼，?LodashWrapper，會發現這兩行代碼。

LodashWrapper.prototype = baseCreate(baseLodash.prototype); LodashWrapper.prototype.constructor = LodashWrapper;

接著往上找?baseCreate、baseLodash這兩個函數。

baseCreate 原型繼承

// 立即執行匿名函數 // 返回一個函數，用于設置原型可以理解為是 __proto__ var baseCreate = (function() {// 這句放在函數外，是為了不用每次調用baseCreate都重復申明 object// underscore 源碼中，把這句放在開頭就申明了一個空函數 `Ctor`function object() {}return function(proto) {// 如果傳入的參數不是object也不是function 是null// 則返回空對象。if (!isObject(proto)) {return {};}// 如果支持Object.create方法，則返回 Object.createif (objectCreate) {// Object.createreturn objectCreate(proto);}// 如果不支持Object.create 用 ployfill newobject.prototype = proto;var result = new object;// 還原 prototypeobject.prototype = undefined;return result;}; }()); // 空函數 function baseLodash() {// No operation performed. } // Ensure wrappers are instances of `baseLodash`. lodash.prototype = baseLodash.prototype; // 為什么會有這一句？因為上一句把lodash.prototype.construtor 設置為Object了。這一句修正constructor lodash.prototype.constructor = lodash; LodashWrapper.prototype = baseCreate(baseLodash.prototype); LodashWrapper.prototype.constructor = LodashWrapper;

筆者畫了一張圖，表示這個關系。?

衍生的 isObject 函數

判斷?typeofvalue不等于?null，并且是?object或者?function。

function isObject(value) {var type = typeof value;return value != null && (type == 'object' || type == 'function'); }

Object.create() 用法舉例

面試官問：能否模擬實現JS的new操作符?之前這篇文章寫過的一段。

筆者之前整理的一篇文章中也有講過，可以翻看JavaScript 對象所有API解析

MDN Object.create()

Object.create(proto,[propertiesObject])?方法創建一個新對象，使用現有的對象來提供新創建的對象的proto。它接收兩個參數，不過第二個可選參數是屬性描述符（不常用，默認是?undefined）。

對于不支持?ES5的瀏覽器，?MDN上提供了?ployfill方案。

if (typeof Object.create !== "function") {Object.create = function (proto, propertiesObject) {if (typeof proto !== 'object' && typeof proto !== 'function') {throw new TypeError('Object prototype may only be an Object: ' + proto);} else if (proto === null) {throw new Error("This browser's implementation of Object.create is a shim and doesn't support 'null' as the first argument.");}if (typeof propertiesObject != 'undefined') throw new Error("This browser's implementation of Object.create is a shim and doesn't support a second argument.");function F() {}F.prototype = proto;return new F();}; }

lodash上有很多方法和屬性，但在?lodash.prototype也有很多與?lodash上相同的方法。肯定不是在?lodash.prototype上重新寫一遍。而是通過?mixin掛載的。

mixin

mixin 具體用法

_.mixin([object=lodash], source, [options={}])

添加來源對象自身的所有可枚舉函數屬性到目標對象。如果 object 是個函數，那么函數方法將被添加到原型鏈上。

注意: 使用 _.runInContext 來創建原始的 lodash 函數來避免修改造成的沖突。

添加版本

0.1.0

參數

[object=lodash] (Function|Object): 目標對象。

source (Object): 來源對象。

[options={}] (Object): 選項對象。

[options.chain=true] (boolean): 是否開啟鏈式操作。

(*): 返回 object.

mixin 源碼

mixin源碼，后文注釋解析

接下來先看衍生的函數。

其實看到具體定義的函數代碼就大概知道這個函數的功能。為了不影響主線，導致文章篇幅過長。具體源碼在這里就不展開。

感興趣的讀者可以自行看這些函數衍生的其他函數的源碼。

mixin 衍生的函數 keys

在?mixin?函數中其實最終調用的就是?Object.keys

function keys(object) {return isArrayLike(object) ? arrayLikeKeys(object) : baseKeys(object); }

mixin 衍生的函數 baseFunctions

返回函數數組集合

function baseFunctions(object, props) {return arrayFilter(props, function(key) {return isFunction(object[key]);}); }

mixin 衍生的函數 isFunction

判斷參數是否是函數

function isFunction(value) {if (!isObject(value)) {return false;}// The use of `Object#toString` avoids issues with the `typeof` operator// in Safari 9 which returns 'object' for typed arrays and other constructors.var tag = baseGetTag(value);return tag == funcTag || tag == genTag || tag == asyncTag || tag == proxyTag; }

mixin 衍生的函數 arrayEach

類似 [].forEarch

function arrayEach(array, iteratee) {var index = -1,length = array == null ? 0 : array.length;while (++index < length) {if (iteratee(array[index], index, array) === false) {break;}}return array; }

mixin 衍生的函數 arrayPush

類似 [].push

function arrayPush(array, values) {var index = -1,length = values.length,offset = array.length;while (++index < length) {array[offset + index] = values[index];}return array; }

mixin 衍生的函數 copyArray

拷貝數組

function copyArray(source, array) {var index = -1,length = source.length;array || (array = Array(length));while (++index < length) {array[index] = source[index];}return array; }

mixin 源碼解析

lodash?源碼中兩次調用?mixin

// Add methods that return wrapped values in chain sequences. lodash.after = after; // code ... 等 153 個支持鏈式調用的方法 // Add methods to `lodash.prototype`. // 把lodash上的靜態方法賦值到 lodash.prototype 上 mixin(lodash, lodash); // Add methods that return unwrapped values in chain sequences. lodash.add = add; // code ... 等 152 個不支持鏈式調用的方法 // 這里其實就是過濾 after 等支持鏈式調用的方法，獲取到 lodash 上的 add 等添加到lodash.prototype 上。 mixin(lodash, (function() {var source = {};// baseForOwn 這里其實就是遍歷lodash上的靜態方法，執行回調函數baseForOwn(lodash, function(func, methodName) {// 第一次 mixin 調用了所以賦值到了lodash.prototype// 所以這里用 Object.hasOwnProperty 排除不在lodash.prototype 上的方法。也就是 add 等 152 個不支持鏈式調用的方法。if (!hasOwnProperty.call(lodash.prototype, methodName)) {source[methodName] = func;}});return source; // 最后一個參數options 特意注明不支持鏈式調用 }()), { 'chain': false });

結合兩次調用?mixin?代入到源碼解析如下 mixin源碼及注釋

小結：簡單說就是把?lodash上的靜態方法賦值到?lodash.prototype上。分兩次第一次是支持鏈式調用（?lodash.after等?153個支持鏈式調用的方法），第二次是不支持鏈式調用的方法（?lodash.add等?152個不支持鏈式調用的方法）。

lodash 究竟在和.prototype掛載了多少方法和屬性

再來看下?lodash究竟掛載在?_函數對象上有多少靜態方法和屬性，和掛載?_.prototype上有多少方法和屬性。

使用?forin循環一試便知。看如下代碼：

其實就是上文提及的?lodash.after?等?153個支持鏈式調用的函數、?lodash.add?等?152不支持鏈式調用的函數賦值而來。

相比?lodash上的靜態方法多了?12個，說明除了?mixin?外，還有?12個其他形式賦值而來。

支持鏈式調用的方法最后返回是實例對象，獲取最后的處理的結果值，最后需要調用?value方法。

筆者畫了一張表示?lodash的方法和屬性掛載關系圖。

請出貫穿下文的簡單的例子

var result = _.chain([1, 2, 3, 4, 5]) .map(el => {console.log(el); // 1, 2, 3return el + 1; }) .take(3) .value(); // lodash中這里的`map`僅執行了`3`次。 // 具體功能也很簡單數組 1-5 加一，最后獲取其中三個值。 console.log('result:', result);

也就是說這里?lodash聰明的知道了最后需要幾個值，就執行幾次?map循環，對于很大的數組，提升性能很有幫助。
而?underscore執行這段代碼其中?map執行了5次。如果是平常實現該功能也簡單。

var result = [1, 2, 3, 4, 5].map(el => el + 1).slice(0, 3); console.log('result:', result);

而相比?lodash這里的?map執行了?5次。

// 不使用 map、slice var result = []; var arr = [1, 2, 3, 4, 5]; for (var i = 0; i < 3; i++){result[i] = arr[i] + 1; } console.log(result, 'result');

簡單說這里的?map方法，添加?LazyWrapper?的方法到?lodash.prototype存儲下來，最后調用?value時再調用。具體看下文源碼實現。

添加?LazyWrapper?的方法到?lodash.prototype

主要是如下方法添加到到?lodash.prototype?原型上。

// "constructor" ["drop", "dropRight", "take", "takeRight", "filter", "map", "takeWhile", "head", "last", "initial", "tail", "compact", "find", "findLast", "invokeMap", "reject", "slice", "takeRightWhile", "toArray", "clone", "reverse", "value"]

具體源碼及注釋

// Add `LazyWrapper` methods to `lodash.prototype`. // baseForOwn 這里其實就是遍歷LazyWrapper.prototype上的方法，執行回調函數 baseForOwn(LazyWrapper.prototype, function(func, methodName) {// 檢測函數名稱是否是迭代器也就是循環var checkIteratee = /^(?:filter|find|map|reject)|While$/.test(methodName),// 檢測函數名稱是否head和last// 順便提一下 ()這個是捕獲分組而加上 ?: 則是非捕獲分組也就是說不用于其他操作isTaker = /^(?:head|last)$/.test(methodName),// lodashFunc 是根據 isTaker 組合 takeRight take methodNamelodashFunc = lodash[isTaker ? ('take' + (methodName == 'last' ? 'Right' : '')) : methodName],// 根據isTaker 和是 find 判斷結果是否包裝retUnwrapped = isTaker || /^find/.test(methodName);// 如果不存在這個函數，就不往下執行if (!lodashFunc) {return;}// 把 lodash.prototype 方法賦值到lodash.prototypelodash.prototype[methodName] = function() {// 取實例中的__wrapped__ 值例子中則是 [1,2,3,4,5]var value = this.__wrapped__,// 如果是head和last 方法 isTaker 返回 [1], 否則是arguments對象args = isTaker ? [1] : arguments,// 如果value 是LayeWrapper的實例isLazy = value instanceof LazyWrapper,// 迭代器循環iteratee = args[0],// 使用useLazy isLazy value或者是數組useLazy = isLazy || isArray(value);var interceptor = function(value) {// 函數執行 value args 組合成數組參數var result = lodashFunc.apply(lodash, arrayPush([value], args));// 如果是 head 和 last (isTaker) 支持鏈式調用返回結果的第一個參數否則返回resultreturn (isTaker && chainAll) ? result[0] : result;};// useLazy true 并且函數checkIteratee 且迭代器是函數，且迭代器參數個數不等于1if (useLazy && checkIteratee && typeof iteratee == 'function' && iteratee.length != 1) {// Avoid lazy use if the iteratee has a "length" value other than `1`.// useLazy 賦值為 false// isLazy 賦值為 falseisLazy = useLazy = false;}// 取實例上的 __chain__var chainAll = this.__chain__,// 存儲的待執行的函數 __actions__ 二次取反是布爾值也就是等于0或者大于0兩種結果isHybrid = !!this.__actions__.length,// 是否不包裝用結果是否不包裝且不支持鏈式調用isUnwrapped = retUnwrapped && !chainAll,// 是否僅Lazy 用isLazy 和存儲的函數onlyLazy = isLazy && !isHybrid;// 結果不包裝且 useLazy 為 trueif (!retUnwrapped && useLazy) {// 實例 new LazyWrapper 這里的this 是 new LodashWrapper()value = onlyLazy ? value : new LazyWrapper(this);// result 執行函數結果var result = func.apply(value, args);/**// _.thru(value, interceptor)// 這個方法類似 _.tap，除了它返回 interceptor 的返回結果。該方法的目的是"傳遞" 值到一個方法鏈序列以取代中間結果。_([1, 2, 3]).tap(function(array) {// 改變傳入的數組array.pop();}).reverse().value();// => [2, 1]*/// thisArg 指向undefined 或者null 非嚴格模式下是指向window，嚴格模式是undefined 或者nllresult.__actions__.push({ 'func': thru, 'args': [interceptor], 'thisArg': undefined });// 返回實例 lodashWrapperreturn new LodashWrapper(result, chainAll);}// 不包裝且 onlyLazy 為 trueif (isUnwrapped && onlyLazy) {// 執行函數return func.apply(this, args);}// 上面都沒有執行，執行到這里了// 執行 thru 函數，回調函數是 interceptorresult = this.thru(interceptor);return isUnwrapped ? (isTaker ? result.value()[0] : result.value()) : result;}; });

小結一下，寫了這么多注釋，簡單說：其實就是用?LazyWrapper.prototype?改寫原先在?lodash.prototype的函數，判斷函數是否需要使用惰性求值，需要時再調用。

讀者可以斷點調試一下，善用斷點進入函數功能，對著注釋看，可能會更加清晰。

斷點調試的部分截圖

鏈式調用最后都是返回實例對象，實際的處理數據的函數都沒有調用，而是被存儲存儲下來了，最后調用?value方法，才執行這些函數。

lodash.prototype.value 即 wrapperValue

如果是惰性求值，則調用的是?LazyWrapper.prototype.value?即?lazyValue。

LazyWrapper.prototype.value 即 lazyValue 惰性求值

lazyValue源碼及注釋

筆者畫了一張?lodash和?LazyWrapper的關系圖來表示。?

小結：?lazyValue簡單說實現的功能就是把之前記錄的需要執行幾次，把記錄存儲的函數執行幾次，不會有多少項數據就執行多少次，而是根據需要幾項，執行幾項。也就是說以下這個例子中，?map函數只會執行?3次。如果沒有用惰性求值，那么?map函數會執行?5次。

var result = _.chain([1, 2, 3, 4, 5]) .map(el => el + 1) .take(3) .value();

總結

行文至此，基本接近尾聲，最后總結一下。

分享一個只知道函數名找源碼定位函數申明位置的?VSCode?技巧：?Ctrl+p。輸入?@functionName?定位函數?functionName在源碼文件中的具體位置。如果知道調用位置，那直接按?alt+鼠標左鍵即可跳轉到函數申明的位置。

如果讀者發現有不妥或可改善之處，再或者哪里沒寫明白的地方，歡迎評論指出。另外覺得寫得不錯，對您有些許幫助，可以點贊、評論、轉發分享，也是對筆者的一種支持。萬分感謝。

總結

以上是生活随笔為你收集整理的学习 lodash 源码整体架构，打造属于自己的函数式编程类库的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： ubuntu下使用锐捷客户端连接校园网-
下一篇： react（91）--debugger