jQueryのisPlainObject()インスタンスの詳しい説明-jsチュートリアル-php.cn

jQueryのisPlainObject()インスタンスの詳しい説明

小云云

リリース： 2018-02-28 14:20:18

オリジナル

1299 人が閲覧しました

jQuery の isPlainObject() 関数は、指定されたパラメーターが純粋なオブジェクトであるかどうかを判断するために使用され、戻り値はブール型です。

「純粋なオブジェクト」とは、{ }、new Object()、Object.create(null) を通じて作成されたオブジェクトです。

このメソッドの目的は、null、配列、ホストオブジェクト (ドキュメント)、DOM などの他の JavaScript オブジェクトと区別することです。これらに対して typeof を使用するとオブジェクトが返されるためです。

使用

構文:
$.isPlainObject( 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()メソッドの実装は主に3つの部分に分かれています
1. Object ではない型を削除します。
typeof は基本的な型しか区別できないため、このメソッドは typeof を使用する代わりに、すべての型に対して異なる文字列を取得します。 typeof は引き続き「オブジェクト」文字列を返します

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

ログイン後にコピー