详解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 相关文章推荐
基于jQuery和CSS3实现APPLE TV海报视差效果
Jun 16 jQuery
判断jQuery是否加载完成,没完成继续判断的解决方法
Dec 06 jQuery
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
May 09 jQuery
jQuery插件Validation表单验证详解
May 26 jQuery
jQuery基于闭包实现的显示与隐藏div功能示例
Jun 09 jQuery
jQuery实现的模仿雨滴下落动画效果
Dec 11 jQuery
使用jQuery如何写一个含验证码的登录界面
May 13 jQuery
jquery多级树形下拉菜单的实例代码
Jul 09 jQuery
jquery实现掷骰子小游戏
Oct 24 jQuery
jQuery实现验证用户登录
Dec 10 jQuery
jQuery ajax - getScript() 方法和getJSON方法
May 14 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
一个目录遍历函数
2006/10/09 PHP
PHP新手上路(五)
2006/10/09 PHP
PHP 最大运行时间 max_execution_time修改方法
2010/03/08 PHP
11个PHPer必须要了解的编程规范
2014/09/22 PHP
PHP安全下载文件的方法
2016/04/07 PHP
详解PHP防止直接访问.php 文件的实现方法
2017/07/28 PHP
PHP精确到毫秒秒杀倒计时实例详解
2019/03/14 PHP
JavaScript 原型学习总结
2010/10/29 Javascript
jQuery.get、jQuery.getJSON、jQuery.post无法返回JSON问题的解决方法
2011/07/28 Javascript
JS的replace方法介绍
2012/10/20 Javascript
JavaScript的React框架中的JSX语法学习入门教程
2016/03/05 Javascript
JS/jquery实现一个网页内同时调用多个倒计时的方法
2017/04/27 jQuery
微信小程序之获取当前位置经纬度以及地图显示详解
2017/05/09 Javascript
Vue组件通信实践记录(推荐)
2017/08/15 Javascript
vue单页缓存方案分析及实现
2018/09/25 Javascript
详解vantUI框架在vue项目中的应用踩坑
2018/12/06 Javascript
element-ui表格合并span-method的实现方法
2019/05/21 Javascript
Vue-cli assets SubDirectory及PublicPath区别详解
2020/08/18 Javascript
[01:06:43]完美世界DOTA2联赛PWL S3 PXG vs GXR 第二场 12.19
2020/12/24 DOTA
Python抓取框架Scrapy爬虫入门:页面提取
2017/12/01 Python
Python实现PS滤镜碎片特效功能示例
2018/01/24 Python
Python序列对象与String类型内置方法详解
2019/10/22 Python
python实现提取str字符串/json中多级目录下的某个值
2020/02/27 Python
浅谈python3 构造函数和析构函数
2020/03/12 Python
Python MOCK SERVER moco模拟接口测试过程解析
2020/04/13 Python
完美解决Pycharm中matplotlib画图中文乱码问题
2021/01/11 Python
CSS3 animation ? steps 函数详解
2019/08/30 HTML / CSS
CSS 3.0文字悬停跳动特效代码
2020/10/26 HTML / CSS
财务部岗位职责
2013/11/19 职场文书
教师年度考核自我鉴定
2014/01/19 职场文书
《商鞅南门立木》教学反思
2014/02/16 职场文书
银行青年文明号事迹材料
2014/05/31 职场文书
医院党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
学习党的群众路线剖析材料
2014/10/09 职场文书
2014年办公室文员工作总结
2014/11/12 职场文书
2014年项目工作总结
2014/11/24 职场文书