JavaScript는 단일 스레드이며 동기식 실행 모델이 있습니다. 단일 스레드는 한 번에 하나의 명령이 실행되고 있음을 의미합니다. 동기는 한 번에 하나씩, 즉 코드가 나타나는 순서대로 한 줄의 코드가 실행되고 있음을 의미합니다. 따라서 JavaScript에서는 한 번에 한 가지 일이 발생합니다.
실행 컨텍스트
JavaScript 엔진은 브라우저에서 다른 엔진과 상호 작용합니다. JavaScript 실행 스택에는 맨 아래에 전역 컨텍스트가 있으며 함수를 호출하면 JavaScript 엔진이 각 함수에 대해 새 실행 컨텍스트를 작성합니다. 호출 된 함수가 종료되면 실행 컨텍스트가 스택에서 팝되고 다음 실행 컨텍스트가 팝됩니다.
예를 들어
function abc()
{
console.log('abc');
}
function xyz()
{
abc()
console.log('xyz');
}
var one = 1;
xyz();
위의 코드에서 전역 실행 컨텍스트가 생성되고이 컨텍스트에서 var one 저장되며 그 값은 1이됩니다. xyz () 호출이 호출되면 새 실행 컨텍스트가 생성되며 변수를 정의한 경우 xyz 함수에서 이러한 변수는 xyz ()의 실행 컨텍스트에 저장됩니다. xyz 함수에서 abc ()를 호출 한 다음 abc () 실행 컨텍스트를 작성하고 실행 스택에 넣습니다. 이제 abc ()가 완료되면 컨텍스트가 스택에서 팝되고 xyz () 컨텍스트가 팝됩니다. 스택 및 전역 컨텍스트가 나타납니다 ...
이제 비동기 콜백에 대해; 비동기는 한 번에 둘 이상을 의미합니다.
실행 스택과 마찬가지로 이벤트 큐가 있습니다. 있습니다. JavaScript 엔진의 일부 이벤트에 대한 알림을 받으려면 해당 이벤트를 수신 할 수 있으며 해당 이벤트가 큐에 배치됩니다. 예를 들어 Ajax 요청 이벤트 또는 HTTP 요청 이벤트입니다.
위의 코드 예제와 같이 실행 스택이 비어있을 때마다 JavaScript 엔진은 주기적으로 이벤트 큐를보고 통지 할 이벤트가 있는지 확인합니다. 예를 들어, 큐에는 두 개의 이벤트 인 ajax 요청과 HTTP 요청이있었습니다. 또한 해당 이벤트 트리거에서 실행해야하는 함수가 있는지 확인합니다. 따라서 JavaScript 엔진은 이벤트에 대해 알림을 받고 해당 이벤트에서 실행할 각 함수를 알고 있습니다. 따라서 JavaScript 엔진은 예를 들어 처리기 함수 (예 : AjaxHandler ()가 호출되고 함수가 호출 될 때 항상 실행 컨텍스트가 실행 컨텍스트에 배치되고 이제 함수 실행이 완료되고 이벤트 ajax 요청도 이벤트 큐에서 제거됨) ... AjaxHandler ()가 완료되면 실행 스택이 비어 있으므로 엔진은 다시 이벤트 큐를보고 큐에서 다음에 있던 HTTP 요청의 이벤트 핸들러 함수를 실행합니다. 이벤트 큐는 실행 스택이 비어있는 경우에만 처리됩니다.
예를 들어 Javascript 엔진에 의한 실행 스택 및 이벤트 큐 처리를 설명하는 아래 코드를 참조하십시오.
function waitfunction() {
var a = 5000 + new Date().getTime();
while (new Date() < a){}
console.log('waitfunction() context will be popped after this line');
}
function clickHandler() {
console.log('click event handler...');
}
document.addEventListener('click', clickHandler);
waitfunction(); //a new context for this function is created and placed on the execution stack
console.log('global context will be popped after this line');
과
<html>
<head>
</head>
<body>
<script src="program.js"></script>
</body>
</html>
이제 웹 페이지를 실행하고 페이지를 클릭하고 콘솔의 출력을 확인하십시오. 출력은
waitfunction() context will be popped after this line
global context will be emptied after this line
click event handler...
JavaScript 엔진은 실행 컨텍스트 부분에서 설명한대로 코드를 동기식으로 실행하고 있으며 브라우저는 비동기식으로 이벤트 큐에 넣습니다. 따라서 완료하는 데 시간이 오래 걸리는 기능은 이벤트 처리를 방해 할 수 있습니다. 이벤트와 같은 브라우저에서 발생하는 상황은 JavaScript로 이러한 방식으로 처리됩니다. 리스너를 실행해야하는 경우 실행 스택이 비어있을 때 엔진이이를 실행합니다. 그리고 이벤트는 발생 순서대로 처리되므로 비동기 부분은 엔진 외부에서 발생하는 일, 즉 외부 이벤트가 발생할 때 엔진이 수행해야하는 작업에 관한 것입니다.
따라서 JavaScript는 항상 동 기적입니다.
