underscore.js 源码分析5 基础函数和each函数的使用

isArrayLike 检测是数组对象还是纯数组

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

    var getLength = property(‘length‘);

    var isArrayLike = function(collection) {
        var length = getLength(collection);
        return typeof length == ‘number‘ && length >= 0 && length <= MAX_ARRAY_INDEX;
    };

从下往上看  isArrayLike -> getLength -> property

property是个闭包

简化后:

getLength 返回的是一个函数

var getLength =  function(obj){
    return obj[‘length‘];
 }

当调用

// collection = [1,2,3]

var length = getLength(collection);

    var isArrayLike = function(collection) {
       //  var length = [1,2,3][‘length‘];
        var length = getLength(collection);
        return typeof length == ‘number‘ && length >= 0 && length <= MAX_ARRAY_INDEX;
    };

T5.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Underscore</title>
<script src="underscore.js"></script>
</head>
<body>
</body>
</html>

<script type="text/javascript" src="T5.js"></script>

T5.js

_.each([1, 2, 3], alert);

执行过程

1.  接着就进入了optimizeCb函数。

  // obj = [1,2,3], iteratee = alert(), context = undefined
 _.each = _.forEach = function(obj, iteratee, context) {
    iteratee = optimizeCb(iteratee, context);
    var i, length;
    if (isArrayLike(obj)) {
      for (i = 0, length = obj.length; i < length; i++) {
        iteratee(obj[i], i, obj);
      }
    } else {
      var keys = _.keys(obj);
      for (i = 0, length = keys.length; i < length; i++) {
        iteratee(obj[keys[i]], keys[i], obj);
      }
    }
    return obj;
  };

2. optimizeCb 函数

  // Internal function that returns an efficient (for current engines) version
  // of the passed-in callback, to be repeatedly applied in other Underscore
  // functions.
  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);
      };
      // The 2-parameter case has been omitted only because no current consumers
      // made use of it.
      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 = underfined。switch中的条件都不满足。

等于就直接执行了

    return function() {
      return func.apply(context, arguments);
    };

3.  isArrayLike 上面已分析过

  var isArrayLike = function(collection) {
    var length = getLength(collection);
    return typeof length == ‘number‘ && length >= 0 && length <= MAX_ARRAY_INDEX;
  };

返回true

4.

// 接着执行each中的
    if (isArrayLike(obj)) {
      for (i = 0, length = obj.length; i < length; i++) {
        iteratee(obj[i], i, obj);
      }
    }

Tips:

1.   context === void 0 判断context是否为undefined。具体解释

				
时间: 2024-10-22 10:38:49

underscore.js 源码分析5 基础函数和each函数的使用的相关文章

underscore.js源码解析

一直想针对一个框架的源码好好的学习一下编程思想和技巧,提高一下自己的水平,但是看过一些框架的源码,都感觉看的莫名其妙,看不太懂,最后找到这个underscore.js由于这个比较简短,一千多行,而且读起来容易一些,所以就决定是它了,那废话不多说开始我们的源码学习. underscore.js源码GitHub地址: https://github.com/jashkenas/underscore/blob/master/underscore.js 本文解析的underscore.js版本是1.8.3

underscore.js源码解析(二)

前几天我对underscore.js的整体结构做了分析,今天我将针对underscore封装的方法进行具体的分析,代码的一些解释都写在了注释里,那么废话不多说进入今天的正文. 没看过上一篇的可以猛戳这里:underscore.js源码解析(一) underscore.js源码GitHub地址: https://github.com/jashkenas/underscore/blob/master/underscore.js 本文解析的underscore.js版本是1.8.3 _.each 1

underscore.js源码研究(8)

概述 很早就想研究underscore源码了,虽然underscore.js这个库有些过时了,但是我还是想学习一下库的架构,函数式编程以及常用方法的编写这些方面的内容,又恰好没什么其它要研究的了,所以就了结研究underscore源码这一心愿吧. underscore.js源码研究(1) underscore.js源码研究(2) underscore.js源码研究(3) underscore.js源码研究(4) underscore.js源码研究(5) underscore.js源码研究(6)

MyVoix2.0.js 源码分析 WebSpeech与WebAudio篇

楔 子 随着移动互联网时代的开启,各种移动设备走进了我们的生活.无论是日常生活中人手一部的手机,还是夜跑者必备的各种智能腕带,亦或者是充满未来科技感的google glass云云,它们正渐渐改变着我们的生活习惯以及用户交互习惯.触摸屏取代了实体按键,Siri开始慢慢释放我们的双手,而leap motion之类的硬件更是让我们彻底不需要接触IT设备便能通过手势控制它们.在这样的大背景下,前端的交互将涉及越来越多元的交叉学科,我们正如十几年前人们经历Css的诞生一样,见证着一场带动整个行业乃至社会的

underscore.js源码阅读(2)

??今天看了下underscore中的restArgs函数和createAssigner函数 123456789101112131415161718192021222324252627 //(http://ariya.ofilabs.com/2013/03/es6-and-rest-parameter.html)// This accumulates the arguments passed into an array, after a given index.// 和ES6中的rest特性相似

jqueryui.position.js源码分析

最近要写前端组件了,狂砍各种组件源码,这里分析一款jqueryui中的posistion插件,注意,它不是jqueryui widget,首先看下源码总体结构图 1.看到$.fn.position 是不是很熟悉?嗯,就是将position方法挂载到原型上,然后控件就可以直接调用了, 2.$.ui.position 这个对象是,用来进行冲突判断的,什么冲突?就是元素与父容器所拥有的空间以及当前可用窗口的控件,默认情形下,如果冲突则采用反转方向的方式显示:对这一点不要惊讶,一切都是为了正常显示而用的

axios.js 源码分析

axios.js 源码分析 axios.js --> Axios.js --> InterceptorManager.js --> dispatchRequest.js --> transformData.js --> adapters axios 为什么可以在浏览器和服务器上同时运行? 答:因为axios使用了适配器模式,在node中引入http模块请求,在浏览器中使用xhr对象进行请求 axios 如何实现请求和相应的修改 答:通过一个拦截器(InterceptorMan

Backbone.js源码分析(珍藏版)

源码分析珍藏,方便下次阅读! // Backbone.js 0.9.2 // (c) 2010-2012 Jeremy Ashkenas, DocumentCloud Inc. // Backbone may be freely distributed under the MIT license. // For all details and documentation: // http://backbonejs.org (function () { // 创建一个全局对象, 在浏览器中表示为w

Vue 2.0 深入源码分析(五) 基础篇 methods属性详解

用法 methods中定义了Vue实例的方法,官网是这样介绍的: 例如:: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script> <title>Document&