Explication détaillée des instances isPlainObject() dans jQuery

La fonction isPlainObject() dans jQuery est utilisée pour déterminer si le paramètre spécifié est un objet pur et si la valeur de retour est de type booléen.

Les "objets purs" sont des objets créés via { }, new Object(), Object.create(null).

Le but de cette méthode est de la distinguer des autres objets JavaScript tels que null, tableaux, objets hôtes (documents), DOM, etc., car l'utilisation de typeof sur ceux-ci renverra un objet.

Utiliser

Syntaxe :
$.isPlainObject( object )
Description du paramètre :
objet : tout type qui doit être jugé N'importe quelle valeur.

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

Analyse du code source

Jetons un coup d'œil au code source sous la version 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;
}

Résumé

Du du point de vue du code source, L'implémentation de la méthode isPlainObject() est principalement divisée en trois parties
1 Supprimez les types qui ne sont pas des Object
Utilisez la méthode Object.prototype.toString.call(). La méthode obtiendra des chaînes différentes pour tous les types. Au lieu d'utiliser typeof, car typeof ne peut distinguer que les types de base, tels que les tableaux, typeof renvoie toujours la chaîne "objet"

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

Déterminez si l'objet a un. prototype. Les objets sans prototypes sont considérés comme des objets purs

3. Déterminez si l'objet est créé via la méthode "{}" ou "new Object"
Cela nécessite de juger leur constructeur, utilisez donc Function.prototype. Méthode toString

L'objet Function remplace la méthode Object.prototype.toString héritée de Object.
La méthode toString de la fonction renverra une chaîne représentant le code source de la fonction. Plus précisément, il inclut le mot-clé de fonction, la liste de paramètres formels, les accolades et le contenu du corps de la fonction.

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

Recommandations associées :

Explication détaillée de l'utilisation de la fonction jQuery.isPlainObject()

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!