집 > 기사 > 웹 프론트엔드 > jQuery의 isPlainObject() 인스턴스에 대한 자세한 설명

jQuery의 isPlainObject() 인스턴스에 대한 자세한 설명

小云云원래의: 2018-02-28 14:20:181280검색

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() 메서드 구현은 크게 세 부분으로 나뉜다
1. Object가 아닌 유형을 제거합니다.
Object.prototype.toString.call() 메소드는 typeof를 사용하는 대신 모든 유형에 대해 다른 문자열을 가져옵니다. typeof는 여전히 "객체" 문자 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를 반환합니다. 객체에 프로토타입이 있는지 확인합니다. 프로토타입이 없는 객체는 순수 객체로 간주됩니다

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

jQuery의 isPlainObject() 인스턴스에 대한 자세한 설명

사용

소스 코드 분석

요약

관련 기사