超越Jquery_01_isPlainObject分析与重构

超越Jquery_01_isPlainObject分析与重构

1. isPlainObject函数分析

isPlainObject函数用于判断传入的对象是否为纯粹的JavaScript对象。具体实现如下:

function isPlainObject(obj) {
  var proto, Ctor;

  // 剔除null和非对象类型
  if (!obj || {}.toString.call(obj) !== "[object Object]") {
    return false;
  }

  proto = Object.getPrototypeOf(obj);

  // 没有原型的对象为纯粹的JavaScript对象
  if (!proto) {
    return true;
  }

  // 构造函数的原型为Object的实例
  Ctor = {}.hasOwnProperty.call(proto, "constructor") && proto.constructor;
  return typeof Ctor === "function" && {}.toString.call(Ctor) === {}.toString.call(Object);
}
  • 首先判断传参是否为null或者非对象类型,如果是则返回false;
  • 然后获取对象的原型对象。
  • 没有原型对象的是普通对象(遵循ECMAScript规范),将其视为纯粹对象;
  • 通过对象原型判断对象是否通过自定义构造函数生成,如果是则从构造函数原型上查询是否存在Object构造函数,此时这个对象就被视为纯粹JS对象返回true。

2. isPlainObject函数存在的问题

虽然isPlainObject函数能够比较准确地判断传入的对象是否为纯粹JavaScript对象,但是它并没有完美的解决问题:

  1. 不支持对空对象进行判断
  2. 对于DOM节点和window对象也会认为其是普通对象
  3. 还有通过自定义函数生成的对象,如果该函数的原型链上存在Object构造函数,也会被识别为纯粹JavaScript对象,但并非如此。

3. isPlainObject函数重构

下面的代码能够对isPlainObject函数进行完美的重构:

function isPlainObject(obj) {
    // 判断是否为对象类型
    if (!obj || typeof obj !== 'object' || obj.nodeType || obj.window === obj) {
        return false;
    }

    // 是否拥有Object原型链上的isPrototypeOf属性
    if (obj.constructor && !Object.prototype.hasOwnProperty.call(obj.constructor.prototype, 'isPrototypeOf')) {
        return false;
    }

    return true;
}
  • 首先,判断是否为非null的对象类型或者非window的全局对象;
  • 如果是DOM节点或全局window对象,则返回false;
  • 如果是自定义构造函数生成的对象,则无法通过Object.prototype去验证其是否具有isPrototypeOf属性,也返回false;
  • 如果存在isPrototypeOf属性,则一定为纯粹对象。

4. 示例说明

例如,在以下的情况下,isPlainObject函数就会存在不准确的情况:

// 定义一个自定义构造函数
function Person(name, age) {
  this.name = name;
  this.age = age;
}

// 调用自定义构造函数创建对象
var person1 = new Person('张三', 18);
var isPureObject1 = $.isPlainObject(person1); // 这里将被识别为纯粹对象,因为Person的原型链上存在Object构造函数

// 如下的情况则不会被题识别为纯粹对象,因为obj定义即为空对象
var obj = {};
var isPureObject2 = $.isPlainObject(obj); // 这里也会被误认为不是纯粹对象。

最终,通过isPlainObject函数重构,能够避免以上两种情况的误判。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:超越Jquery_01_isPlainObject分析与重构 - Python技术站

(0)
上一篇 2023年6月11日
下一篇 2023年6月11日

相关文章

  • 《JavaScript高级程序设计》阅读笔记(二) ECMAScript中的原始类型

    《JavaScript高级程序设计》阅读笔记(二) ECMAScript中的原始类型 原始类型 ECMAScript 中有 6 种原始类型:Undefined、Null、Boolean、Number、String 和 Symbol。这些数据类型都是通过值来标识的。原始类型的值是不可更改的。 Undefined 和 Null Undefined 和 Null …

    JavaScript 2023年5月27日
    00
  • 浅谈Javascript事件对象

    浅谈Javascript事件对象 Javascript 事件机制是Web开发中非常重要的一部分,它让我们可以对用户的操作、浏览器状态、浏览器错误等行为做出响应。在Javascript事件机制中,每一个事件都会生成一个事件对象,这个事件对象记录了事件的发生情况以及相关的数据。本文将由浅入深详细讲解Javascript事件对象。 事件对象概述 事件对象是指在某个…

    JavaScript 2023年5月27日
    00
  • Json文件格式化方法详解

    Json文件格式化方法详解 什么是Json? Json(JavaScript Object Notation)是一种轻量级的数据交换格式,它基于JavaScript语言的子集,采用完全独立于编程语言的文本格式来存储和表示数据。Json由于具有简洁和易读的特点,得到了越来越广泛的应用。 Json文件格式化方法详解 在实际的开发中,有时候我们需要处理包含大量数据…

    JavaScript 2023年6月11日
    00
  • js关于getImageData跨域问题的解决方法

    关于getImageData跨域问题的解决方法相信很多前端开发者都会遇到,在此我将提供两条解决方案供大家参考。 解决方案一:使用CORS解决跨域 CORS是跨域资源共享,它是HTML5加入的新特性,相比其他解决跨域问题的方式而言更为简单便捷,同样也能很好地解决getImageData的跨域问题。 具体的实现需要服务端配合,在服务端的响应头中设置Access-…

    JavaScript 2023年6月11日
    00
  • JS实现简单路由器功能的方法

    接下来我将详细讲解“JS实现简单路由器功能的方法”的攻略: 什么是路由器 路由器是互联网信息传递的关键设备之一,它负责完成数据的转发、路由选择等功能,是数码家庭不可或缺的设备之一。 在网页开发中,我们可以通过实现一个简单的路由器,来实现单页应用,实现页面的跳转和状态的管理等功能。 实现简单路由器功能的方法 使用Hash实现 我们可以通过URL的Hash值来实…

    JavaScript 2023年5月19日
    00
  • JS 作用域与作用域链详解

    当我们使用 JavaScript 编写代码时,经常会遇到变量作用域的问题,这个时候就需要了解 JavaScript 的作用域与作用域链。了解 JavaScript 的作用域与作用域链,可以帮助我们更好地理解 JavaScript 代码运行的流程,从而提高编程效率和代码质量。 一、作用域 1.1 什么是作用域 作用域是指变量和函数的可访问范围。JavaScri…

    JavaScript 2023年6月10日
    00
  • php IIS日志分析搜索引擎爬虫记录程序第1/2页

    下面是PHP IIS日志分析搜索引擎爬虫记录程序第1/2页的完整攻略,包含以下几个步骤: 1. 配置IIS日志文件 在进行日志分析前,我们需要在IIS上配置日志文件,以记录用户访问网站的详细信息。可以按照以下步骤进行配置: 打开IIS管理器,在左侧面板中选择您要配置的站点,然后点击“logging”选项卡。 在日志文件目录下新建一个文件夹,用于存放日志文件。…

    JavaScript 2023年5月28日
    00
  • JS 页面内容搜索,类似于 Ctrl+F功能的实现代码

    实现类似于 Ctrl+F 功能的 JS 页面内容搜索,需要基于两个核心 API:window.find() 和 window.getSelection()。 window.find() window.find() 方法用于在当前页面中查找指定的字符串,并返回一个布尔值表示是否检索到该字符串。该方法可以接收三个参数,依次为: 要查找的字符串 是否区分大小写(可…

    JavaScript 2023年5月19日
    00
合作推广
合作推广
分享本页
返回顶部