Detailed explanation of isPlainObject() instances in jQuery

The isPlainObject() function in jQuery is used to determine whether the specified parameter is a pure object, and the return value is of Boolean type.

"Pure objects" are objects created through { }, new Object(), Object.create(null).

The purpose of this method is to distinguish it from other JavaScript objects such as null, arrays, host objects (documents), DOM, etc., because using typeof on these will return object.

Using

Syntax:
$.isPlainObject(object)
Parameter description:
object: Any value of any type that needs to be judged.

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

Source code analysis

Let’s take a look at the source code under jQuery 3.3.1 version

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

Summary

From the source code, isPlainObject() method The implementation is mainly divided into three parts
1. Remove the type that is not Object.
Use the Object.prototype.toString.call() method. This method will get different strings for all types instead of using typeof , because typeof can only distinguish basic types, such as arrays, typeof still returns "object" string

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. Determine whether the object has a prototype. Objects without prototypes are considered pure objects

3 , Determine whether the object is created through "{}" or "new Object"
This requires judging their constructor, so use the Function.prototype.toString method

Function object covers the The Object.prototype.toString method inherited from Object.
The toString method of the function will return a string representing the function source code. Specifically, it includes the function keyword, formal parameter list, braces, and the content in the function body.

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] }"

Related recommendations:

jQuery.isPlainObject() function usage details

The above is the detailed content of Detailed explanation of isPlainObject() instances in jQuery. For more information, please follow other related articles on the PHP Chinese website!