JavaScript에 관한 9가지 함정과 의견

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

마지막 쉼표

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

<script> var theObj = { city: "Boston", state: "MA", }</script> 이 코드의 참조는

다음과 같이 변경됩니다. 🎜 >

<script>var MyObject = function () { this.alertMessage = "자바스크립트 규칙"; function () { Alert(this.alertMessage ); }}();document.getElementById("theText").onclick = MyObject.ClickHandler</script>

는 원하는 것이 아닙니다. 대답은 다음과 같습니다. "자바스크립트" 규칙". MyObject.ClickHandler를 실행할 때 코드의 빨간색 줄에서 this에 대한 참조는 실제로 document.getElementById("theText")의 참조를 가리킵니다. 다음과 같이 해결할 수 있습니다:

<script>var MyObject = function () { var self = this; this.alertMessage = "자바스크립트 규칙"; this.OnClick = function() { Alert(self.value) }}();document.getElementById("theText").onclick = MyObject.OnClick</script>

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

신원 도둑

HTML ID와 동일한 JavaScript 변수 이름을 사용하지 마세요. 다음 코드:

<script> TheButton = get("TheButton");</script>

IE 개체 정의되지 않은 오류가 보고됩니다. 내가 말할 수 있는 것은 IE가 형편없다는 것뿐입니다.

문자열은 첫 번째 일치 항목만 대체합니다.

다음 코드:

<script> " .replace(" ","_");</script>

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

var fileName = "This is a title".replace(/ /g,"_");mouseout은 mousein을 의미합니다.

실제로 이는 원인입니다. 이벤트 버블링으로. IE에는 mouseenter와 mouseleave가 있지만 표준은 아닙니다. 저자는 문제 해결을 위해 YUI와 같은 라이브러리를 사용할 것을 권장합니다.

parseInt는 기본 시스템을 기반으로 합니다.

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

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];}

실제로 이것은 이는 기본 클래스의 프로토타입을 오염시켜 발생하는 피해의 예이기도 합니다.

이벤트 핸들러의 함정

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

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

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

포커스 포커스

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

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에서 찾을 수 있습니다.

더 많은 관련 글은 PHP 중국어 홈페이지(www.php.cn)를 주목해주세요!