JavaScript 유형 판단에 대한 네 가지 방법을 자세히 설명합니다.

JavaScript에는 객체를 제외한 8가지 기본 유형이 있습니다.

빈 값 (null)

정의되지 않음(undefined)

부울 값(boolean)

숫자(number)

문자열(string)

대상(object)

기호(symbol, ES6에 추가됨)

큰 정수(BigInt, ES2020 도입)

Symbol: ES6에 도입된 원본 데이터 유형으로 고유한 값을 나타냅니다.
BigInt: ES2020에서 도입된 새로운 데이터 유형으로 자바스크립트에서 53개의 바이너리까지만 숫자를 처리할 수 있습니다 (JavaScript의 모든 숫자는 64비트 부동 소수점으로 저장되며 이 범위의 정수보다 커서 정확하게 표현할 수 없는 문제입니다. 구체적으로 볼 수 있습니다: 새로운 데이터 클래스 - BigInt
1. typeof
typeof는 함수가 아니라 조작부호입니다. 오른쪽은 일원 표현식과 함께 이 표현식의 데이터 형식을 되돌려줍니다.반환된 결과는 이 유형의 문자열(전소문자) 형식으로 다음과 같은 8가지를 포함한다. number,boolean,symbol,string,object,undefined,function,bigInt 등이다.
typeof 원리는 서로 다른 대상이 밑바닥에서 모두 2진법으로 표시되고 자바스크립트에서 2진법 전(저) 세 자리에 그 유형 정보를 저장하는 것이다.

000: 대상

010: 부동점수

100: 문자열

110: 블

1: 정수

console.log(typeof undefined) // undefind
console.log(typeof null)   // object
console.log(typeof true)   // boolean
console.log(typeof 43)    // number
console.log(typeof '21')   // string
console.log(typeof {a:1})   // object
console.log(typeof Symbol()) // symbol
console.log(typeof 123n)   // bigint
function a() {}
console.log(typeof a)     // function
var date = new Date()
var error = new Error()
console.log(typeof date)   // object
console.log(typeof error)   // object

2. instance of
instanceof는 A가 B인지 아닌지를 판단하는 실례입니다. 표현식은 A instanceof B입니다. 만약에 A가 B의 실례라면true를 되돌려주고 그렇지 않으면false를 되돌려줍니다.여기서 특히 주의해야 할 것은: instanceof가 검출한 것은 원형이다
통속적으로 말하자면, instanceof는 하나의 대상이 특정한 구조 함수인지의 실례를 비교하는 데 쓰인다.주의, instanceof는 복잡한 데이터 유형을 정확하게 판단할 수 있지만, 기본 데이터 유형을 정확하게 판단할 수 없습니다

console.log(12 instanceof Number) // false
console.log('22' instanceof String) // false
console.log(true instanceof Boolean) // false
console.log(null instanceof Object) // false
console.log(undefined instanceof Object) // false
 
console.log([] instanceof Array)  // true
console.log({a: 1} instanceof Object) // true
console.log(json instanceof Object) // true
function a() {}
console.log(a instanceof Function) // true
console.log(new Date() instanceof Date) //true
console.log(reg instanceof RegExp) //true
console.log(error instanceof Error) // true

3. Object.prototype.toString.call()
toString()은 현재 객체의 [Class]를 기본적으로 반환하는 Object의 원형 방법입니다.이것은 내부 속성입니다. 형식은 [object Xxx]입니다. 그 중에서 Xxx는 대상의 형식입니다.
Object 객체의 경우 toString()을 직접 호출하면 [object Object]로 돌아갑니다.다른 대상에 대해서는 콜/apply를 통해 호출해야 정확한 형식 정보를 되돌릴 수 있습니다.

console.log(Object.prototype.toString.call(1))     // [object Number]
console.log(Object.prototype.toString.call(1n))     // [object BigInt]
console.log(Object.prototype.toString.call('123'))   // [object String]
console.log(Object.prototype.toString.call(true))    // [object Boolean]
console.log(Object.prototype.toString.call(undefined)) // [object Undefined]
console.log(Object.prototype.toString.call(null))    // [object Null]
console.log(Object.prototype.toString.call({}))     // [object Object]
console.log(Object.prototype.toString.call([]))     // [object Array]
console.log(Object.prototype.toString.call(function a() {})) // [object Function]
console.log(Object.prototype.toString.call(Symbol()))     // [object Symbol]
console.log(Object.prototype.toString.call(Math))       // [object Math]
console.log(Object.prototype.toString.call(JSON))       // [object JSON]
console.log(Object.prototype.toString.call(new Date()))    // [object Date]
console.log(Object.prototype.toString.call(new RegExp()))   // [object RegExp]
console.log(Object.prototype.toString.call(new Error))    // [object Error]
console.log(Object.prototype.toString.call(window)      // [object Window]
console.log(Object.prototype.toString.call(document)     // [object HTMLDocument]

이 방법을 사용하면 우리는 isType 방법을 봉하여 유형을 판단할 수 있다

let isType = (type, obj) => {
  return Object.prototype.toString.call(obj) === `[object ${type}]`
}
console.log(isType('Number', 12))  // true
console.log(isType('Number', '12')) // false

혹은

let type = function(o) {
  let s = Object.prototype.toString.call(o);
  return s.match(/\[object (.*?)\]/)[1].toLowerCase();
};
console.log(type(12)) // number
console.log(type('12')) // string
console.log(type({})) // object
console.log(type([])) // array

4. constructor
constructor 속성은 어떤 실례 대상이 도대체 어떤 구조 함수에서 생겼는지 알 수 있습니다.
constructor 속성은 원형 대상과 구조 함수 간의 관련 관계를 나타낸다. 원형 대상을 수정하면 constructor 속성을 동시에 수정하여 인용할 때 오류를 방지한다.따라서 원형 대상을 수정할 때 일반적으로constructor 속성의 지향을 동시에 수정해야 한다.

console.log('22'.constructor === String)       // true
console.log(true.constructor === Boolean)      // true
console.log([].constructor === Array)        // true
console.log(document.constructor === HTMLDocument)  // true
console.log(window.constructor === Window)      // true
console.log(new Number(22).constructor === Number)  // true
console.log(new Function().constructor === Function) // true
console.log((new Date()).constructor === Date)    // true
console.log(new RegExp().constructor === RegExp)   // true
console.log(new Error().constructor === Error)    // true

참고:
1,null과undefined는 무효한 대상이기 때문에constructor가 존재하지 않습니다. 이 두 가지 유형의 데이터는 다른 방식으로 판단해야 합니다.
2. 함수의constructor는 불안정하다. 이것은 주로 사용자 정의 대상에 나타난다. 개발자가prototype를 다시 쓰면 원래의constructor 인용을 잃어버리고constructor는 기본적으로Object로 한다
이상은 자바스크립트 유형 판단의 네 가지 방법에 대한 상세한 내용입니다. 자바스크립트 유형 판단에 관한 더 많은 자료는 저희 다른 관련 글을 주목해 주십시오!