underscore源码分析之基础方法

BigNerdCoding 发布于2019-08-22 15:32 / 2465人阅读

摘要：在上篇文章整体架构分析中，我们讲过上面的方法有两种挂载方式，一个是挂载到构造函数上以的形式直接调用在后文上统称构造函数调用，另一种则是挂到上以的形式被实例调用在后文上统称原型调用。

underscore源码分析之基础方法

本文是underscore源码剖析系列的第二篇，主要介绍underscore中一些基础方法的实现。

mixin

在上篇文章underscore整体架构分析中，我们讲过_上面的方法有两种挂载方式，一个是挂载到_构造函数上以_.map(arr)的形式直接调用（在后文上统称构造函数调用），另一种则是挂到_.prototype上以_(arr).map()的形式被实例调用（在后文上统称原型调用）。

翻一遍underscore源码你会发现underscore中的方法都是直接挂到_构造函数上实现的，但是会通过mixin方法来将_上面的方法扩展到_.prototype上面，这样这些方法既可以直接调用，又可以通过实例来调用。

_.mixin = function(obj) {
    // 遍历obj上所有的方法
    _.each(_.functions(obj), function(name) {
        // 保存方法的引用
        var func = _[name] = obj[name];
        _.prototype[name] = function() {
            // 将一开始传入的值放到数组中
            var args = [this._wrapped];
            // 将方法的参数一起push到数组中（这里处理的很好，保证了func方法参数的顺序）
            push.apply(args, arguments);
            // 这里先用apply方法执行了func，并将结果传给了result
            return result(this, func.apply(_, args));
        };
    });
};

_.mixin(_);

从这段代码中我们可以看出，mixin方法将_上的所有方法通过遍历的形式挂载到了_.prototype上面。

细心观察一下，构造函数调用和原型调用的区别在哪里？
没错，区别就在于调用方式和传参，构造函数调用时一般会把要处理的值当做第一个参数传入，而原型调用的时候会把要处理的值传入_构造函数来创建一个实例。

var arr = [1, 2, 3]
var func = function(item) {
    console.log(item);
}
// 构造函数调用时arr被传入第一个参数
_.each(arr, func)
// 原型调用的时候，arr被当做参数传给_方法来创建一个实例
_(arr).each(func)
// 链式调用，和上面类似
_.chain(arr).each(func)

从上一节中我们知道，在创建一个_的实例时，会用this._wrapped将传入的值保存起来，所以在mixin里面这一句：var args = [this._wrapped];是将我们传给_的值放到args数组第一项中，之后再将arguments也放入args数组中，借助apply方法执行当前遍历的方法（在这个例子中是each），这个时候传给each方法的是arr和func，正好和原来直接_.each调用each传入参数的顺序是一样的（underscore中的方法第一项基本上都是要处理的数据）。

链式调用

那么上面最后return result(this, func.apply(_, args))，result又是做什么的呢？

首先来看result源码：

var result = function(instance, obj) {
    // 首先判断是否使用链式调用，如果是，那就继续将刚刚执行后返回的结果链式调用一下，如果不是，则直接返回执行后的结果
    return instance._chain ? _(obj).chain() : obj;
};
_.chain = function(obj) {
    // 创建一个实例
    var instance = _(obj);
    // 给这个实例加个_chain属性来表明这是链式调用
    instance._chain = true;
    return instance;
};

我们知道underscore中也是有和jQuery类似的链式调用，来看一下链式调用的例子：

var arr = [1, 2, 3]
var newArr = _.chain(a).map(function(item) {
    return item + 1
}).filter(function(item) {
    return item > 2
}).value()

链式调用的关键在于每次执行方法后都需要返回一个实例，以确保能够继续调用其他方法。
chain方法会用传入的obj创建一个_的实例，这个实例可以调用原型上的方法。从上面mixin的实现来看，每次调用原型方法后会将执行后的结果传给result方法，在result内部会判断你是否使用了链式调用（chain），如果是链式的，那么就会将返回结果链式化（传入chain中创建新的实例）。
链式调用一定要在结尾执行value方法，不然最后返回的是一个对象（最后一次创建的_实例）

数组函数

underscore构造方法上面并没有直接对push、pop、shift等数组方法进行实现，但是链式调用的时候往往需要用到这些方法，所以在原型上对这些方法做了一些封装，实现方法和mixin类似，这里不再多做解释。

_.each(["pop", "push", "reverse", "shift", "sort", "splice", "unshift"], function(name) {
    var method = ArrayProto[name];
    _.prototype[name] = function() {
    var obj = this._wrapped;
    method.apply(obj, arguments);
    // 这句是好像是为了解决ie上的bug？
    if ((name === "shift" || name === "splice") && obj.length === 0) delete obj[0];
        return result(this, obj);
    };
});

_.each(["concat", "join", "slice"], function(name) {
    var method = ArrayProto[name];
    _.prototype[name] = function() {
        return result(this, method.apply(this._wrapped, arguments));
    };
});

GPU云服务器云服务器 underscore源码分析之基础篇黑客基础之DOS 零基础课程之c语言

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93519.html

underscore源码剖析之整体架构

摘要：我这里有个不够准确但容易理解的说法，就是检查一个对象是否为另一个构造函数的实例，为了更容易理解，下面将全部以是的实例的方式来说。 underscore源码分析之整体架构最近打算好好看看underscore源码，一个是因为自己确实水平不够，另一个是underscore源码比较简单，比较易读。本系列打算对underscore1.8.3中关键函数源码进行分析，希望做到最详细的源码分析。今...

2shou 2019-08-22 15:27 评论0 收藏0
underscore 的源码该如何阅读？

摘要：所以它与其他系列的文章并不冲突，完全可以在阅读完这个系列后，再跟着其他系列的文章接着学习。如何阅读我在写系列的时候，被问的最多的问题就是该怎么阅读源码我想简单聊一下自己的思路。感谢大家的阅读和支持，我是冴羽，下个系列再见啦前言别名：《underscore 系列 8 篇正式完结！》介绍 underscore 系列是我写的第三个系列，前两个系列分别是 JavaScript 深入系列、...

weknow619 2019-08-22 16:00 评论0 收藏0
underscore.js 源码分析之 _.each() 函数

摘要：遍历中的所有元素，按顺序用遍历输出每个元素。如果传递了参数，则把绑定到对象上。返回以方便链式调用。 each _.each(list, iteratee, [context]) Alias: forEach 遍历list中的所有元素，按顺序用遍历输出每个元素。如果传递了context参数，则把iteratee绑定到context对象上。每次调用iteratee都会传递三个参数：(ele...

xbynet 2019-08-20 12:09 评论0 收藏0
underscore源码解读之debounce

摘要：直接来分析返回的匿名函数部分。我第一次调用事件函数是在，按照设定，之后才能调用第二次方法，在这秒内，任何调用都是不执行的。这个难点解决了，其他就都好说。恩，那这个的解读就结束了，有什么地方我没写清楚的话，请给我留言。刚写完一篇debounce(防抖)函数的实现，我又看了下underscore.js的实现方法。算是趁热打铁，分析一下underscore里实现的套路。先贴上源码： _....

Flink_China 2019-08-22 11:14 评论0 收藏0
JavaScript专题系列20篇正式完结！

摘要：写在前面专题系列是我写的第二个系列，第一个系列是深入系列。专题系列自月日发布第一篇文章，到月日发布最后一篇，感谢各位朋友的收藏点赞，鼓励指正。写在前面 JavaScript 专题系列是我写的第二个系列，第一个系列是 JavaScript 深入系列。 JavaScript 专题系列共计 20 篇，主要研究日常开发中一些功能点的实现，比如防抖、节流、去重、类型判断、拷贝、最值、扁平、柯里...

sixleaves 2019-08-21 17:15 评论0 收藏0