>  기사  >  웹 프론트엔드  >  JavaScript를 실제로 적용할 때 주의해야 할 핵심 사항을 정리했습니다.

JavaScript를 실제로 적용할 때 주의해야 할 핵심 사항을 정리했습니다.

伊谢尔伦
伊谢尔伦원래의
2017-07-26 13:44:261071검색

생성하는 모든 함수는 대소문자를 구분합니다.

JavaScript에서는 작은따옴표('문자열')와 큰따옴표("문자열") 사이에 특별한 차이가 없으며 둘 다 문자열을 만드는 데 사용할 수 있습니다. , 대부분의 웹 개발자는 큰따옴표 대신 작은따옴표를 사용합니다. 왜냐하면 XHTML 사양에서는 모든 XHTML 속성 값을 큰따옴표로 묶어야 하기 때문입니다.
JavaScript는 JavaScript에서 스크립트가 오버로드를 지원하지 않습니다. 함수 정의는 실행 중에 고려되지 않지만 범위 체인에 정의된 마지막 함수는 직접 사용됩니다. 이는 동일한 이름을 가진 함수의 인스턴스가 항상 하나만 존재한다는 것을 의미합니다.

클로저는 범위와 관련된 개념으로, 외부 함수가 완료된 후에도 계속해서 외부 함수에 액세스할 수 있습니다. 실행 및 종료 속성. 변수나 메소드가 참조되면 JavaScript는 객체의 실행 경로에 의해 형성된 사용 도메인 체인을 따라 사용 도메인을 구문 분석하고 가장 최근에 정의된 변수 값을 찾은 다음 발견된 해당 값을 사용합니다.

function initAnchors(event){ 
  for (var i=1; i <=3; i++){ 
    var anchor = document.GetElementById(&#39;anchor&#39; + i); 
    anchor.attachEvent(&#39;onclick&#39;, function() {  
    alert(&#39;my id is anchor&#39; + i); 
    }); 
  } 
}

페이지에 앵커1부터 앵커3까지의 ID를 가진 세 개의 A 요소가 있다고 가정해 보겠습니다. 프로그램은 세 개의 A 요소에 대한 onclick 이벤트를 등록하지만, 실제 작업은 그렇지 않습니다. 이렇게 각 A 요소를 클릭하면 "내 ID는 앵커4입니다"가 표시됩니다. 왜 그럴까요? 클릭 이벤트가 발생하면 i 값이 실제로 도메인 체인에서 얻어지기 때문입니다. click 이벤트가 발생하면 initAnchors()가 실행되고 i 값은 4가 됩니다. 해결책은 다음과 같습니다.

function registerAnchorListner(anchor,i){ 
  anchor.attachEvent(&#39;onclick&#39;, function() {  
    alert(&#39;my id is anchor&#39; + i); 
  }   
} 
function initAnchors(event){ 
  for (var i=1; i <=3; i++){ 
    var anchor = document.GetElementById(&#39;anchor&#39; + i); 
    registerAnchorListner(anchor,i); 
  } 
} 
var anchor = document.GetElementById(&#39;anchor&#39; + i); 
anchor.attachEvent(&#39;onclick&#39;, function() { 
alert(&#39;my id is anchor&#39; + i); 

});

객체 반복, 다음과 같이 스크립트를 작성할 때 반복이 자주 사용됩니다.

var list = [1,2,3,4]; 
for(var i = 0;i < list.length; i++){ 
  alert(list); 
}

또 다른 대체 반복 방법은 for 루프를 사용하여 (내부) 목록에 있는 각 속성을 순회하는 것입니다.

for(var i in list){ 
  alert(list); 
}

이 시점에서는 list가 Array 객체이기 때문에 이전 반복 방법을 사용한 것과 동일한 결과를 얻습니다.
그러나 배열과 유사하지만 배열이 아닌 객체를 조작하기 위해 for(var i in item) 메서드를 사용할 때는 다음과 같이 각별히 주의해야 합니다.

var all=document.getElementsByTagName(&#39;*&#39;); 
for(var i in all){ 
  //对照all元素进行某些操作 
}

이 반복 프로세스에서 i 값은 길이와 같습니다. , item 및 명명된Item은 코드에서 예기치 않은 오류를 일으킬 수 있습니다. 어떤 경우에는 객체의 hasOwnProperty() 메서드를 사용하여 이 문제를 피할 수 있습니다. 객체의 속성이나 메서드가 상속되지 않은 경우 hasOwnProperty() 메서드는 true를 반환합니다. 즉, 여기서 검사에는 다른 개체에서 상속된 속성 및 메서드가 포함되지 않고 배열에 할당된 요소와 같이 특정 개체 자체에서 직접 생성된 속성만 포함됩니다. 따라서 for 루프에서 이 검사를 사용하면 길이가 all 배열의 실제 속성이 아니라 all 배열을 파생하는 NameNodeMap 객체에서 상속된 속성이기 때문에 루프는 길이 속성을 건너뜁니다.

var all=document.getElementsByTagName(&#39;*&#39;); 
for(var i in all){ 
  if(!all.hasOwnProperty(i)) continue; 
  //对照all元素进行某些操作 
}


위 내용은 JavaScript를 실제로 적용할 때 주의해야 할 핵심 사항을 정리했습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.