오류 분석: 9가지 JavaScript 트랩 및 주석_Javascript 기술

Nine Javascript Gotchas에는 9가지 일반적인 JavaScript 함정이 있습니다. 매우 깊은 기술적인 문제는 아니지만 주의를 기울이면 프로그래밍이 더 쉬워질 것입니다. 이는 삶을 더 쉽게 만듭니다. 저자는 일부 함정에 대해 엇갈린 의견을 제시할 것입니다.

1. 마지막 쉼표
이 코드처럼 마지막 쉼표에 주의하세요. 언어학적 관점에서 보면 좋을 것입니다(파이썬의 유사한 데이터 유형 사전이 이를 허용합니다). IE는 구문 오류를 보고하지만 언어가 명확하지 않습니다. 사람의 눈으로는 수천 줄의 코드만 스캔할 수 있습니다.

[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다

]


2. this
의 참조는 다음 코드와 같이 변경됩니다.

<input type="button" value="Gotcha!" id="MyButton">
[Ctrl A 모두 선택 참고:

외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다
]

당신만큼 좋지는 않습니다. 대답은 "JavaScript 규칙"이 아니길 바랍니다. MyObject.ClickHandler를 실행할 때 코드의 빨간색 줄에서 this에 대한 참조는 실제로 document.getElementById("theText")의 참조를 가리킵니다. 다음과 같이 해결할 수 있습니다. <input type="button" value="Gotcha!" id="theText">

[Ctrl A 모두 선택 참고:
외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다.
]

기본적으로 , 이는 JavaScript 범위 문제입니다. 살펴보면 하나 이상의 솔루션이 있음을 알 수 있습니다.

3. 신원 도용
자바스크립트의 HTML ID와 동일한 변수 이름을 사용하지 마세요. 다음 코드:

<input type="button" id="TheButton">

[Ctrl A 모두 선택 참고:
외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다.
]

IE 개체가 정의되지 않은 오류라고 보고합니다. IE는 형편없다고만 말할 수 있습니다.

4. 문자열은 다음과 같이 첫 번째 일치

만 대체합니다.
[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다 ]

사실 결과는 "This_is a title"입니다. JavaScript에서 String.replace의 첫 번째 매개변수는 정규식이어야 합니다. 따라서 올바른 접근 방식은 다음과 같습니다.


var fileName = "This is a title".replace(/ /g,"_")


5. 때로는 마우스인
을 의미하기도 하는데, 이는 이벤트 버블링으로 인해 발생합니다. IE에는 mouseenter와 mouseleave가 있지만 표준은 아닙니다. 저자는 문제 해결을 위해 YUI와 같은 라이브러리를 사용할 것을 권장합니다.

6.parseInt는 기본 시스템을 기반으로 합니다.
이것은 상식이지만 많은 사람들은parseInt에 기본 시스템을 지정하는 두 번째 매개 변수가 있다는 사실을 무시합니다. 예를 들어,parseInt("09"), 답이 9라고 생각한다면 틀린 것입니다. 여기서 문자열은 0으로 시작하고, parsInt는 이를 8진수로 처리하기 때문입니다. 8진수에서 09는 유효하지 않으며 false를 반환합니다. 부울 값 false는 숫자 값으로 변환되어 0입니다. 따라서 올바른 접근 방식은 parseInt("입니다. 09", 10).

7. for...in...은 모든 것을 순회합니다
다음과 같은 코드가 있습니다:


var arr = [ 5,10, 15]
var total = 1;
for ( var x in arr) {
total = total * arr[x]
}

잘 작동합니다. 그렇지 않나요? 그런데 어느 날 작동이 멈추고 나에게 반환된 값은 NaN, halo가 되었습니다. 방금 도서관을 소개했습니다. 이 라이브러리는 Array의 프로토타입을 다시 작성했음이 밝혀졌습니다. 이러한 방식으로 우리의 arr에는 속성(메서드)이 하나 더 있고 for...in...이 이를 순회할 것입니다. 따라서 이렇게 하는 것이 더 안전합니다:


for ( var x = 0; x < arr.length; x ) {
total = total * arr[x]
}

사실 이것도 기본 클래스의 프로토타입을 오염시켜 피해를 입힌 예이기도 합니다.

8. 이벤트 핸들러의 함정
사실 이는 이벤트 핸들러를 객체 속성으로 사용할 때만 발생하는 문제입니다. 예를 들어, window.onclick = MyOnClickMethod와 같은 코드는 이전 window.onclick 이벤트를 덮어쓰며 IE의 콘텐츠가 누출될 수도 있습니다(다시 짜증납니다). IE가 DOM 2 이벤트 등록을 지원하지 않기 전에 저자는 문제 해결을 위해 YUI 사용과 같은 라이브러리 사용을 제안했습니다.


YAHOO.util.Event.addListener(window, "click", MyOnClickMethod) ;

이것도 상식적인 문제지만 초보자는 실수하기 쉽습니다.

9. 포커스 포커스
새 입력 텍스트 요소를 만든 다음 논리적으로 말하면 이러한 코드는 매우 자연스럽습니다.


var newInput = document .createElement("input");
document.body.appendChild(newInput);
newInput.focus();
newInput.select(); 그러나 IE는 오류(계속해서 짜증남). 그 이유는 focus()를 실행할 때 해당 요소가 아직 존재하지 않기 때문일 수 있습니다. 따라서 실행을 지연할 수 있습니다.


var newInput = document.createElement("input")
newInput.id = "TheNewInput"
document.body.appendChild(newInput) ;
setTimeout(function(){ //여기서 클로저를 사용하여 다시 작성했습니다. 관심이 있으시면 원본 텍스트와 비교해 보세요.
document.getElementById('TheNewInput').focus();
document.getElementById(' TheNewInput').select();}, 10);

실제로 JavaScript에는 더 많은 함정이 있으며, 대부분 파서의 부적절한 구현으로 인해 발생합니다. 이런 것들은 일반적으로 교과서에는 나오지 않으며 개발자들 간의 경험 공유에만 의존할 수 있습니다. 다행스럽게도 우리는 인터넷 시대에 살고 있으며 우리가 직면하는 많은 질문에 대한 답은 대개 Google에서 찾을 수 있습니다.