摘要:类似于,但更加健壮和完善。当为一个函数,正常处理。系列系列目录地址。系列预计写八篇左右,重点介绍中的代码架构链式调用内部函数模板引擎等内容,旨在帮助大家阅读源码,以及写出自己的。如果有错误或者不严谨的地方,请务必给予指正,十分感谢。
前言
仅看 cb 和 optimizeCb 两个函数的名字,你可能想不到这是用来做什么的,尽管你可能想到 cb 是 callback 的缩写。
如果直接讲解源码,你可能想不明白为什么要这么写,所以我们从 _.map 函数开始讲起。
_.map_.map 类似于 Array.prototype.map,但更加健壮和完善。我们看下 _.map 的源码:
// 简化过,这里仅假设 obj 是数组 _.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 方法除了传入要处理的数组之外,还有两个参数 iteratee 和 context,类似于 Array.prototype.map 中的其他两个参数,其中 iteratee 表示处理函数,context 表示指定的执行上下文,即 this 的值。
然后在源码中,我们看到,我们将 iteratee 和 context 传入一个 cb 函数,然后覆盖掉 iteratee 函数,然后将这个函数用作最终的处理函数。
实际上,需要这么麻烦吗?不就是使用 iteratee 函数处理每次迭代的值吗?不就是通过 context 指定 this 的值吗?我们可以直接这样写呐:
_.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}))
你看看也没有什么问题呐,可是,万一 iteratee 我们不传入一个函数呢?比如我们什么也不传,或者传入一个对象,又或者传入一个字符串、数字呢?
如果用我们的方法自然是会报错的,那 underscore 呢?
// 使用 underscore // 什么也不传 var result = _.map([1,2,3]); // [1, 2, 3] // 传入一个对象 var result = _.map([{name:"Kevin"}, {name: "Daisy", age: 18}], {name: "Daisy"}); // [false, true] var result = _.map([{name: "Kevin"}, {name: "Daisy"}], "name"); // ["Kevin", "daisy"]
我们会发现,underscore 竟然还能根据传入的值的类型不同,实现的效果不同。我们总结下:
当 iteratee 不传时,返回一个相同的数组。
当 iteratee 为一个函数,正常处理。
当 iteratee 为一个对象,返回元素是否匹配指定的对象。
当 iteratee 为字符串,返回元素对应的属性值的集合。
由此,我们可以推测在 underscore 的 cb 函数中,有对 iteratee 值类型的判断,然后根据不同的类型,返回不同的 iteratee 函数。
cb所以我们来看看 cb 函数的源码:
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 个函数!不要害怕,我们一个一个看。
_.iterateeif (_.iteratee !== builtinIteratee) return _.iteratee(value, context);
我们看看 _.iteratee 的源码:
_.iteratee = builtinIteratee = function(value, context) { return cb(value, context, Infinity); };
因为 _.iteratee = builtinIteratee 的缘故,_.iteratee !== builtinIteratee 值为 false,所以正常情况下 _.iteratee(value, context) 并不会执行。
但是如果我们在外部修改了 _.iteratee 函数,结果便会为 true,cb 函数直接返回 _.iteratee(value, context)。
这个意思其实是说用我们自定义的 _.iteratee 函数来处理 value 和 context。
试想我们并不需要现在 _.map 这么强大的功能,我只希望当 value 是一个函数,就用该函数处理数组元素,如果不是函数,就直接返回当前元素,我们可以这样修改:
underscore map
当然更多的情况是自定义对不同的 value 使用不同的处理函数,值得注意的是,underscore 中的多个函数都是用了 cb 函数,而因为 cb 函数使用了 _.iteratee 函数,如果你修改这个函数,其实会影响多个函数,这些函数基本都属于集合函数,具体包括 map、find、filter、reject、every、some、max、min、sortBy、groupBy、indexBy、countBy、sortedIndex、partition、和 unique。
_.identityif (value == null) return _.identity;
让我们看看 _.identity 的源码:
_.identity = function(value) { return value; };
这也就是为什么当 map 的第二个参数什么都不传的时候,结果会是一个相同数组的原因。
_.map([1,2,3]); // [1, 2, 3]
如果直接看这个函数,可能觉得没有什么用,但用在这里,却又十分的合适。
optimizeCbif (_.isFunction(value)) return optimizeCb(value, context, argCount);
当 value 是一个函数的时候,就传入 optimizeCb 函数,我们来看看 optimizeCb 函数:
var optimizeCb = function(func, context, argCount) { // 如果没有传入 context,就返回 func 函数 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); }; };
也许你会好奇,为什么我要对 argCount 进行判断呢?就不能直接返回吗?比如这样:
var optimizeCb = function(func, context) { // 如果没有传入 context,就返回 func 函数 if (context === void 0) return func; return function() { return func.apply(context, arguments); }; };
当然没有问题,但为什么 underscore 要这样做呢?其实就是为了避免使用 arguments,提高一点性能而已,如果不是写一个库,其实还真是没有必要做到这点。
而为什么当参数是 3 个时候,参数名称分别是 value, index, collection ,又为什么没有参数为 2 的情况呢?其实这都是根据 underscore 函数用到的情况,没有函数用到两个参数,于是就省略了,像 map 函数就会用到 3 个参数,就根据这三个参数的名字起了这里的变量名啦。
_.matcherif (_.isObject(value) && !_.isArray(value)) return _.matcher(value);
这段就是用来处理当 map 的第二个参数是对象的情况:
// 传入一个对象 var result = _.map([{name:"Kevin"}, {name: "Daisy", age: 18}], {name: "Daisy"}); // [false, true]
如果 value 是一个对象,并且不是数组,就使用 _.matcher 函数。看看各个函数的源码:
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 函数可以参考 《JavaScript 专题之手写一个 jQuery 的 extend》 _.matcher = function(attrs) { attrs = _.extend({}, attrs); return function(obj) { return _.isMatch(obj, attrs); }; }; // 该函数判断 attr 对象中的键值是否在 object 中有并且相等 // var stooge = {name: "moe", age: 32}; // _.isMatch(stooge, {age: 32}); => true // 其中 _.keys 相当于 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; };_.property
return _.property(value);
这个就是处理当 value 是基本类型的值的时候,返回元素对应的属性值的情况:
var result = _.map([{name: "Kevin"}, {name: "Daisy"}], "name"); // ["Kevin", "daisy"]
我们看下源码:
_.property = function(path) { // 如果不是数组 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]; }; }; // 根据路径取出深层次的值 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; };
我们好像发现了新大陆,原来 value 还可以传一个数组,用来取深层次的值,举个例子:
var person1 = { child: { nickName: "Kevin" } } var person2 = { child: { nickName: "Daisy" } } var result = _.map([person1, person2], ["child", "nickName"]); console.log(result) // ["Kevin", "daisy"]最后
如果你想学习 underscore 的源码,在分析集合相关的函数时一定会接触 cb 和 optimizeCb 函数,先掌握这两个函数,会帮助你更好更快的解读源码。
underscore 系列underscore 系列目录地址:https://github.com/mqyqingfeng/Blog。
underscore 系列预计写八篇左右,重点介绍 underscore 中的代码架构、链式调用、内部函数、模板引擎等内容,旨在帮助大家阅读源码,以及写出自己的 undercore。
如果有错误或者不严谨的地方,请务必给予指正,十分感谢。如果喜欢或者有所启发,欢迎 star,对作者也是一种鼓励。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/90089.html
摘要:所以它与其他系列的文章并不冲突,完全可以在阅读完这个系列后,再跟着其他系列的文章接着学习。如何阅读我在写系列的时候,被问的最多的问题就是该怎么阅读源码我想简单聊一下自己的思路。感谢大家的阅读和支持,我是冴羽,下个系列再见啦 前言 别名:《underscore 系列 8 篇正式完结!》 介绍 underscore 系列是我写的第三个系列,前两个系列分别是 JavaScript 深入系列、...
摘要:他指示了一个对象的属性,返回的将用来获得该属性对应的值在上面的分析中,我们知道,当传入的是一个函数时,还要经过一个叫的内置函数才能获得最终的所以此处的必然是优化回调的作用了。 开篇说明 对的,让你所见,又开始造轮子了。哈哈,造轮子我们是认真的~ 源码阅读是必须的,Underscore是因为刚刚学习整理了一波函数式编程,加上自己曾经没有太多阅读源码的经验,先拿Underscore练练手,...
摘要:第四个判断如果是对象执行返回一个断言函数,用来判定传入对象是否匹配指定键值属性。都不匹配最后执行,返回传入的对象的属性。设置的值并生成函数,等同于,使具有属性且有值则返回,否则返回,这是一个判断函数。 在第二小章节里面我按照源码顺序介绍几个方法,源码紧接着第一章继续: var builtinIteratee; builtinIteratee,内置的 Iteratee (迭代器)。...
摘要:你可以轻松为你的函数库添加防冲突功能。系列系列目录地址。如果有错误或者不严谨的地方,请务必给予指正,十分感谢。 防冲突 underscore 使用 _ 作为函数的挂载对象,如果页面中已经存在了 _ 对象,underscore 就会覆盖该对象,举个例子: var _ = {value: 1 } // 引入 underscore 后 console.log(_.value); // un...
摘要:在中,真值检测函数的参数被命名为,有断言的意思,非常形象。函数的功能是检测一个对象或数组是否包含指定的某个元素。 顺着underscore源码的顺序读下来,弄懂了之前underscore的基本结构,接下来看看underscore为我们提供的一些关于集合的API。 迭代 关于迭代,我们都知道ES5原生方法也提供了迭代函数供我们使用,而在underscore中的迭代则是对原生的迭代函数进行...
阅读 2948·2021-11-16 11:45
阅读 4981·2021-09-22 10:57
阅读 1701·2021-09-08 09:36
阅读 1559·2021-09-02 15:40
阅读 2475·2021-07-26 23:38
阅读 1165·2019-08-30 15:55
阅读 907·2019-08-30 15:54
阅读 1197·2019-08-29 14:06