JavaScript 함수 선언 및 평가 순서

이 예제 중 첫 번째 예제는 작동하지 않지만 다른 모든 예제는 작동하는 이유는 무엇입니까?

// 1 - does not work
(function() {
setTimeout(someFunction1, 10);
var someFunction1 = function() { alert('here1'); };
})();

// 2
(function() {
setTimeout(someFunction2, 10);
function someFunction2() { alert('here2'); }
})();

// 3
(function() {
setTimeout(function() { someFunction3(); }, 10);
var someFunction3 = function() { alert('here3'); };
})();

// 4
(function() {
setTimeout(function() { someFunction4(); }, 10);
function someFunction4() { alert('here4'); }
})();

이것은 범위 문제도 종료 문제도 아닙니다. 문제는 선언 과 표현 사이의 이해에 있습니다.

Netscape의 첫 번째 버전의 JavaScript와 Microsoft의 첫 번째 사본조차도 JavaScript 코드는 두 단계로 처리됩니다.

1 단계 : 컴파일-이 단계에서는 코드가 구문 트리 (및 엔진에 따라 바이트 코드 또는 바이너리)로 컴파일됩니다.

2 단계 : 실행-파싱 된 코드가 해석됩니다.

함수 선언 구문 은 다음과 같습니다.

function name (arguments) {code}

인수는 물론 선택 사항입니다 (코드도 선택 사항이지만 그 요점은 무엇입니까?).

그러나 JavaScript를 사용하면 표현식을 사용하여 함수를 만들 수도 있습니다 . 함수 표현식의 구문은 표현식 컨텍스트로 작성된다는 점을 제외하면 함수 선언과 유사합니다. 그리고 표현은 다음과 같습니다.

1. =기호 (또는 :객체 리터럴) 오른쪽에있는 모든 것 .
2. 괄호 안의 모든 것 ().
3. 함수에 대한 매개 변수 (실제로 이미 2에서 다룹니다).

선언 과 다른 식은 컴파일 단계가 아닌 실행 단계에서 처리됩니다. 그리고이 때문에 표현의 순서가 중요합니다.

따라서 명확히하기 위해 :

// 1
(function() {
setTimeout(someFunction, 10);
var someFunction = function() { alert('here1'); };
})();

1 단계 : 컴파일. 컴파일러는 변수 someFunction가 정의되어 있음을 확인하여 생성합니다. 기본적으로 생성 된 모든 변수는 undefined 값을 갖습니다. 컴파일러는 아직 값을 할당 할 수 없습니다. 값은 할당 할 값을 반환하기 위해 일부 코드를 실행하기 위해 인터프리터가 필요할 수 있기 때문입니다. 그리고이 단계에서 우리는 아직 코드를 실행하지 않습니다.

2 단계 : 실행. 인터프리터는 변수 someFunction를 setTimeout 에 전달하려는 것을 확인합니다 . 그리고 그렇습니다. 불행히도의 현재 값 someFunction은 정의되지 않았습니다.

// 2
(function() {
setTimeout(someFunction, 10);
function someFunction() { alert('here2'); }
})();

1 단계 : 컴파일. 컴파일러는 someFunction이라는 이름으로 함수를 선언하고 있음을 확인하고이를 생성합니다.

2 단계 : 인터프리터는 사용자 someFunction가 setTimeout 에 전달하려는 것을 확인합니다 . 그리고 그렇습니다. 의 현재 값은 someFunction컴파일 된 함수 선언입니다.

// 3
(function() {
setTimeout(function() { someFunction(); }, 10);
var someFunction = function() { alert('here3'); };
})();

1 단계 : 컴파일. 컴파일러는 변수를 선언 한 것을보고 someFunction생성합니다. 이전과 마찬가지로 그 값은 정의되지 않았습니다.

2 단계 : 실행. 인터프리터는 익명 함수를 setTimeout에 전달하여 나중에 실행합니다. 이 함수에서 변수를 사용하고 있음 someFunction을 확인하여 변수에 대한 클로저를 만듭니다. 이 시점에서의 값 someFunction은 아직 정의되지 않았습니다. 그런 다음에 기능을 할당하는 것을 확인합니다 someFunction. 이 시점에서의 값 someFunction은 더 이상 정의되지 않습니다. 1/100 초 후에 setTimeout이 트리거되고 someFunction이 호출됩니다. 그 값이 더 이상 정의되지 않았기 때문에 작동합니다.

케이스 4는 실제로 케이스 3의 비트가 던져진 케이스 2의 또 다른 버전입니다.이 시점 someFunction에서 setTimeout에 전달되어 이미 선언되어 있기 때문에 존재합니다.

추가 설명 :

setTimeout(someFunction, 10)someFunction의 로컬 복사본과 setTimeout에 전달 된 복사본 사이에 클로저가 생성되지 않는 이유 가 궁금 할 수 있습니다 . 이에 대한 대답은 JavaScript의 함수 인수가 항상 숫자 나 문자열 인 경우 항상 값으로 전달되거나 다른 모든 항목에 대한 참조로 전달된다는 것입니다. 따라서 setTimeout은 실제로 변수 someFunction이 전달되는 것이 아니라 (이는 클로저가 생성됨을 의미 함) someFunction이 참조하는 객체 (이 경우에는 함수) 만 가져옵니다. 이것은 폐쇄를 차단하기 위해 JavaScript에서 가장 널리 사용되는 메커니즘입니다 (예 : 루프).

Javascript의 범위는 엄격하게 어휘 범위가 아닌 함수 기반입니다. 그 의미

• Somefunction1은 둘러싸는 함수의 시작부터 정의되지만 할당 될 때까지 내용은 정의되지 않습니다.

• 두 번째 예에서 할당은 선언의 일부이므로 맨 위로 '이동'합니다.

• 세 번째 예제에서 변수는 익명 내부 클로저가 정의 될 때 존재하지만 10 초 후 값이 할당 될 때까지 사용되지 않습니다.

• 네 번째 예에는 두 번째와 세 번째 이유가 모두 있습니다.

때문에 someFunction1아직 시간에 전화를 할당되지 않은하기 위해 setTimeout()실행됩니다.

someFunction3은 비슷한 경우처럼 보일 수 있지만 이 경우 에는 함수 래핑 someFunction3()을 전달하므로 setTimeout()에 대한 호출 someFunction3()은 나중에 평가되지 않습니다.

이것은 문제를 피하기 위해 좋은 절차를 따르는 기본적인 경우처럼 들립니다. 변수와 함수를 사용하기 전에 선언하고 다음과 같이 함수를 선언하십시오.

function name (arguments) {code}

var로 선언하지 마십시오. 이것은 엉성하고 문제로 이어집니다. 사용하기 전에 모든 것을 선언하는 습관을 들이면 대부분의 문제는 급히 사라질 것입니다. 변수를 선언 할 때 정의되지 않은 변수가 없도록 즉시 유효한 값으로 초기화합니다. 또한 함수가 사용하기 전에 전역 변수의 유효한 값을 확인하는 코드를 포함하는 경향이 있습니다. 이는 오류에 대한 추가 보호 수단입니다.

이 모든 것이 어떻게 작동하는지에 대한 기술적 세부 사항은 수류탄을 가지고 놀 때 작동하는 방식에 대한 물리학과 같습니다. 제 간단한 조언은 애초에 수류탄을 가지고 놀지 말라는 것입니다.

코드 시작 부분에있는 몇 가지 간단한 선언으로 대부분의 이러한 종류의 문제를 해결할 수 있지만 코드를 일부 정리해야 할 수도 있습니다.

추가 참고 사항 :
몇 가지 실험을 실행 한 결과 여기에 설명 된 방식으로 모든 함수를 선언하면 순서가 무엇인지는 중요하지 않습니다. 함수 A가 함수 B를 사용하는 경우 함수 B는 그럴 필요가 없습니다. 함수 A 앞에 선언되어야합니다.

따라서 먼저 모든 함수를 선언하고 다음으로 전역 변수를 선언 한 다음 다른 코드를 마지막에 넣으십시오. 이 경험 법칙을 따르고 잘못 갈 수 없습니다. 이러한 규칙의 시행을 보장하기 위해 웹 페이지 헤드에 선언을 배치하고 본문에 다른 코드를 배치하는 것이 가장 좋습니다.