jQuery中的isPlainObject()方法实现原理

leon 发布于2019-08-22 14:53 / 1476人阅读

摘要：说明中的函数用于判断指定参数是否是一个纯粹的对象，返回值为类型。使用语法参数说明任意类型需要进行判断的任意值。函数的方法会返回一个表示函数源代码的字符串。具体来说，包括关键字，形参列表，大括号，以及函数体中的内容。

说明

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.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;

  //先去掉类型不是 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] }"

参考文章：
JavaScript专题之类型判断(下)

云服务器 GPU云服务器 jquery选择器原理 isPlainObject 队列实现原理 jQuery方法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92968.html

jQuery 源码系列（一）总体架构

摘要：到目前为止，的贡献者团队共名成员，多条，可想而知，是一个多么庞大的项目。参考源码分析整体架构源码解析读书笔记第二章构造对象函数详解本文在上的源码地址，欢迎来。欢迎来我的专栏查看系列文章。决定你走多远的是基础，jQuery 源码分析，向长者膜拜！我虽然接触 jQuery 很久了，但也只是局限于表面使用的层次，碰到一些问题，找到 jQuery 的解决办法，然后使用。显然，这种做法的...

svtter 2019-08-21 15:13 评论0 收藏0
JavaScript专题之类型判断(下)

摘要：专题系列预计写二十篇左右，主要研究日常开发中一些功能点的实现，比如防抖节流去重类型判断拷贝最值扁平柯里递归乱序排序等，特点是研究和的实现方式。 JavaScript专题系列第五篇，讲解更加复杂的类型判断，比如 plainObject、空对象、类数组对象、Window对象、DOM 元素等前言在上篇《JavaScript专题之类型判断(上)》中，我们抄袭 jQuery 写了一个 typ...

QLQ 2019-08-20 17:45 评论0 收藏0
js深浅复制

摘要：总结综上所述，数组的深拷贝比较简单，方法没有什么争议，对象的深拷贝，比较好的方法是用的方法实现，或者递归实现，比较简单的深复制可以使用实现参考资料知乎中的深拷贝和浅拷贝深入剖析的深复制深浅复制对比因为JavaScript存储对象都是存地址的，所以浅复制会导致 obj 和obj1 指向同一块内存地址。我的理解是，这有点类似数据双向绑定，改变了其中一方的内容，都是在原来的内存基础上做...

Apollo 2019-08-19 18:44 评论0 收藏0
深复制、浅复制与JQuery中的插件开发

摘要：变量表示深度复制时原始值的修正值。中的复制方法复制的方法分别是和。此处不能正确处理的深复制综合三种方法来看不能复制对象以外的对象。学习前端半年多了,还停留在新手村级,写的文章可能有很多问题,思维方式和逻辑上还不够严密,希望能指出问题,谢谢！ ===================================================================== 数...

sewerganger 2019-08-20 16:01 评论0 收藏0
原型（prototype）相关方法，jquery类型判断源码分析。

摘要：先来看一个这样的对象在函数的原型上扩展了一个方法可以看到实例化的对象下有一个属性，而这个属性就指向构造函数的原型对象。重点是，连接的是实例对象与构造函数原型对象，而不是，实例对象和构造函数。前言介绍原型的概念，和相关属性，以及jquery判断纯净对象的实现，不小心点进来的直接 ctrl+f 搜你想找的属性。什么是原型 isPrototypeOf() || Object.getP...

madthumb 2019-08-20 19:09 评论0 收藏0