Underscore源码解读笔记

2016-09-17

Underscore.js 1.8.3
http://underscorejs.org
(c) 2009-2015 Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors

写在最前

第一次尝试读js源码，以比较简短易读的underscore为开端。水平浅薄，参考了一些大神的解读以加深理解，均以引用形式标出~

源码解读

整体结构

1
2
3

(function() {
    //code
}());

整个函数通过一个立即执行函数实现，起到隔离作用域的目的，这样一方面避免其他代码对该函数内部造成影响，另一方面可以防止全局变量污染全局空间。

BASELINE SETUP部分

原型赋值^[1]

1 2	var ArrayProto = Array.prototype, ObjProto = Object.prototype; var SymbolProto = typeof Symbol !== 'undefined' ? Symbol.prototype : null;

此种赋值方式，使代码便于压缩。原因是原先的代码中假如需要扩展属性，需通过Object.prototype.xxx = ...的方式，则必须保留Object、prototype以供浏览器识别，导致无法压缩。
其中Symbol是ES6中规定的第七种基本类型，用来作为对象属性的标识符。

内部回调函数

Underscore中运用到了大量的回调，因此对其都进行了特殊处理。
首先通过一个optimizeCb函数对传入的函数进行参数判断，用于在重复使用中改变执行函数的作用域，保证上下文的正确性。

var optimizeCb = 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 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为1：只需要传递当前值value，sortedIndex、times函数；
argCount为2：已被省略；
argCount为3：加入当前索引index和集合collection；
argCount为4：又加入累计值accumulator；

另外又通过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);
};

builtinIterate为内置迭代，若用户修改了迭代器_.iteratee，则采用新的迭代器；
若传入null，则返回自身；
若传入函数，则返回该函数的回调处理函数；
若传入对象，则返回是否匹配属性值；
若是其他情况，则返回相应的属性访问器（value是数组?）；

指定函数

createAssigner是underscore中一个重要的内部方法。在三处被调用，分别是

1
2
3

_.extend = createAssigner(_.allKeys);
_.extendOwn = _.assign = createAssigner(_.keys);
_.defaults = createAssigner(_.allKeys, true);

这三个函数用于扩展对象，将对象上的属性拷贝到另一个对象上。
_.extend和_.extendOwn的区别在于分别使用_.allKeys和_keys，即前者拷贝所有属性，后者只拷贝自身属性，在下方createAssigner代码块中的第8行中生效。
_.defaults在此基础上加入参数true，因此在第12行中，只有属性值为undefined时才会进行拷贝，即当出现相同的key时，只取最早出现的属性值。

var createAssigner = function(keysFunc, defaults) {
    return function(obj) {
        var length = arguments.length;
        if(defaults) obj = Object(obj);//?
        if(length < 2 || obj == null) return obj;
        for(var index = 1; index < length; index++) {
            var source = arguments[index],
            keys = keysFunc(source),
            l = keys.length;
            for(var i = 0; i < l; i++) {
                var key = keys[i];
                if(!defaults || obj[key] === void 0) 
                    obj[key] = source[key];
            }
        }
        return obj;
    };
};

Tip: Underscore中采用void 0代替undefined，避免undefined被重写。

剩余参数

Underscore通过restArgs函数，模拟了ES6的剩余参数。首先由startIndex来指定剩余参数的开始位置，若未指定则默认为最后一个参数。之后从指定好的位置开始遍历参数对象，放入rest数组中。最后执行函数调用。

var restArgs = function(func, startIndex) {
    startIndex = startIndex == null ? func.length - 1 : +startIndex;
    return function() {
        var length = Math.max(arguments.length - startIndex, 0),
              rest = Array(length),
             index = 0;
        for(; index < length; index++) {
            rest[index] = arguments[index + startIndex];
        }
        switch (startIndex) {
            case 0: return func.call(this, rest);
            case 1: return func.call(this, arguments[0], rest);
            case 2: return func.call(this, arguments[0], arguments[1], rest);
        }
        var args = Array(startIndex + 1);
        for (index = 0; index < startIndex; index++) {
            args[index] = arguments[index];
        }
        args[startIndex] = rest;
        return func.apply(this, args);
    };
};

COLLECTION FUNCTIONS部分

FUNCTION FUNCTIONS部分

函数节流

如果将水龙头拧紧直到水是以水滴的形式流出，那每隔一段时间，就会有一滴水流出。即预先设定一个执行周期，当调用动作的时刻大于等于执行周期则执行该动作，然后进入下一个新周期。
主要适用场景有鼠标移动mousemove事件和DOM元素动态定位，如window对象的resize/scroll事件。

_.throttle = function(func, wait, options) {
    var context, args, result;
    var timeout = null;
    var previous = 0;
    if (!options) options = {};
    var later = function() {
        previous = options.leading === false ? 0 : _.now();
        timeout = null;
        result = func.apply(context, args);
        if (!timeout) context = args = null;
    };
    return function() {
        var now = _.now();
        if (!previous && options.leading === false) 
            previous = now;
        var remaining = wait - (now - previous); // 剩余时间
        context = this;
        args = arguments;
        // 不光考虑了remaining <= 0，甚至考虑到假如客户端修改了系统时间则马上执行func函数。
        if (remaining <= 0 || remaining > wait) {
            if (timeout) {
                clearTimeout(timeout);
                timeout = null;
            }
            previous = now;
            result = func.apply(context, args);
            if (!timeout) 
                context = args = null;
        } else if (!timeout && options.trailing !== false) {
            // options.trailing=true时，延时执行func函数
            timeout = setTimeout(later, remaining);
        }
        return result;
    };
};

函数去抖

如果用手指一直按住一个弹簧，它将不会弹起直到你松手为止。即空闲时间必须大于或等于一定值的时候，才会执行调用方法。
主要适用场景是文本输入keydown/keyup事件，例如做autocomplete。

_.debounce = function(func, wait, immediate) {
    var timeout, args, context, timestamp, result;
    // 当wait指定的时间间隔期间多次调用 则会不断更新timestamp的值 导致last < wait && last >= 0一直为true 从而不断启动新的计时器延时执行func
    var later = function() {
        var last = _.now() - timestamp;
        
        if (last < wait && last >= 0) {
            timeout = setTimeout(later, wait - last);
        } else {
            timeout = null;
            if (!immediate) {
                result = func.apply(context, args);
                if (!timeout) 
                    context = args = null;
            }
        }
    };
    
    return function() {
        context = this;
        args = arguments;
        timestamp = _.now();
        // 第一次调用且immediate为true时 则直接调用func函数
        var callNow = immediate && !timeout;
        // 在wait指定的时间间隔内首次调用 则启动计时器定时调用func函数
        if (!timeout) timeout = setTimeout(later, wait);
        if (callNow) {
            result = func.apply(context, args);
            context = args = null;
        }
    
        return result;
    };
};

Object Functions部分

createAssigner

var createAssigner = function(keysFunc, defaults) {
    return function(obj) {
        var length = arguments.length;
        if (defaults) obj = Object(obj);
        if (length < 2 || obj == null) return obj;
        for (var index = 1; index < length; index++) {
            var source = arguments[index],
                keys = keysFunc(source),
                l = keys.length;
            for (var i = 0; i < l; i++) {
                var key = keys[i];
                if (!defaults || obj[key] === void 0) obj[key] = source[key];
            }
        }
      return obj;
    };
};

这是一个经典的闭包实现，有三个方法用到了这个内部函数——

_.extend = createAssigner(_.allKeys);
_.extendOwn = _.assign = createAssigner(_.keys);
_.defaults = createAssigner(_.allKeys, true);

这个函数本身很简单，想提及的一方面是除了extend和extendOwn，还专门设置了defaults函数通过一个defaults属性来防止覆盖原有项；另一方面，从代码中就不难发现，这里实现的是一个浅拷贝。因此在使用时我会在扩充一个深拷贝。

深拷贝相比于浅拷贝，它不仅将原对象的各个属性逐个复制出去，而且将原对象各个属性所包含的对象也依次采用深复制的方法递归复制到新对象上。这就不会存在浅拷贝修改属性后指向同一个对象的问题。
来一个简单的深拷贝实现。

var cloneObj = function(obj){
var str, newobj = obj.constructor === Array ? [] : {};
if(typeof obj !== 'object'){
    return;
} else if(window.JSON){
    str = JSON.stringify(obj), //系列化对象
    newobj = JSON.parse(str); //还原
} else {
    for(var i in obj){
        newobj[i] = typeof obj[i] === 'object' ? 
        cloneObj(obj[i]) : obj[i]; 
    }
}
return newobj;
};

参考

知乎专栏 — Underscore源码分析系列

亚里士朱德的博客 — js高手进阶之路:underscore源码经典

GitHub — underscore-1.8.3.js 源码解读