Javascript 언어의 디자인은 충분히 엄격하지 않으며 주의하지 않으면 여러 곳에서 오류가 발생할 수 있습니다.
예를 들어, 다음 상황을 생각해 보십시오.
이제 전역 객체 myObj가 존재하는지 확인해야 합니다. 존재하지 않으면 이를 선언합니다. 자연어로 기술된 알고리즘은 다음과 같습니다.
다음과 같이 코드 코드를 복사합니다.
if (myObj가 존재하지 않습니다){
myObj를 선언하십시오.
}
이 코드를 작성하는 것이 쉽다고 생각할 수도 있습니다. 그러나 실제로 관련된 문법적 문제는 우리가 상상하는 것보다 훨씬 더 복잡합니다. Juriy Zaytsev는 Javascript 객체가 존재하는지 확인하는 방법이 50가지 이상 있다고 지적했습니다. Javascript 언어의 구현 세부 사항에 대해 매우 명확한 경우에만 둘 사이의 차이점을 알 수 있습니다.
글쓰기의 첫 번째 방법
직관적으로 다음과 같이 작성할 수 있다고 생각할 수도 있습니다.
다음과 같이 코드 코드를 복사합니다.
만약 (!myObj) {
myObj = { };
}
그러나 이 코드를 실행하면 브라우저에서 직접 ReferenceError 오류가 발생하여 작업이 중단됩니다. 무슨 일이야?
그런데 if 문에서 myObj가 비어 있는지 확인하면 변수가 아직 존재하지 않으므로 오류가 보고됩니다. 다음과 같이 변경하면 정상적으로 실행됩니다.
다음과 같이 코드 코드를 복사합니다.
만약 (!myObj) {
var myObj = { };
}
var를 추가한 후 오류가 발생하지 않는 이유는 무엇입니까? 이 경우 if 문이 판단을 내릴 때 myObj가 이미 존재하는 것이 아닐까요?
이 질문에 대답하려면 Javascript 인터프리터가 어떻게 작동하는지 알아야 합니다. Javascript 언어는 "먼저 구문 분석하고 나중에 실행"입니다. 변수 선언은 구문 분석 중에 이미 완료되었으므로 위 코드는 실제로 다음과 같습니다.
다음과 같이 코드 코드를 복사합니다.
var myObj;
만약 (!myObj) {
var myObj = { };
}
따라서 if 문이 판단할 때 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)에서는 window가 최상위 개체가 아닐 수 있다는 것입니다. 따라서 다음과 같이 다시 작성해 보세요.
다음과 같이 코드 코드를 복사합니다.
if (!this.myObj) {
this.myObj = { };
}
전역 변수 수준에서 this 키워드는 항상 최상위 변수를 가리키므로 다양한 실행 환경에 독립적일 수 있습니다.
네 번째 글쓰기 방법
그러나 위의 작성 방법은 읽기가 어렵고 this의 포인터는 가변적이고 오류가 발생하기 쉬우므로 추가로 다시 작성합니다.
다음과 같이 코드 코드를 복사합니다.
var 글로벌 = 이것;
if (!global.myObj) {
global.myObj = { };
}
최상위 개체를 나타내기 위해 사용자 정의 변수 global을 사용하는 것이 훨씬 더 명확합니다.
다섯 번째 글쓰기 방법
typeof 연산자를 사용하여 myObj가 정의되었는지 확인할 수도 있습니다.
다음과 같이 코드 코드를 복사합니다.
if (typeof myObj == "정의되지 않음") {
var myObj = { };
}
이는 현재 JavaScript 개체가 존재하는지 확인하는 데 가장 널리 사용되는 방법입니다.
여섯번째 글쓰기 방법
myObj의 값은 정의되었지만 할당되지 않은 경우 정의되지 않은 값과 동일하므로 위의 작성 방법을 단순화할 수 있습니다.
다음과 같이 코드 코드를 복사합니다.
if (myObj == 정의되지 않음) {
var myObj = { };
}
여기서 주목해야 할 두 가지 사항이 있습니다. 첫째, 두 번째 줄의 var 키워드가 누락되면 안 됩니다. 그렇지 않으면 ReferenceError가 발생합니다. 둘째, 여기서는 undefed의 데이터 유형이 비교되기 때문에 작은 따옴표나 큰 따옴표로 정의할 수 없습니다. 이 문자열은 "정의되지 않음"이 아닙니다.
일곱 번째 글쓰기 방법
위의 작성 방법은 "정확한 비교"(===)의 경우에도 여전히 적용됩니다.
다음과 같이 코드 코드를 복사합니다.
if (myObj === 정의되지 않음) {
var myObj = { };
}
여덟 번째 글쓰기 방법
JavaScript의 언어 설계에 따르면 정의되지 않음 == null이므로 myObj가 null과 같은지 비교하면 올바른 결과를 얻을 수도 있습니다.
다음과 같이 코드 코드를 복사합니다.
if (myObj == null) {
var myObj = { };
}
그러나 실행 결과가 정확하더라도 의미론적 관점에서 볼 때 이러한 판단 방법은 잘못된 것이므로 피해야 합니다. null은 null 값이 할당된 빈 개체, 즉 이 개체가 실제로 값을 갖는 개체를 참조하고, undefined는 존재하지 않거나 값이 할당되지 않은 개체를 참조하기 때문입니다. 따라서 여기서는 "비교 연산자"(==)만 사용할 수 있습니다. 여기서 "정확한 비교 연산자"(===)를 사용하면 오류가 발생합니다.
아홉 번째 글쓰기 방법
in 연산자를 사용하여 myObj가 최상위 객체의 속성인지 여부를 확인할 수도 있습니다.
다음과 같이 코드 코드를 복사합니다.
if (!(창의 'myObj')) {
window.myObj = { };
}
열번째 글쓰기 방법
마지막으로 hasOwnProperty 메소드를 사용하여 myObj가 최상위 객체의 속성인지 확인합니다.
다음과 같이 코드 코드를 복사합니다.
if (!this.hasOwnProperty('myObj')) {
this.myObj = { };
}
요약
1. 객체가 존재하는지 여부만 판단한다면 다섯 번째 쓰기 방법을 사용하는 것이 좋습니다.
2. 객체가 존재하는지 여부 외에 객체에 null 값이 있는지도 확인해야 하는 경우 첫 번째 작성 방법을 사용하는 것이 좋습니다.
3. 특별한 경우가 아닌 이상 모든 변수는 var 명령어를 사용하여 선언해야 합니다.
4. 크로스 플랫폼이 되기 위해서는 최상위 객체를 표현하기 위해 창을 사용하지 않는 것이 좋습니다.
5. Javascript 언어에서는 null과 undefine이 혼동되기 쉽습니다. 둘 다 관련될 수 있는 경우 "정확한 비교" 연산자(===)를 사용하는 것이 좋습니다.