Lodash源码阅读-baseIsNative

功能概述

baseIsNative 函数是 Lodash 中的一个内部工具函数，主要用于检测一个函数是否为原生函数（即由 JavaScript 引擎内置的函数）。它是 _.isNative 方法的核心实现，通过巧妙的源码分析和正则匹配，能够准确区分原生函数和自定义函数。

前置学习

在深入理解 baseIsNative 之前，建议先了解以下相关函数：

isObject：检查值是否为对象类型（包括函数），是 baseIsNative 的第一层过滤
isMasked：检查函数是否被 core-js 等库修改过，防止误判被 polyfill 的函数
toSource：获取函数的源码字符串表示，用于后续的正则匹配
reIsNative：动态生成的正则表达式，用于匹配原生函数的特征
reIsHostCtor：用于匹配宿主对象构造函数的正则表达式

源码实现

js 复制代码

function baseIsNative(value) {
  if (!isObject(value) || isMasked(value)) {
    return false;
  }
  var pattern = isFunction(value) ? reIsNative : reIsHostCtor;
  return pattern.test(toSource(value));
}

实现原理解析

原理概述

baseIsNative 函数通过三步策略来检测原生函数：

首先进行基础类型过滤，确保值是对象类型且未被 core-js 等库修改
然后根据值是否为函数选择合适的正则表达式模式
最后通过正则表达式测试函数的源码字符串，查找原生函数的特征标记 [native code]

这种多层次的检测策略确保了在各种环境下都能准确识别原生函数。

代码解析

1. 基础类型过滤

js 复制代码

if (!isObject(value) || isMasked(value)) {
  return false;
}

这一步进行了两个重要的检查：

!isObject(value)：确保值是对象类型（包括函数）
isMasked(value)：检查函数是否被 core-js 等库修改过

这两个检查确保了：

只有对象类型的值会进入下一步检测
被 polyfill 库修改过的函数会被排除

示例：

js 复制代码

// 非对象类型直接返回 false
baseIsNative(null); // false
baseIsNative(42); // false
baseIsNative("string"); // false

// 被 core-js 修改过的函数返回 false
// 假设在使用了 babel-polyfill 的环境中
baseIsNative(Array.prototype.includes); // false（被 polyfill 修改过）

2. 选择正则表达式模式

js 复制代码

var pattern = isFunction(value) ? reIsNative : reIsHostCtor;

根据值是否为函数类型，选择不同的正则表达式模式：

reIsNative：用于检测普通原生函数，如 Array.prototype.push
reIsHostCtor：用于检测宿主对象构造函数，如 HTMLElement

示例：

js 复制代码

// 对于函数类型，使用 reIsNative 模式
isFunction(Array.prototype.push); // true
var pattern1 = isFunction(Array.prototype.push) ? reIsNative : reIsHostCtor;
// pattern1 === reIsNative

// 对于非函数类型的对象，使用 reIsHostCtor 模式
isFunction(document.body); // false（在浏览器环境中）
var pattern2 = isFunction(document.body) ? reIsNative : reIsHostCtor;
// pattern2 === reIsHostCtor

3. reIsHostCtor 正则表达式

js 复制代码

var reIsHostCtor = /^\[object .+?Constructor\]$/;

reIsHostCtor 是一个相对简单的正则表达式，用于匹配宿主对象构造函数的字符串表示：

^ 和 $：表示匹配整个字符串的开始和结束
\[object：匹配字符串开头的 "[object "
.+?：非贪婪匹配任意字符，表示对象的类型名称
Constructor\]：匹配字符串结尾的 "Constructor]"

这个正则表达式主要用于匹配宿主对象构造函数（如浏览器环境中的 DOM 构造函数）的 toString() 结果。在某些浏览器中，宿主对象构造函数的字符串表示形式为 "[object XXXConstructor]"。

示例：

js 复制代码

// 在某些浏览器环境中
Object.prototype.toString.call(HTMLDivElement);
// 可能返回: "[object HTMLDivElementConstructor]"

reIsHostCtor.test("[object HTMLDivElementConstructor]"); // true
reIsHostCtor.test("[object Function]"); // false

4. 为什么需要 reIsHostCtor 正则表达式？

reIsHostCtor 正则表达式解决了一个特殊的问题：在某些浏览器环境中，宿主对象（如 DOM 元素的构造函数）的字符串表示与普通函数不同。

4.1 宿主对象的特殊性

宿主对象是由宿主环境（如浏览器）提供的对象，而不是 JavaScript 引擎本身提供的。这些对象在不同浏览器中可能有不同的实现方式，导致它们的字符串表示也不同。

在某些浏览器中，当你尝试获取宿主对象构造函数的字符串表示时，你会得到类似 "[object HTMLDivElementConstructor]" 的结果，而不是普通函数的 "function HTMLDivElement() { [native code] }" 形式。

4.2 实际应用场景

检测 DOM 构造函数

js 复制代码

// 在某些旧版浏览器中
typeof HTMLDivElement; // 可能返回 "object" 而不是 "function"
Object.prototype.toString.call(HTMLDivElement); // "[object HTMLDivElementConstructor]"

// 使用 reIsHostCtor 检测
reIsHostCtor.test(Object.prototype.toString.call(HTMLDivElement)); // true

区分宿主对象构造函数和普通对象

js 复制代码

function isHostConstructor(obj) {
  return reIsHostCtor.test(Object.prototype.toString.call(obj));
}

// 在某些浏览器环境中
isHostConstructor(HTMLDivElement); // true
isHostConstructor(Object); // false（返回 "[object Function]"）
isHostConstructor({}); // false（返回 "[object Object]"）

处理跨浏览器兼容性问题

js 复制代码

// baseIsNative 函数中的应用
var pattern = isFunction(value) ? reIsNative : reIsHostCtor;

// 这行代码的含义是：
// - 如果 value 是函数类型，使用 reIsNative 检测它是否是原生函数
// - 如果 value 不是函数类型（但可能是宿主构造函数），使用 reIsHostCtor 检测

4.3 浏览器兼容性考虑

这种设计主要针对旧版浏览器（如 IE8 及更早版本）中的宿主对象。在现代浏览器中，大多数宿主对象构造函数都被实现为标准的函数对象，因此会通过 reIsNative 而不是 reIsHostCtor 进行检测。

然而，Lodash 保留了这种双重检测机制，以确保在各种浏览器环境中都能正确识别原生函数和宿主构造函数。这是 Lodash 广泛兼容性的一个体现。

5. 测试函数源码

js 复制代码

return pattern.test(toSource(value));

最后一步是使用选定的正则表达式模式测试函数的源码字符串：

通过 toSource(value) 获取函数的源码字符串
使用 pattern.test() 方法检查源码是否匹配原生函数的特征

示例：

js 复制代码

// 原生函数测试
baseIsNative(Array.prototype.push); // true
baseIsNative(Object.prototype.toString); // true
baseIsNative(Function.prototype.bind); // true

// 自定义函数测试
baseIsNative(function () {}); // false
baseIsNative(function custom() {
  return 42;
}); // false
baseIsNative(lodash.map); // false（Lodash 的方法不是原生的）

注意事项

1. 无法可靠检测被 polyfill 修改的函数

当使用 babel-polyfill 或其他 polyfill 库时，这些库会修改原生函数或添加新函数，使旧浏览器支持新特性。这些修改会给函数添加特殊标记，使 baseIsNative 无法识别它们是否真的是原生的。

js 复制代码

// 假设浏览器原生支持 Array.from
console.log(Array.from.toString()); // "function from() { [native code] }"
baseIsNative(Array.from); // true

// 安装 babel-polyfill 后
// babel-polyfill 会替换 Array.from，即使浏览器原生支持它
console.log(Array.from.toString()); // 可能显示 polyfill 的实现代码
baseIsNative(Array.from); // false，尽管浏览器本来支持它

这会导致一个问题：即使浏览器原生支持某个功能，baseIsNative 也可能错误地认为它不是原生的，因为 polyfill 已经替换了它。

2. 函数包装导致的误判

许多框架和开发工具会"包装"原生函数以添加额外功能。例如，一个调试工具可能会包装 console.log 来添加时间戳或其他信息：

js 复制代码

// 原始的 console.log
const originalLog = console.log;

// 包装后的 console.log
console.log = function (...args) {
  const timestamp = new Date().toISOString();
  return originalLog.call(console, `[${timestamp}]`, ...args);
};

// 现在 console.log 不再是原生函数
console.log("测试"); // 输出: [2023-05-20T12:34:56.789Z] 测试
baseIsNative(console.log); // false，因为它现在是一个自定义包装函数

这种包装会改变函数的源代码，使 baseIsNative 无法识别它原本是原生函数。这在开发环境中特别常见，可能导致依赖原生函数检测的代码出现意外行为。

3. 不同 JavaScript 引擎的差异

不同的 JavaScript 引擎（如 Chrome 的 V8、Firefox 的 SpiderMonkey）可能对原生函数有不同的字符串表示。baseIsNative 通过动态生成正则表达式来解决这个问题，但仍然可能在某些非常特殊的环境中出现误判。

总结

baseIsNative 函数通过巧妙的类型检查和源码分析，实现了对原生函数的准确识别。它的主要特点是：

多层次检测：先进行类型过滤，再检查是否被修改，最后分析源码
环境适应性：通过动态生成正则表达式，适应不同 JavaScript 引擎
防篡改机制：能够识别被 polyfill 库修改过的函数
高精确度：通过源码特征匹配，准确区分原生函数和自定义函数

这个函数是 Lodash 类型检测系统中的重要组成部分，为 _.isNative 方法提供了核心实现。