详解jQuery中的isPlainObject()使用方法


Posted in jQuery onFebruary 27, 2018

说明

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 版本下的源码:https://github.com/jquery/jquery/blob/ac9e3016645078e1e42120822cfb2076151c8cbe/src/core.js#L236

var class2type = {};

//Object.getPrototypeOf() 方法返回指定对象的原型(内部[[Prototype]]属性的值)。
var getProto = Object.getPrototypeOf;

//相当于 Object.prototype.toString
var toString = class2type.toString;

//hasOwnProperty() 方法会返回一个布尔值,指示对象自身属性中是否具有指定的属性
//相当于 Object.prototype.hasOwnProperty
var hasOwn = class2type.hasOwnProperty;

//因为 hasOwn 是一个函数,所以这里调用的是内置对象 Function 的toString() 方法
//相当于 Function.prototype.toString
var 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;

总结

从源码来看,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 相关文章推荐
HTML5+jQuery实现搜索智能匹配功能
Mar 24 jQuery
jQuery EasyUI tree增加搜索功能的实现方法
Apr 27 jQuery
jQuery插件imgAreaSelect基础讲解
May 26 jQuery
jQuery 表单序列化实例代码
Jun 11 jQuery
jQuery Easyui Treegrid实现显示checkbox功能
Aug 08 jQuery
jQuery插件DataTables分页开发心得体会
Aug 22 jQuery
bootstrap可编辑下拉框jquery.editable-select
Oct 12 jQuery
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
Nov 14 jQuery
jQuery 实现左右两侧菜单添加、移除功能
Jan 02 jQuery
jquery使用FormData实现异步上传文件
Oct 25 jQuery
jquery实现动态创建form并提交的方法示例
May 27 jQuery
jQuery实现高度灵活的表单验证功能示例【无UI】
Apr 30 jQuery
jQuery幻灯片插件owlcarousel参数说明中文文档
Feb 27 #jQuery
jQuery实现碰到边缘反弹的动画效果
Feb 24 #jQuery
jQuery 改变P标签文本值方法
Feb 24 #jQuery
jQuery实现标签子元素的添加和赋值方法
Feb 24 #jQuery
jquery 给动态生成的标签绑定事件的几种方法总结
Feb 24 #jQuery
jquery动态添加带有样式的HTML标签元素方法
Feb 24 #jQuery
jQuery动态添加li标签并添加属性和绑定事件方法
Feb 24 #jQuery
You might like
简单的php文件上传(实例)
2013/10/27 PHP
Laravel框架生命周期与原理分析
2018/06/12 PHP
用Javascript做flash做的事..才完成的一个类.Auntion Action var 0.1
2007/02/23 Javascript
Whatever:hover 无需javascript让IE支持丰富伪类
2010/06/29 Javascript
页面加载完成后再执行JS的jquery写法以及区别说明
2014/02/22 Javascript
分享一个自己动手写的jQuery分页插件
2014/08/28 Javascript
Jquery树插件zTree用法入门教程
2015/02/17 Javascript
javascript制作幻灯片(360度全景图片)
2015/07/28 Javascript
js获取时间精确到秒(年月日)
2016/03/16 Javascript
详解vue嵌套路由-params传递参数
2017/05/23 Javascript
QRCode.js:基于JQuery的生成二维码JS库的使用
2017/06/23 jQuery
十大 Node.js 的 Web 框架(快速提升工作效率)
2017/06/30 Javascript
如何用webpack4带你实现一个vue的打包的项目
2018/06/20 Javascript
tracking.js页面人脸识别插件使用方法
2020/04/16 Javascript
vue组件定义,全局、局部组件,配合模板及动态组件功能示例
2019/03/19 Javascript
[04:03]2014DOTA2西雅图国际邀请赛 LGD战队巡礼
2014/07/07 DOTA
python使用sorted函数对列表进行排序的方法
2015/04/04 Python
Python函数基础实例详解【函数嵌套,命名空间,函数对象,闭包函数等】
2019/03/30 Python
Python Numpy计算各类距离的方法
2019/07/05 Python
wxPython绘图模块wxPyPlot实现数据可视化
2019/11/19 Python
新年福利来一波之Python轻松集齐五福(demo)
2020/01/20 Python
Xadmin+rules实现多选行权限方式(级联效果)
2020/04/07 Python
python和C++共享内存传输图像的示例
2020/10/27 Python
Python基于execjs运行js过程解析
2020/11/27 Python
filter使用python3代码进行迭代元素的实例详解
2020/12/03 Python
HTML5公共页面提取作为公用代码的方法
2020/06/30 HTML / CSS
英国网上香水店:Fragrance Direct
2016/07/20 全球购物
《吃水不忘挖井人》教学反思
2014/04/15 职场文书
土建工程师岗位职责
2014/06/10 职场文书
护士自荐信怎么写
2015/03/06 职场文书
结婚主持人致辞
2015/07/28 职场文书
母亲节感言
2015/08/03 职场文书
教师研修随笔感言
2015/11/18 职场文书
基于Redis过期事件实现订单超时取消
2021/05/08 Redis
Python绘画好看的星空图
2022/03/17 Python
python数字图像处理:图像简单滤波
2022/06/28 Python