【underscore.js 源码解读】常用类型判断以及一些有用的工具方法

tanglijun 发布于2019-08-19 18:22 / 1155人阅读

摘要：最近开始看源码，并将源码解读放在了我的计划中。今天就跟大家聊一聊中一些常用类型检查方法，以及一些工具类的判断方法。用是否含有属性来判断工具类判断方法接下来看下一些常用的工具类判断方法。

Why underscore

最近开始看 underscore.js 源码，并将 underscore.js 源码解读放在了我的 2016 计划中。

阅读一些著名框架类库的源码，就好像和一个个大师对话，你会学到很多。为什么是 underscore？最主要的原因是 underscore 简短精悍（约 1.5k 行），封装了 100 多个有用的方法，耦合度低，非常适合逐个方法阅读，适合楼主这样的 JavaScript 初学者。从中，你不仅可以学到用 void 0 代替 undefined 避免 undefined 被重写等一些小技巧，也可以学到变量类型判断、函数节流&函数去抖等常用的方法，还可以学到很多浏览器兼容的 hack，更可以学到作者的整体设计思路以及 API 设计的原理（向后兼容）。

之后楼主会写一系列的文章跟大家分享在源码阅读中学习到的知识。

underscore-1.8.3 源码全文注释 https://github.com/hanzichi/underscore-analysis/blob/master/underscore-1.8.3.js/underscore-1.8.3-analysis.js

underscore-1.8.3 源码解读项目地址 https://github.com/hanzichi/underscore-analysis

underscore-1.8.3 源码解读系列文章 https://github.com/hanzichi/underscore-analysis/issues

欢迎围观~ （如果有兴趣，欢迎 star & watch~）您的关注是楼主继续写作的动力

类型判断

第一篇跟大家简单地聊了下为什么 underscore.js 用 void 0 代替了 undefined，意外地收到了不错的反响，有朋友私信我说以前还真不知道这回事，也有人催促我赶紧继续下一篇解读文章。今天就跟大家聊一聊 underscore.js 中一些 JavaScript 常用类型检查方法，以及一些工具类的判断方法。

我们先说个老生常谈的问题，JavaScript 中数组类型的判断方法，事实上，我在 Javascript中判断数组的正确姿势一文中已经详细分析了各种判断方式的优缺点，并给出了正确的判断代码：

function isArray(a) {
  Array.isArray ? Array.isArray(a) : Object.prototype.toString.call(a) === "[object Array]";
}

而 underscore 其实也正是这么做的：

// Is a given value an array?
// Delegates to ECMA5"s native Array.isArray
// 判断是否为数组
_.isArray = nativeIsArray || function(obj) {
  return toString.call(obj) === "[object Array]";
};

nativeIsArray 正是 ES5 中 Array.isArray 方法，如果支持则优先调用；而 toString 变量就保存了 Object.prototype.toString。

如何判断对象？underscore 把类型为 function 和 object 的变量都算作对象，当然得除去 null。

// Is a given variable an object?
// 判断是否为对象
// 这里的对象包括 function 和 object
_.isObject = function(obj) {
  var type = typeof obj;
  return type === "function" || type === "object" && !!obj;
};

再看 "Arguments", "Function", "String", "Number", "Date", "RegExp", "Error" 这些类型的判断，其实都可以用 Object.prototype.toString.call 来判断，所以写在了一起：

// Add some isType methods: isArguments, isFunction, isString, isNumber, isDate, isRegExp, isError.
// 其他类型判断
_.each(["Arguments", "Function", "String", "Number", "Date", "RegExp", "Error"], function(name) {
  _["is" + name] = function(obj) {
    return toString.call(obj) === "[object " + name + "]";
  };
});

但是看 isArguments 方法，在 IE < 9 下对 arguments 调用 Object.prototype.toString.call，结果是 [object Object]，而并非我们期望的 [object Arguments]。咋整？我们可以用该元素是否含有 callee 属性来判断，众所周时，arguments.callee 能返回当前 arguments 所在的函数。

// Define a fallback version of the method in browsers (ahem, IE < 9), where
// there isn"t any inspectable "Arguments" type.
// _.isArguments 方法在 IE < 9 下的兼容
// IE < 9 下对 arguments 调用 Object.prototype.toString.call 方法
// 结果是 [object Object]
// 而并非我们期望的 [object Arguments]。
// so 用是否含有 callee 属性来判断
if (!_.isArguments(arguments)) {
  _.isArguments = function(obj) {
    return _.has(obj, "callee");
  };
}

工具类判断方法

接下来看下一些常用的工具类判断方法。

判断一个元素是否是 DOM 元素，非常简单，只需要保证它不为空，且 nodeType 属性为 1:

// Is a given value a DOM element?
// 判断是否为 DOM 元素
_.isElement = function(obj) {
  // 确保 obj 不是 null 
  // 并且 obj.nodeType === 1
  return !!(obj && obj.nodeType === 1);
};

如何判断一个元素为 NaN？NaN 其实是属于 Number 类型，Object.prototype.toString.call(NaN) 返回的是 "[object Number]"，而且 NaN 不等于本身，利用这两点即可进行判断：

// Is the given value `NaN`? (NaN is the only number which does not equal itself).
// 判断是否是 NaN
// NaN 是唯一的一个 `自己不等于自己` 的 number 类型
_.isNaN = function(obj) {
  return _.isNumber(obj) && obj !== +obj;
};

当然，underscore 还有很多其他的有用的工具类判断方法，具体可以看源码 https://github.com/hanzichi/underscore-analysis/blob/master/underscore-1.8.3.js/src/underscore-1.8.3.js#L1192-L1263 这部分。

如果您觉得我分享的东西对您有所帮助，请关注我的 Repo https://github.com/hanzichi/underscore-analysis

混合云专线服务 linux的一些常用命令数据分析的一些方法源码解读 jquery常用的方法

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

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

源码解读这半年

摘要：作者韩子迟不知不觉间，源码解读系列进入了真正的尾声，也请允许我最后一次下项目的原始地址这半年以来，花费了大量的业余时间，共计写了篇随笔包括此文，也给的源码加了差不多行注释，对于当初说的要做史上最详细的源码剖析，至此我也觉得问心无愧。作者：韩子迟 What? 不知不觉间，「Underscore 源码解读系列」进入了真正的尾声，也请允许我最后一次 po 下项目的原始地址 https://...

zzzmh 2019-08-21 14:42 评论0 收藏0
【underscore 源码解读】JavaScript 中如何判断两个元素是否 "相同&q

摘要：最近开始看源码，并将源码解读放在了我的计划中。后文中均假设比较的两个参数为和。，如果和均是类型或者类型，我们可以用来判断是否。 Why underscore 最近开始看 underscore.js 源码，并将 underscore.js 源码解读放在了我的 2016 计划中。阅读一些著名框架类库的源码，就好像和一个个大师对话，你会学到很多。为什么是 underscore？最主要的原...

yhaolpz 2019-08-19 18:24 评论0 收藏0
【underscore 源码解读】Object Functions 相关源码拾遗 & 小结

摘要：直接来看例子一目了然，第一个参数是对象，第二个参数可以是一系列的值，也可以是数组数组中含，也可以是迭代函数，我们根据值，或者迭代函数来过滤中的键值对，返回新的对象副本。 Why underscore 最近开始看 underscore.js 源码，并将 underscore.js 源码解读放在了我的 2016 计划中。阅读一些著名框架类库的源码，就好像和一个个大师对话，你会学到很多。...

neuSnail 2019-08-19 18:25 评论0 收藏0
【underscore.js 源码解读】for ... in 存在的浏览器兼容问题你造吗

摘要：最近开始看源码，并将源码解读放在了我的计划中。像和使用内置构造函数所创建的对象都会继承自和的不可枚举属性，例如的方法或者的方法。循环将迭代对象的所有可枚举属性和从它的构造函数的继承而来的包括被覆盖的内建属性。 Why underscore 最近开始看 underscore.js 源码，并将 underscore.js 源码解读放在了我的 2016 计划中。阅读一些著名框架类库的源码...

Pikachu 2019-08-19 18:23 评论0 收藏0
JavaScript 数组展开以及 underscore 重要的内部方法 flatten 详解

摘要：今天要讲的是数组展开以及和数组展开息息相关的一个重要的内部方法。也是个布尔值，当为并且也为时，能过滤参数元素中的非数组元素。首先并不需要对数组深度展开，其次传入的是数组，对于非数组元素可以直接忽略。 Why underscore （觉得这一段眼熟的童鞋可以直接跳到正文了...）最近开始看 underscore.js 源码，并将 underscore.js 源码解读放在了我的 201...

binaryTree 2019-08-21 10:53 评论0 收藏0