Javascript_javascript 기술의 범위와 컨텍스트에 대한 심층적인 이해

개요

Javascript의 범위 및 컨텍스트 구현은 어느 정도 Javascript 언어의 고유한 기능입니다. Javascript의 함수는 다양한 컨텍스트를 취할 수 있으며 범위를 캡슐화하고 저장할 수 있습니다. Javascript가 많은 유용한 디자인 패턴을 제공하는 것도 바로 이러한 특성 때문입니다. 그러나 범위와 컨텍스트는 Javascript 프로그래머가 개발 중에 종종 혼동하는 영역이기도 합니다.
다음은 Javascript의 범위와 컨텍스트의 개념과 차이점을 소개합니다.

범위 VS 컨텍스트

먼저 주목해야 할 중요한 점은 범위와 맥락은 동일한 개념이 아니며, 동일한 것을 지칭하지 않는다는 점입니다. 저는 프론트엔드 전문가로서 이 두 가지 개념을 혼동하는 기사를 자주 봅니다. 결과적으로 읽으면 읽을수록 명확하지 않은 부분이 있습니다. 이 두 개념은 오랫동안 혼동되어 온 것 같습니다. 그래서 많은 정보를 확인하고 이 두 가지 개념을 간략하게 설명했습니다. :stuck_out_tongue_closed_eyes:
Javascript에서는 함수가 호출될 때 함수에 바인딩된 범위와 컨텍스트가 있습니다. 기본적으로 범위는 기능 기반이고 컨텍스트는 개체 기반입니다. 즉, 범위는 함수가 호출될 때 함수 내의 변수에 대한 액세스에 적용됩니다. 컨텍스트는 일반적으로 현재 실행 중인 코드를 소유한 개체에 대한 참조인 "this" 키워드의 값을 참조합니다.

가변 범위

변수는 로컬 또는 전역 범위에서 정의할 수 있으며 각각 로컬 변수 및 전역 변수라고 합니다. 전역변수는 함수 외부에서 선언된 변수를 의미하며, 프로그램 내 어디에서나 접근이 가능합니다. 지역 변수는 함수 본문 내에서 정의된 변수를 참조합니다. 함수 본문이나 중첩 함수 내에서만 액세스할 수 있으며 함수 외부에서는 액세스할 수 없습니다.
Javascript는 현재 블록 수준 범위(if, switch, for 등의 문에 정의된 변수)를 지원하지 않습니다. 즉, 블록 내부에 정의된 변수는 블록 외부에서도 액세스할 수 있습니다. 그러나 ES6에서는 "let" 키워드를 사용하여 블록 수준 범위를 정의할 수 있습니다.
범위의 내용에 대해서는 기타 정보를 확인할 수 있습니다. 이 부분의 내용은 비교적 간단합니다.

"이" 컨텍스트

컨텍스트는 일반적으로 함수가 호출되는 방식에 따라 달라집니다. 함수가 객체에 대한 메서드로 호출될 때 "this"는 함수가 호출된 객체를 나타냅니다.

코드 복사 코드는 다음과 같습니다.

var obj={
foo:함수(){
console.log(this === obj);
}
};
obj.foo(); //참 출력

마찬가지로, 새 객체를 생성하기 위해 "new" 키워드를 사용할 때 이는 새로 생성된 객체를 나타냅니다.

코드 복사 코드는 다음과 같습니다.

함수 foo(){
console.log(this);
}
foo(); //출력창
var obj=new foo(); //foo 출력 {}

한 가지 주목할 점은 전역 범위의 함수가 호출될 때 이는 브라우저 환경에서 window를 참조하는 전역 개체를 참조한다는 것입니다. 하지만 엄격 모드에서 코드를 실행하면 "this"가 "정의되지 않음"으로 설정됩니다.
실행 컨텍스트

Javascript는 단일 스레드 언어입니다. 즉, Javascript가 브라우저에서 실행될 때 한 번에 한 가지 작업만 수행할 수 있고 다른 작업은 메서드의 대기열에 대기하여 처리를 기다립니다.

1. 브라우저에서 Javascript 코드 파일을 로드할 때 최신 항목은 기본적으로 전역 실행 컨텍스트입니다. 전역 컨텍스트에서 함수가 호출되면 프로그램은 호출된 함수에 들어가고 Javascript 엔진은 해당 함수에 대한 새로운 실행 컨텍스트를 생성하여 실행 컨텍스트 스택의 맨 위로 푸시합니다. 브라우저는 항상 현재 스택 상단에 있는 컨텍스트를 실행합니다. 실행이 완료되면 해당 컨텍스트가 스택 상단에서 팝된 다음 그 아래 컨텍스트에서 코드를 실행합니다. 이러한 방식으로 스택의 컨텍스트는 순차적으로 실행되고 전역 컨텍스트로 돌아갈 때까지 스택에서 팝됩니다.

2. 실행 컨텍스트는 생성 단계와 실행 단계의 두 단계로 나눌 수 있습니다. 생성 단계에서 JavaScript 인터프리터는 먼저 변수 객체("활성화 객체"라고도 함)를 생성합니다. 활성 객체는 변수, 함수 선언 및 매개변수로 구성됩니다. 이 단계에서 함수의 범위 체인이 초기화되고 이에 의해 참조되는 개체도 결정됩니다. 다음은 코드가 해석되고 실행되는 실행 단계입니다.
Javascript 코드에는 함수 컨텍스트가 얼마든지 있을 수 있습니다. 함수가 호출되면 Javascript 인터프리터가 새 컨텍스트를 생성하고 함수 내부에 선언된 모든 변수는 외부에서 직접 액세스할 수 없다는 것을 이미 알고 있습니다. 현재 기능의 범위.

3. 위의 설명을 통해 함수의 '실행 컨텍스트'에 대한 기본 개념을 갖게 되었는데, 이는 모두가 가장 헷갈리는 부분이기도 합니다. Javascript의 "실행 컨텍스트"는 위의 네 번째 섹션에서 언급한 "이 컨텍스트"가 아니라 주로 범위를 나타냅니다. Javascript에는 유사한 개념이 많이 있지만 각 개념이 참조하는 특정 객체를 이해하는 한 더 이상 혼동되지 않을 것입니다. 따라서 모든 사람이 "실행 컨텍스트"와 "이 컨텍스트"를 진정으로 구별할 수 있기를 바랍니다. ".

간단히 말하면 실행 컨텍스트는 엄격하지는 않지만 범위와 관련된 개념입니다.

스코프 체인

각 실행 컨텍스트에는 바인딩된 범위가 있습니다. 범위 체인에는 실행 컨텍스트 스택의 실행 컨텍스트 활성화 개체(약간 복잡해 보이지만)가 포함되어 있습니다. 범위 체인은 변수에 대한 액세스와 식별자 확인을 결정합니다.

코드 예:

코드 복사 코드는 다음과 같습니다.

함수 우선(){
두 번째();
함수 두 번째(){
        세 번째();
         기능 세번째(){
            네 번째();
             기능 네 번째(){
//코드
            }
}
}
}
첫 번째();

위 코드를 실행하면 중첩된 함수가 실행됩니다. 위의 코드에 관해서도 범위 체인이 형성됩니다. 위에서 아래로 범위 체인의 순서는 네 번째, 세 번째, 두 번째, 첫 번째, 전역입니다. 네 번째 함수는 전역 범위의 변수에 액세스할 수 있으며 세 번째, 두 번째, 첫 번째 함수에 정의된 모든 변수에 액세스할 수 있습니다.
한 가지 주목해야 할 점은 함수 본문 내에서 지역 변수가 동일한 이름을 가진 전역 변수보다 우선순위가 높다는 것입니다. 함수 내에서 선언된 지역 변수나 함수 매개변수에 포함된 변수의 이름이 전역 변수와 동일한 경우 지역 변수가 전역 변수를 덮어씁니다.
간단히 말해서, 변수에 접근하려고 할 때마다 프로그램은 현재 함수의 범위에서 변수를 검색합니다. 변수를 찾을 수 없으면 범위 체인을 따라 함수의 상위 수준까지 검색합니다. 변수를 찾을 수 없으면 정의되지 않은 값을 반환합니다.

요약

이 글에서는 자바스크립트의 컨텍스트와 범위 관련 개념을 소개합니다. 자바스크립트에는 클로저 등 더 중요한 개념도 몇 가지 있습니다. 나중에 이러한 개념을 이해하면 글을 쓰게 될 것입니다~~