详解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使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
Apr 28 jQuery
jquery+ajax实现省市区三级联动 (封装和不封装两种方式)
May 15 jQuery
JQueryMiniUI按照时间进行查询的实现方法
Jun 07 jQuery
详解jQuery中关于Ajax的几个常用的函数
Jul 17 jQuery
使用jQuery实现两个div中按钮互换位置的实例代码
Sep 21 jQuery
基于jQuery解决ios10以上版本缩放问题
Nov 03 jQuery
jQuery实现动态控制页面元素的方法分析
Dec 20 jQuery
简单易扩展可控性强的Jquery转盘抽奖程序
Mar 16 jQuery
jquery操作select常见方法大全【7种情况】
May 28 jQuery
jQuery中DOM常见操作实例小结
Aug 01 jQuery
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
Apr 30 jQuery
jQuery zTree如何改变指定节点文本样式
Oct 16 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中使用Oracle数据库(3)
2006/10/09 PHP
PHP中Date获取时间不正确怎么办
2008/06/05 PHP
php addslashes及其他清除空格的方法是不安全的
2012/01/25 PHP
PHP中全局变量global和$GLOBALS[]的区别分析
2012/08/06 PHP
Ext面向对象开发实践(续)
2008/11/18 Javascript
JQuery伸缩导航练习示例
2013/11/13 Javascript
js验证输入是否为手机号码或电话号码示例
2013/12/30 Javascript
javascript学习笔记(五)原型和原型链详解
2014/10/08 Javascript
利用JavaScript判断浏览器类型及版本
2016/08/23 Javascript
jQuery实现立体式数字滚动条增加效果
2016/12/21 Javascript
支持移动端原生js轮播图
2017/02/16 Javascript
jQuery插件echarts实现的去掉X轴、Y轴和网格线效果示例【附demo源码下载】
2017/03/04 Javascript
Node.js 使用命令行工具检查更新
2017/06/08 Javascript
JavaScript实现图片本地预览功能【不用上传至服务器】
2017/09/20 Javascript
Vue使用NProgress的操作过程解析
2019/10/10 Javascript
JavaScript算法学习之冒泡排序和选择排序
2019/11/02 Javascript
[06:14]《辉夜杯》外卡赛附加赛 4支战队巡礼
2015/10/23 DOTA
[05:31]干嘛呢兄弟!DOTA2 TI9语音轮盘部分出处
2019/05/14 DOTA
用Python写的图片蜘蛛人代码
2012/08/27 Python
Python从MP3文件获取id3的方法
2015/06/15 Python
Python 自动刷博客浏览量实例代码
2017/06/14 Python
Python无损音乐搜索引擎实现代码
2018/02/02 Python
浅析python3字符串格式化format()函数的简单用法
2018/12/07 Python
PyQt5 加载图片和文本文件的实例
2019/06/14 Python
Python threading的使用方法解析
2019/08/28 Python
简单了解为什么python函数后有多个括号
2019/12/19 Python
python add_argument()用法解析
2020/01/29 Python
python梯度下降算法的实现
2020/02/24 Python
CSS3解决移动页面上点击链接触发色块的问题
2016/06/03 HTML / CSS
CSS3属性 line-clamp控制文本行数的使用
2020/03/19 HTML / CSS
美国Jeep配件购物网站:Morris 4×4 Center
2019/05/01 全球购物
学生就业推荐信
2013/11/13 职场文书
初中教师业务学习材料
2014/05/12 职场文书
敬老院献爱心活动总结
2014/07/08 职场文书
python3使用diagrams绘制架构图的步骤
2021/04/08 Python
mysql分表之后如何平滑上线详解
2021/11/01 MySQL