고급 JavaScript 스코프 및 컨텍스트

JavaScript의 범위는 변수의 접근성 범위를 결정하며, 이는 글로벌, 기능 및 블록 수준 범위로 나뉩니다. 컨텍스트는 이것의 방향을 결정하고 함수 호출 방법에 따라 다릅니다. 1. 스코프에는 글로벌 범위 (어디서나 액세스 가능), 함수 스코프 (함수 내에서만 유효 함) 및 블록 레벨 범위 ({} 내에서 유효 함)가 포함됩니다. 2. 실행 컨텍스트에는 가변 객체, 범위 체인 및 이것의 값이 포함되어 있습니다. 이것은 일반 함수에서 글로벌 또는 정의되지 않은 것을 가리키며, 메소드 호출 포인트는 호출 객체를 가리키며 생성자는 새 객체를 가리키며 Call/Apply/Bind에 의해 명시 적으로 지정 될 수 있습니다. 3. 폐쇄는 외부 범위 변수에 액세스하고 기억하는 기능을 말합니다. 그들은 종종 캡슐화 및 캐시에 사용되지만 메모리 누출을 유발할 수 있습니다. 4. 콜백 함수에서 컨텍스트 손실이 일반적이며 솔루션에는 바인딩, 생성자 바인딩 또는 화살표 기능 사용이 포함됩니다.

JavaScript의 범위와 컨텍스트는이 언어의 행동을 이해하는 데 핵심이지만 종종 혼란스러워집니다. 스코프는 변수의 접근성을 결정하는 반면 컨텍스트는 this 포인팅하는 것을 결정합니다. 둘 사이의 차이점과 메커니즘을 마스터하면 더 명확하고 안정적인 코드를 작성하는 데 도움이 될 수 있습니다.

범위 : 액세스 할 수있는 변수의 범위

JavaScript에서 스코프는 변수에 액세스 할 수 있는지 여부를 결정합니다. 가장 일반적인 세 가지 범위는 다음과 같습니다.

• 글로벌 범위 : 어디서나 액세스 할 수 있습니다.
• 함수 스코프 (로컬 스코프) :이를 정의하는 함수 내부에서만 유효합니다.
• 블록 레벨 스코프 (ES6에 의해 소개 됨) : let and const , 유효한 내부 {} 에 의해 정의됩니다.

예를 들어:

 if (true) {
  blockvar = '나는 블록 스코프다';
}
console.log (blockvar); // 오류 : BlockVar는 정의되지 않았습니다

여기에서 사용 let 변수는 if 블록에만 존재합니다. var 로 변경되면 기능 또는 글로벌 범위로 홍보됩니다.

스코프 체인은 함수의 변수에 액세스 할 때 JavaScript가 먼저 현재 범위 에이 변수가 있는지 확인합니다. 그렇지 않다면 글로벌 범위까지 찾아보십시오.

실행 컨텍스트 vs. 이것 : 함수가 실행될 때 "환경"

실행 컨텍스트는 JavaScript가 코드를 실행할 때 내부 환경입니다. 함수가 호출 될 때마다 새로운 실행 컨텍스트가 생성됩니다. 세 부분이 포함되어 있습니다.

1. 가변 객체 (VO)
2. 스코프 체인
3. this 의 가치

요점은 this 입니다. 그 가치는 그 가치가 기록되지 않았지만 함수가 호출되는 방식에 따라 다릅니다.

몇 가지 일반적인 상황 :

• 일반 기능 호출 : this 글로벌 객체를 가리 킵니다 (브라우저의 window , 엄격한 모드에서 undefined )
• 방법 호출 : this 그것을 호출하는 객체를 가리 킵니다.
• 생성자 호출 : this 새로 생성 된 객체를 가리 킵니다
• call / apply / bind 사용 : this 명시 적으로 지정됩니다.

예를 들어:

 const user = {
  이름 : 'Tom',
  인사 : function () {
    console.log (`hello, $ {this.name}`);
  }
};

user.greet (); // output Hello, Tom,이 점은 사용자 객체에

폐쇄 : 출생의 범위를 기억하십시오

클로저는 다른 함수 범위에서 변수에 액세스 할 수있는 권한이있는 함수입니다. 간단히 말해서, 그것은 정의 된 환경을 기억하는 기능입니다.

예를 들어:

 함수 외부 () {
  count = 0을하자;
  반환 함수 내부 () {
    세다 ;
    Console.log (count);
  };
}

const counter = OUTER ();
계수기(); // 출력 1
계수기(); // 출력 2

inner 함수는 count 변수에 대한 참조를 유지하는 폐쇄를 형성합니다. outer 실행 되더라도 쓰레기 수집 메커니즘으로 count 제거되지 않습니다.

클로저는 종종 데이터, 캐시, 모듈화 및 기타 시나리오를 캡슐화하는 데 사용되지만 메모리 누출이 발생하기 쉽습니다. 사용할 때 쓸모없는 참조를 청소하는 데주의를 기울이십시오.

컨텍스트 손실 문제 : 공통점

실제 개발에서, this 의 맥락은 특히 콜백 함수 또는 이벤트 처리에서 쉽게 "손실"됩니다.

예를 들어:

 const button = document.querySelector ( 'button');
button.addeventListener ( 'click', user.greet); // 오류 가보고되고, 이름은 정의되지 않았습니다

현재 greet 방법은 콜백으로 전달되며 this 이상 user 에게 가리키지 않습니다. 해결책은 컨텍스트를 바인딩하는 것입니다.

• .bind(this) 사용
• 생성자에 바인딩
• 화살표 함수 사용 (화살표 기능이 this 으로 바인딩되지 않기 때문에)

 button.adeventListener ( 'click', user.greet.bind (user));

기본적으로 그게 다야. 범위와 컨텍스트는 개념적으로 추상적이지만 특정 호출 방법과 결합 된 한 이해하기가 어렵지 않습니다. 열쇠는 함수가 호출되는 방법과 변수가 정의되는 위치에 대해 더 많이 관찰하는 것입니다.

위 내용은 고급 JavaScript 스코프 및 컨텍스트의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!