jQuery中的isPlainObject()实例详解

jquery中的isplainobject() 函数用于判断指定参数是否是一个纯粹的对象,返回值为boolean类型。

“纯粹的对象”,就是通过 { }、new Object()、Object.create(null)  创建的对象。

这个方法的作用是为了跟其他的 JavaScript对象如 null,数组,宿主对象(documents),DOM 等作区分,因为这些用 typeof 都会返回object。

使用

语法:
$.isPlainObject( object )
参数说明:
object:任意类型 需要进行判断的任意值。

$.isPlainObject({});    //true$.isPlainObject(new Object);    //true$.isPlainObject(Object.create(null));    //true$.isPlainObject([]);    //false$.isPlainObject(document);    //false

登录后复制

源码分析

我们来看看jQuery 3.3.1 版本下的源码

var class2type = {};//Object.getPrototypeOf() 方法返回指定对象的原型(内部[[Prototype]]属性的值)。var getProto = Object.getPrototypeOf;//相当于  Object.prototype.toStringvar toString = class2type.toString;//hasOwnProperty() 方法会返回一个布尔值,指示对象自身属性中是否具有指定的属性//相当于 Object.prototype.hasOwnPropertyvar hasOwn = class2type.hasOwnProperty;//因为 hasOwn 是一个函数,所以这里调用的是内置对象 Function 的toString() 方法//相当于  Function.prototype.toStringvar fnToString = hasOwn.toString;//相当于  Function.prototype.toString.call(Object)//就是Object 构造函数 转字符串的结果// ObjectFunctionString 其实就是 "function Object() { [native code] }" 这样的一个字符串var ObjectFunctionString = fnToString.call(Object);function isPlainObject (obj) {  var proto, Ctor;  //先去掉类型不是 Object 的  //也就是用 Object.prototype.toString.call(obj) 这种方式,返回值不是 "[object Object]" 的,比如 数组 window history   if (!obj || toString.call(obj) !== "[object Object]") {    return false;  }  //获取对象原型,赋值给 proto   proto = getProto(obj);  //如果对象没有原型,那也算纯粹的对象,比如用 Object.create(null) 这种方式创建的对象   if (!proto) {    return true;  }  //最后判断是不是通过 "{}" 或 "new Object" 方式创建的对象  //如果 proto 有 constructor属性,Ctor 的值就为 proto.constructor,  //原型的 constructor 属性指向关联的构造函数  Ctor = hasOwn.call(proto, "constructor") && proto.constructor;  //如果 Ctor 类型是  "function" ,并且调用Function.prototype.toString 方法后得到的字符串 与 "function Object() { [native code] }" 这样的字符串相等就返回true  //用来区分 自定义构造函数和 Object 构造函数  return typeof Ctor === "function" && fnToString.call(Ctor) === ObjectFunctionString;}

登录后复制

总结

从源码来看,isPlainObject()方法 的实现,主要分三部分  
1、去掉类型不是Object 的,  
用的是 Object.prototype.toString.call() 方法,这个方法所有类型都会得到不同的字符串,而不是用 typeof,因为 typeof 只能区分基本类型,比如数组,typeof 返回的还是 “object” 字符串

var arr = [];var obj = {};typeof arr;        //"object"typeof obj;        //"object"typeof document;        //"object"Object.prototype.toString.call(arr);        //"[object Array]"Object.prototype.toString.call(obj);        //"[object Object]"Object.prototype.toString.call(document);        //"[object HTMLDocument]"

登录后复制

2、判断对象有没有原型,没有原型的对象算纯粹对象

3、判断是不是通过 “{}” 或 “new Object” 方式创建的对象
这就要判断他们的构造函数了,所以用 Function.prototype.toString 方法

Function 对象覆盖了从 Object 继承来的 Object.prototype.toString 方法。函数的 toString 方法会返回一个表示函数源代码的字符串。具体来说,包括 function关键字,形参列表,大括号,以及函数体中的内容。

function fn(said){    this.say = said;}Function.prototype.toString.call(fn); //"function fn(said){//    this.say = said;//}"Function.prototype.toString.call(Object);//"function Object() { [native code] }"

登录后复制

相关推荐:

jQuery.isPlainObject() 函数使用详解

以上就是jQuery中的isPlainObject()实例详解的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2785544.html

(0)
上一篇 2025年3月8日 17:28:33
下一篇 2025年3月6日 18:06:17

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • js责任链模式详解

    责任链模式指的是——某个请求需要多个对象进行处理,从而避免请求的发送者和接收之间的耦合关系。将这些对象连成一条链子,并沿着这条链子传递该请求,直到有对象处理它为止。 从生活中的例子可以发现,某个请求可能需要几个人的审批,即使技术经理审批完了…

    2025年3月8日
    200
  • 关于Vue.directive()的用法详解

    指令定义函数提供了几个钩子函数(可选): bind: 只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。inserted: 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 docum…

    编程技术 2025年3月8日
    200
  • jquery和vue对比实例分析

    很多人说jquey和vue没有什么可比的,应该和angular,react来比吧,我到觉得他们倒没有多大的可比性,都是基于mvvm思想设计的框架,无非就是实现的方式不一样,在不同场景下性能上会有一些差异。然而从jquery到vue或者说是到…

    2025年3月8日 编程技术
    200
  • iOS与JS交互详解

    这次给大家带来ios与js交互的三个需要注意点的点,ios与js交互的注意事项有哪些,下面给大家举三个经典案列,我们一起来看一下。 1使用CocoaPods导入WebViewJavascriptBridge 这里我们使用最新版本 pod &…

    编程技术 2025年3月8日
    200
  • js中Promise对象实例详解

    假设我现在有个实名验证页面,需要验证身份证号码和真实姓名,实名认证是到公安部系统验证(假设在前端验证),验证通过后我再将当前表单信息保存到提交到我自己后台保存; 方法一 不用promise //外层ajax,校验实名信息$.ajax({  …

    编程技术 2025年3月8日
    200
  • JS插入排序详解

    原理:对整个为排序的数列分为两个部分,一部分是已经排序好的,一部分是没有排序好的,每次都从还未排序好的数列中去除一个数,插入到已经排序好的数列之中,直到未排序的数列为零; * 在排序过程中,一般默认将数列的第一个数作为已经排序好的数列,将剩…

    编程技术 2025年3月8日
    200
  • JS希尔算法的排序详解

    希尔算法在原理上也是一种插入排序,在了解希尔算法之前,必须了解插入排序;前面我们和大家分享了JS插入排序详解,希望本文能帮助到大家。 原理: 希尔排序在插入排序的基础上,将数据进行了分组,将原有的数据分为若干个子集,然后对每个子集进行排序,…

    编程技术 2025年3月8日
    200
  • Immutable.js详解

    这次给大家带来immutable.js详解,使用immutable.js的注意事项有哪些,下面就是实战案例,一起来看一下。 Immutable.js在react + router + redux项目中的应用 先介绍一下Immutable: …

    编程技术 2025年3月8日
    200
  • js的Prototype属性用法详解

    每一个构造函数都有一个属性叫做原型(prototype,下面都不再翻译,使用其原文)。这个属性非常有用:为一个特定类声明通用的变量或者函数。 prototype的定义你不需要显式地声明一个prototype属性,因为在每一个构造函数中都有它…

    2025年3月8日
    200
  • JS原型和原型链详解

    本文主要和大家分享js原型和原型链实例详解,希望能帮助大家对js原型和原型链有一个更清晰的认识。 构造函数(函数名首字母大写):类似一个模版 function Foo(name,age){this.name = name;this.age …

    编程技术 2025年3月8日
    200

发表回复

登录后才能评论