JS 관리 범위에 대한 질문_기본 지식

키워드: 식별자, 실행 컨텍스트, 범위, 범위 체인, 변수 개체, 활성 개체 이론적 지식

JavaScript가 범위와 범위 체인을 관리하는 방법을 이해하는 것이 중요합니다. 범위 체인에서 발견되는 변수 개체의 수가 식별자 확인 성능에 직접적인 영향을 미치기 때문입니다. 범위 체인의 식별자가 깊을수록 식별자를 찾고 액세스하는 데 시간이 더 오래 걸립니다. 범위가 제대로 관리되지 않으면 스크립트 실행 시간에 부정적인 영향을 미칠 수 있습니다.

JavaScript 코드를 실행할 때 JavaScript 엔진은 실행 컨텍스트(실행 컨텍스트)를 생성합니다. 실행 컨텍스트(범위라고도 함)는 코드가 실행되는 환경을 설정합니다. JavaScript 엔진은 페이지가 로드된 후 전역 실행 컨텍스트를 생성한 다음 함수가 실행될 때마다 해당 실행 컨텍스트를 생성하고 마지막으로 현재 활성화된 실행 컨텍스트 스택을 스택의 맨 위에 만듭니다. .

각 실행 컨텍스트에는 식별자 구문 분석을 위해 연관된 범위 체인이 있습니다. 범위 체인에는 실행 컨텍스트 범위 내의 식별자를 정의하는 하나 이상의 변수 개체가 포함되어 있습니다. 전역 실행 컨텍스트의 범위 체인에는 JavaScript에서 사용할 수 있는 모든 전역 변수와 함수를 정의하는 변수 개체가 하나만 있습니다. 함수가 생성되면(실행되지 않음) JavaScript 엔진은 생성 시 실행 컨텍스트의 범위 체인을 함수의 내부 속성 [[Scope]]에 할당합니다. 그런 다음 함수가 실행되면 JavaScript 엔진은 Activity Object(Activetion Object)를 생성하고 초기화 중에 이 함수, 인수, 명명된 매개 변수 및 함수의 모든 로컬 변수에 값을 할당합니다. 활성 객체는 실행 컨텍스트 범위 체인의 맨 위에 나타나고 그 뒤에 함수의 [[scope]] 속성에 있는 객체가 나타납니다.

코드 실행 시 자바스크립트 엔진은 실행 컨텍스트의 범위 체인을 검색하여 변수, 함수 이름 등의 식별자를 확인합니다. 식별자 확인 프로세스는 범위의 최상위에서 시작하여 하향식 순서로 진행됩니다.

이론 검증

함수 추가(num1, num2) {

숫자1 숫자2를 반환합니다.

}

이 코드 실행이 시작되면 add 함수에는 전역 변수 개체만 포함하는 [[scope]] 속성이 있습니다. 아래와 같이:

add 함수를 실행할 때 JavaScript 엔진은 새 실행 컨텍스트와 이를 포함하는 인수, num1 및 num2를 포함하는 활성 개체를 생성하고 활성 개체를 범위 체인에 추가합니다. add() 함수 내에서 실행될 때 JavaScript 엔진은 함수의 num1 및 num2 식별자를 구문 분석해야 합니다. var total = add(5, 10);

파싱 프로세스는 함수의 지역 변수를 포함하는 활성 개체인 범위 체인의 첫 번째 개체부터 시작됩니다. 개체에서 식별자를 찾을 수 없으면 검색은 범위 체인의 다음 개체로 계속됩니다. 식별자를 찾으면 검색이 종료됩니다.

효율적인 데이터 액세스

로컬 변수는 JavaScript에서 가장 빠르게 읽고 쓸 수 있는 식별자입니다.

좋은 경험 법칙: 함수에서 두 번 이상 사용되는 비지역 변수는 지역 변수로 저장되어야 합니다.

배열과 객체의 경우 자주 액세스하는 값은 항상 로컬 변수에 저장하세요.

사실 HTMLCollection 객체 속성에 액세스할 때마다 DOM 문서가 동적으로 쿼리됩니다.

HTMLCollection 개체의 멤버에 반복적으로 액세스해야 하는 경우 효율적인 방법은 해당 멤버를 배열에 복사하는 것입니다.