>웹 프론트엔드 >JS 튜토리얼 >비슷한 예제가 작동하는데도 이 JavaScript 코드가 실패하는 이유는 무엇입니까?

비슷한 예제가 작동하는데도 이 JavaScript 코드가 실패하는 이유는 무엇입니까?

Linda Hamilton
Linda Hamilton원래의
2024-10-25 07:59:29534검색

Why Does This JavaScript Code Fail, Even Though Similar Examples Work?

JavaScript 함수 선언 및 평가 순서

배경:

JavaScript에서 함수는 다음과 같습니다. 표현식을 사용하여 선언하거나 생성합니다. 함수 선언은 컴파일 단계에서 발생하고 함수 표현식은 실행 단계에서 평가됩니다. 이러한 차이점을 이해하는 것은 JavaScript 코드의 동작을 이해하는 데 중요합니다.

질문:

왜 다음 코드 블록의 첫 번째 예는 실패하고 나머지 예는 실패합니까? 성공적으로 실행되었나요?

<code class="javascript">// 1 - does not work
(function() {
  setTimeout(someFunction1, 10);
  var someFunction1 = function() { alert('here1'); };
})();

// ... other examples</code>

답변:

첫 번째 예제의 실패는 범위나 클로저 문제가 아니라 선언과 표현식 간의 오해로 인한 것입니다. .

함수 선언과 표현식 비교:

  • 함수 선언 다음 구문을 따르세요. 함수 이름(인수) {코드}
  • 함수 표현식은 함수 선언과 유사하게 표현식으로 작성되지만 런타임에 평가됩니다.

1단계: 컴파일

컴파일하는 동안 컴파일러는 함수 선언을 처리하여 함수에 대한 변수를 생성합니다. 첫 번째 예에서는 someFunction1 변수가 생성되었지만 해당 값(함수 본문)이 나중에 평가되기 때문에 정의되지 않은 상태로 유지됩니다.

2단계: 실행

예시 1:

런타임 시 인터프리터는 setTimeout(someFunction1, 10)을 발견하고 정의되지 않은 someFunction1을 setTimeout에 전달하려고 시도합니다.

예 2:

반대로 someFunction2() 함수는 컴파일 중에 함수를 생성하는 선언입니다. setTimeout이 호출되면 컴파일된 함수 참조를 받습니다.

예 3:

여기서 익명 함수가 setTimeout에 전달되어 변수에 대한 클로저를 생성합니다. someFunction3. setTimeout이 트리거되면 someFunction3에 값이 할당되고 함수가 성공적으로 실행됩니다.

예제 4:

예제 2와 유사하게 someFunction4 함수가 선언되어 해당 참조는 setTimeout에서 사용할 수 있습니다.

추가 설명:

  • JavaScript의 함수 인수는 기본 유형의 경우 값으로 전달되고 객체의 경우 참조로 전달됩니다. 이는 setTimeout이 someFunction에 대한 클로저를 수신하지 않음을 의미합니다.
  • JavaScript 코드의 동작을 예측하려면 선언과 표현식의 차이점을 이해하는 것이 중요합니다.

위 내용은 비슷한 예제가 작동하는데도 이 JavaScript 코드가 실패하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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