Javascript 객체가 존재하는지 확인하는 여러 가지 방법_javascript 팁

Javascript 언어의 디자인은 충분히 엄격하지 않으며 주의하지 않으면 여러 곳에서 오류가 발생할 수 있습니다.
예를 들어, 다음과 같은 상황을 생각해 보세요.
이제 전역 개체 myObj가 존재하는지 확인해야 합니다. 존재하지 않으면 선언하세요. 자연어로 기술한 알고리즘은

코드 복사 코드는

if (myObj가 존재하지 않음){
　myObj 선언
　}

이 코드를 작성하는 것이 쉽다고 생각할 수도 있습니다. 그러나 실제로 관련된 문법적 문제는 우리가 상상하는 것보다 훨씬 더 복잡합니다. Juriy Zaytsev는 Javascript 객체가 존재하는지 확인하는 방법이 50가지 이상 있다고 지적했습니다. Javascript 언어의 구현 세부 사항에 대해 매우 명확한 경우에만 둘 사이의 차이점을 알 수 있습니다.

첫 번째 글쓰기 방법
직관에 따르면 다음과 같이 쓸 수 있다고 생각할 수도 있습니다.

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

if (!myObj) {
　myObj = { }
　}

그러나 이 코드를 실행하면 브라우저에서 직접 ReferenceError 오류가 발생하여 작업이 중단됩니다. 무슨 일이야?
그런데 if 문에서 myObj가 비어 있는지 확인하면 이 변수가 아직 존재하지 않으므로 오류가 보고됩니다. 다음과 같이 변경하면 정상적으로 실행됩니다.

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

if (!myObj) {
var myObj = { };
　}

var를 추가했는데 왜 오류가 없나요? 이 경우 if 문이 판단을 내릴 때 myObj가 이미 존재하는 것이 아닐까요?
이 질문에 대답하려면 Javascript 인터프리터가 어떻게 작동하는지 알아야 합니다. Javascript 언어는 "먼저 구문 분석한 후 실행"입니다. 구문 분석 중에 변수 선언이 이미 완료되었으므로 위 코드는 실제로

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

var myObj;
　if (!myObj) {
　var myObj = { }; 판단 결과, myObj가 이미 존재하므로 오류가 보고되지 않습니다. 이는 var 명령의 "호이스팅" 효과입니다. Javascript 인터프리터는 var 명령으로 정의된 변수만 "승격"하고 var 명령을 사용하지 않고 직접 할당된 변수에서는 작동하지 않습니다. 이것이 var가 추가되지 않으면 오류가 보고되는 이유입니다.


두 번째 작성 방법

var 명령 외에도 이를 다시 작성하여 올바른 결과를 얻는 또 다른 방법이 있습니다:


코드 복사

코드는 다음과 같습니다. if (!window.myObj) { 　myObj = { }; }

Window는 JavaScript의 최상위 객체이며 모든 전역 변수는 속성입니다. 따라서 myobj가 비어 있는지 확인하는 것은 창 개체에 myobj 특성이 있는지 확인하는 것과 동일하므로 myObj가 정의되지 않아 발생하는 ReferenceError 오류를 피할 수 있습니다. 하지만 코드의 표준화 측면에서 두 번째 줄에 var를 추가하는 것이 가장 좋습니다.

코드 복사

코드는 다음과 같습니다. 다음과 같습니다: if (!window.myObj) { 　var myObj = { }; 　}

또는 다음과 같이 작성합니다:

코드 복사

코드는 다음과 같습니다. if (!window.myObj) { 　window .myObj = { }; 　}

세 번째 작성 방법

위 작성 방법의 단점은 일부 실행 환경(예: V8, Rhino), 창은 최상위 개체가 아닐 수 있습니다. 따라서 다음과 같이 다시 작성해 보세요.

코드 복사

코드는 다음과 같습니다. if (!this.myObj ) { 　this.myObj = { } 　}

전역 변수 수준에서 this 키워드는 항상 최상위 변수를 가리키므로 다양한 운영 환경에 독립적일 수 있습니다.

네 번째 작성 방법
그러나 위의 작성 방법은 가독성이 떨어지고 this의 포인터가 가변적이고 오류가 발생하기 쉬우므로 추가로 다시 작성합니다.

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

var global = this; !global.myObj) {
　global.myObj = { };
　}

최상위 개체를 나타내는 데 사용자 정의 변수 global을 사용하는 것이 훨씬 더 명확합니다.


다섯 번째 작성 방법 typeof 연산자를 사용하여 myObj가 정의되었는지 확인할 수도 있습니다.

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

if (typeof myObj == "undefine" ) {
　var myObj = {};
　}

이것은 현재 JavaScript 객체가 존재하는지 확인하는 데 가장 널리 사용되는 방법입니다.


6번째 작성 방법 myObj의 값은 정의되었지만 할당되지 않은 경우 undef와 직접 동일하므로 위의 작성 방법을 단순화할 수 있습니다.

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

if (myObj == undefine) {
　var myObj = { };
　}

여기서 두 가지 사항에 유의해야 합니다. 첫째, 두 번째 줄의 var 키워드는 누락될 수 없습니다. 둘째, undefine이 발생할 수 없습니다. 작은 따옴표나 큰 따옴표를 추가했습니다. 왜냐하면 여기서 비교되는 것은 문자열 "undefine"이 아니라 undefed 데이터 유형이기 때문입니다.


7번째 글쓰기 위의 글쓰기 방식은 '정확한 비교'(===)의 경우에도 유효합니다.

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

if (myObj === undefine) {
　var myObj = { } ;
　}

글쓰기 여덟 번째 방법 javascript의 언어 설계에 따르면 undefine == null이므로 myObj가 null인지 비교하면 됩니다. 또한 올바른 결과를 얻으세요:

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

if (myObj == null) {
　var myObj = { };
　}

그러나 실행 결과는 정확하지만 의미적으로는 잘못된 판단 방법이므로 피해야 합니다. null은 null 값이 할당된 빈 개체, 즉 이 개체가 실제로 값을 갖는 개체를 참조하고, undefined는 존재하지 않거나 값이 할당되지 않은 개체를 참조하기 때문입니다. 따라서 여기서는 "비교 연산자"(==)만 사용할 수 있습니다. 여기서 "정확한 비교 연산자"(===)를 사용하면 오류가 발생합니다.


아홉 번째 작성 방법 in 연산자를 사용하여 myObj가 최상위 개체의 속성인지 확인할 수도 있습니다.

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

if (!('myObj' in window)) {
　window.myObj = { };
　}

열번째 작성 방법 마지막으로 hasOwnProperty 메소드를 사용하여 myObj가 최상위 객체의 속성인지 확인합니다. :

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

if (!this.hasOwnProperty(' myObj')) {
　this.myObj = { };
　}

요약 1. 다섯 번째 쓰기 방법을 사용하는 것이 좋습니다.
2. 객체 존재 여부 외에도 객체에 null 값이 있는지 확인해야 하는 경우 첫 번째 작성 방법을 사용하는 것이 좋습니다.
3. 특별한 사정이 없는 한 모든 변수는 var 명령어를 사용하여 선언해야 합니다.
4. 크로스 플랫폼을 위해서는 최상위 객체를 표현하기 위해 창을 사용하지 않는 것이 좋습니다.
5. Javascript 언어에서는 null과 정의되지 않음이 혼동되기 쉽습니다. 둘 다 관련될 수 있는 경우 "정확한 비교" 연산자(===)를 사용하는 것이 좋습니다.