JavaScript_기본 지식에서 typeof 사용 소개

JavaScript의 Typeof는 실제로 많은 작업에 사용될 수 있지만 이상한 동작도 많이 합니다.

이 문서에는 다양한 용도가 나열되어 있으며 기존 문제와 해결 방법도 지적되어 있습니다.

이 글을 읽는 전제는 이제 원시값과 객체값의 차이를 알아야 한다는 것입니다.

변수가 존재하는지, 값이 있는지 확인하세요
typeof는 두 가지 경우에 "정의되지 않음"을 반환합니다.

1. 변수가 선언되지 않았습니다

2. 변수의 값이 정의되지 않았습니다

예:

코드 복사 코드는 다음과 같습니다.

> undeclaredVariable === "정의되지 않음"
true

> var 선언된 변수;
> 선언된 변수 유형
'정의되지 않음'

> 정의되지 않은 유형
'정의되지 않음'

값이 정의되지 않았는지 여부를 감지하는 다른 방법이 있습니다.

코드 복사 코드는 다음과 같습니다.

> >> 값 === 정의되지 않음
참

그러나 이 메소드가 선언되지 않은 변수에 사용되면 예외가 발생합니다. 왜냐하면 typeof만이 오류 보고 없이 정상적으로 선언되지 않은 변수를 감지할 수 있기 때문입니다.

코드 복사 코드는 다음과 같습니다.

> >참조 오류: 선언되지 않은 변수가 정의되지 않았습니다

참고: 초기화되지 않은 변수, 전달된 매개변수가 없는 형식 매개변수 및 존재하지 않는 속성은 항상 액세스 가능하고 값이 항상 정의되지 않기 때문에 위의 문제가 발생하지 않습니다.

코드 복사 코드는 다음과 같습니다.

> ; 선언된 변수 = == 정의되지 않음

true

> (함수 (x) { return x === 정의되지 않음 }())
true

> ({}).foo === 정의되지 않음
참

번역자 참고 사항: 따라서 선언되지 않은 전역 변수의 존재를 감지하려는 경우 if(window.maybeUndeclaredVariable){}를 사용할 수도 있습니다.

문제: typeof는 이러한 작업을 완료하기가 매우 복잡합니다.

해결책: 이런 종류의 작업은 흔하지 않기 때문에 더 나은 해결책을 찾을 필요가 없다고 생각하는 사람들도 있습니다. 하지만 누군가 특별한 연산자를 생각해 낼 수도 있습니다.

코드 복사 코드는 다음과 같습니다.> 정의된 undeclaredVariable

false

> var 선언된 변수;
> 선언된 변수false

또는 변수 선언 여부를 감지하는 연산자가 필요한 사람이 있을 수도 있습니다.

코드 복사 코드는 다음과 같습니다.> undeclaredVariable

false

> var 선언된 변수;
> 선언된 변수true

번역자 주: Perl에서 위에 정의된 연산자는 Defined()와 동일하고, 위에서 선언된 연산자는 presents()와 동일합니다.

값이 정의되지 않음 또는 null이 아닌지 확인

문제: 값이 정의되었는지(값이 정의되지 않았거나 null이 아님) 여부를 검색하려는 경우 다음과 같은 문제가 발생합니다. typeof. 유명한 이상한 동작(버그로 간주됨): typeof null은 "객체"를 반환합니다.

코드 복사 코드는 다음과 같습니다.> '

역자 주: 이는 원래 JavaScript 구현의 버그라고만 말할 수 있으며 이것이 현재 표준이 규제되는 방식입니다. V8은 한때 null === "null" 유형을 수정하고 구현했지만 결국 실행 불가능하다는 것이 입증되었습니다. http://wiki.ecmascript.org/doku.php?id=harmony:typeof_null.

(주석: typeof는 null에서 작동할 때 "object"를 반환합니다. 이는 JavaScript 언어 자체의 버그입니다. 불행하게도 너무 많은 기존 코드가 이미 이 성능에 의존하고 있기 때문에 이 버그는 절대 수정되지 않습니다. 그러나 null입니다. object? stackoverflow에 이 문제에 대한 토론이 있습니다: http://stackoverflow.com/questions/801032/null-object-in-javascript/7968470#7968470@justjavac)

해결책: 이 작업에는 typeof를 사용하지 말고 대신 다음과 같은 함수를 사용하세요.

코드 복사 코드는 다음과 같습니다.

function isDefined(x) {
x ! == null && x !== 정의되지 않음;
}

또 다른 가능성은 "기본값 연산자"를 도입하는 것입니다. 여기서 다음 표현식은 myValue가 정의되지 않은 경우 defaultValue를 반환합니다.

코드 복사 코드는 다음과 같습니다.

myValue

위 표현식은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

(myValue !== 정의되지 않음 && myValue ! == null ) ? myValue : defaultValue

또는:

코드 복사 코드는 다음과 같습니다.

myValue ??= defaultValue

은 실제로 다음 문장을 단순화한 것입니다.

코드 복사 코드는 다음과 같습니다.

myValue = myValue ??

바와 같은 중첩된 속성에 액세스할 때 다음 연산자의 도움이 필요할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

obj.foo.bar

obj 또는 obj.foo가 정의되지 않은 경우 위 표현식은 예외를 발생시킵니다. .?? 연산자를 사용하면 위 표현식이 속성을 레이어별로 탐색할 때 값이 정의되지 않았거나 null인 첫 번째 속성을 반환할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

obj.??foo.??bar

위 표현식은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

(obj === 정의되지 않음 || obj === null) ? obj
: (obj.foo === 정의되지 않음 || obj.foo === null) ? obj.foo
: obj.foo.bar

객체값과 원시값 구별

다음 함수는 x가 객체 값인지 확인하는 데 사용됩니다.

코드 복사 코드는 다음과 같습니다.

function isObject(x) {
return (typeof x === "함수"
|| (typeof x === "object" && x !== null));
}

문제: typeof는 함수와 객체를 다른 유형으로 간주하고 typeof null은 "객체"를 반환하기 때문에 위 감지가 더 복잡합니다.

해결 방법: 다음 방법도 개체 값을 감지하는 데 자주 사용됩니다.

코드 복사 코드는 다음과 같습니다.

function isObject2(x) {
return x = == 객체(x);
}

경고: 여기에서 인스턴스 오브 객체를 사용하면 감지할 수 있다고 생각할 수도 있지만, 인스턴스 오브는 객체의 프로토타입을 사용하여 인스턴스 관계를 결정하므로 프로토타입이 없는 객체는 어떻게 해야 할까요?

코드 복사 코드는 다음과 같습니다.

> null)
> Object.getPrototypeOf(obj)
null

obj는 실제로 객체이지만 어떤 값의 인스턴스도 아닙니다.

코드 복사 코드는 다음과 같습니다.

> '
> obj 인스턴스
false

실제로 이러한 개체는 거의 접할 수 없지만 존재하며 용도가 있습니다.

번역가의 메모: Object.prototype은 프로토타입이 없는 유일한 내장 객체입니다.

코드 복사 코드는 다음과 같습니다.

>Object.getPrototypeOf(Object.prototype )
null
>typeof Object.prototype
'object'
>Object.prototype instanceof Object
false

기본 값의 유형은 무엇인가요?
typeof는 기본 값의 유형을 확인하는 가장 좋은 방법입니다.

코드 복사 코드는 다음과 같습니다.

> '문자열'
> 정의되지 않은 유형
'정의되지 않음'

문제: null 유형의 이상한 동작을 알고 있어야 합니다.

코드 복사 코드는 다음과 같습니다.

>

'객체'

해결 방법: 다음 기능으로 이 문제를 해결할 수 있습니다(이 사용 사례에만 해당).

코드 복사 코드는 다음과 같습니다.

function getPrimitiveTypeName(x) {

var typeName = typeof x;
switch(typeName) {
케이스 "정의되지 않음":
케이스 "부울":
케이스 "번호":
케이스 "문자열":
return type Name;
case "object":
if (x === null) {
return "null";
}
default: // 이전 판단이 통과되지 않았습니다
         새로운 TypeError 발생("매개변수가 기본 값이 아닙니다: " x);
}
}

더 나은 해결책: 원래 값의 유형을 반환하는 것 외에도 객체 값의 내부 [[Class]] 속성을 반환할 수 있는 함수 getTypeName()을 구현합니다. 이 함수를 구현하는 방법은 다음과 같습니다(번역자 참고: jQuery의 $.type이 그러한 구현입니다)

값이 함수인지 여부

typeof를 사용하여 값이 함수인지 여부를 감지할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

> 🎜>'함수'

> typeof Object.prototype.toString
'함수'

원칙적으로 instanceof Function도 이 요구 사항을 감지할 수 있습니다. 언뜻 보면 글쓰기 방식이 더 우아해 보이는 것 같습니다. 그러나 브라우저에는 특이한 점이 있습니다. 모든 프레임과 창에는 고유한 전역 변수가 있습니다. 따라서 한 프레임에서 다른 프레임으로 객체를 전달하는 경우 두 프레임의 생성자가 다르기 때문에 인스턴스가 제대로 작동하지 않습니다. 이것이 ECMAScript5에 Array.isArray() 메소드가 있는 이유입니다. 객체가 주어진 생성자의 인스턴스인지 여부를 확인하는 프레임워크 간 방법이 있다면 좋을 것입니다. 위의 getTypeName()은 사용 가능한 해결 방법이지만 보다 근본적인 해결 방법이 있을 수 있습니다.

개요
다음은 현재 JavaScript에서 가장 긴급하게 필요한 기능으로, typeof가 현재 담당하고 있는 일부 기능을 대체할 수 있습니다.

•isDefined()(예: Object.isDefined()): 함수 또는 연산자로 사용할 수 있습니다

•isObject()

•getTypeName()

• 객체가 지정된 생성자의 인스턴스인지 여부를 감지하는 프레임워크 메커니즘

변수 선언 여부 확인과 같은 요구 사항의 경우 자체 연산자가 필요하지 않을 수도 있습니다.