JavaScript의 범위와 컨텍스트는 부분적으로 유연성을 제공하므로 언어마다 고유합니다. 각 함수에는 서로 다른 변수 컨텍스트와 범위가 있습니다. 이러한 개념은 JavaScript의 강력한 디자인 패턴의 기초가 됩니다. 그러나 이는 개발자들에게 큰 혼란을 가져오기도 합니다. 다음은 JavaScript의 컨텍스트와 범위의 차이점과 다양한 디자인 패턴이 이를 사용하는 방법을 포괄적으로 보여줍니다.
컨텍스트 대 범위
먼저 명확히 해야 할 것은 맥락과 범위는 다른 개념이라는 점이다. 수년에 걸쳐 나는 많은 개발자들이 종종 이 두 용어를 혼동하여 하나를 다른 것으로 잘못 설명하는 것을 발견했습니다. 공평하게 말하자면, 이 용어들은 매우 혼란스러워졌습니다.
모든 함수 호출에는 이와 관련된 범위와 컨텍스트가 있습니다. 기본적으로 범위는 함수 기반이고 컨텍스트는 개체 기반입니다. 즉, 범위는 각 함수 호출의 변수 액세스와 관련되며 각 호출은 독립적입니다. 컨텍스트는 항상 현재 실행 코드를 호출하는 개체에 대한 참조인 this 키워드의 값입니다.
가변 범위
변수는 로컬 또는 전역 범위에서 정의될 수 있으며, 이로 인해 다양한 범위에서 런타임 변수에 액세스할 수 있습니다. 전역 변수는 함수 본문 외부에서 선언되어야 하고, 실행 중인 프로세스 전체에 존재해야 하며, 모든 범위에서 액세스하고 수정할 수 있습니다. 지역 변수는 함수 본문 내에서만 정의되며 각 함수 호출마다 다른 범위를 갖습니다. 이번 주제는 호출 내에서만 값을 할당, 평가, 연산하며, 범위 밖의 값에는 접근할 수 없습니다.
현재 JavaScript는 블록 수준 범위를 지원하지 않습니다. 블록 수준 범위는 if 문, 스위치 문, 루프 문 등과 같은 문 블록에서 변수를 정의하는 것을 의미합니다. 이는 문 블록 외부에서 변수에 액세스할 수 없음을 의미합니다. 현재 명령문 블록 내에 정의된 모든 변수는 명령문 블록 외부에서 액세스할 수 있습니다. 그러나 let 키워드가 ES6 사양에 공식적으로 추가되었으므로 이는 곧 변경될 것입니다. 지역 변수를 블록 수준 범위로 선언하려면 var 키워드 대신 이를 사용하세요.
"이" 문맥
컨텍스트는 일반적으로 함수가 호출되는 방식에 따라 달라집니다. 함수가 객체에 대한 메서드로 호출되면 이는 해당 메서드가 호출되는 객체로 설정됩니다.
다음과 같이 코드 코드를 복사합니다.
var 객체 = {
foo: 함수(){
경고(이 === 객체);
}
};
object.foo(); // 참
new 연산자를 사용하여 객체의 인스턴스를 생성하는 함수를 호출할 때도 동일한 원칙이 적용됩니다. 이런 방식으로 호출하면 이 값이 새로 생성된 인스턴스로 설정됩니다.
다음과 같이 코드 코드를 복사합니다.
함수 foo(){
경고(이);
}
foo() // 창
새로운 foo() // foo
바인딩되지 않은 함수를 호출하면 기본적으로 전역 컨텍스트나 창 개체(브라우저에 있는 경우)로 설정됩니다. 그러나 함수가 엄격 모드("use strict")에서 실행되는 경우 이 값은 기본적으로 정의되지 않음으로 설정됩니다.
실행 컨텍스트 및 범위 체인
JavaScript는 단일 스레드 언어이므로 브라우저에서 한 번에 한 가지 작업만 수행할 수 있습니다. JavaScript 인터프리터가 처음에 코드를 실행하면 먼저 전역 컨텍스트가 기본값으로 설정됩니다. 함수를 호출할 때마다 새로운 실행 컨텍스트가 생성됩니다.
여기서 "실행 컨텍스트"라는 용어는 위에서 설명한 컨텍스트가 아니라 범위를 의미하는 경우가 많습니다. 잘못된 이름이지만 이 용어는 ECMAScript 사양에 의해 정의되어 있으므로 이를 준수할 수밖에 없습니다.
새로운 실행 컨텍스트가 생성될 때마다 범위 체인의 맨 위에 추가되어 실행 또는 호출 스택이 됩니다. 브라우저는 항상 범위 체인의 맨 위에 있는 현재 실행 컨텍스트에서 실행됩니다. 완료되면 해당 항목(현재 실행 컨텍스트)이 스택 상단에서 제거되고 제어권이 이전 실행 컨텍스트로 반환됩니다. 예를 들어:
다음과 같이 코드 코드를 복사합니다.
함수 우선(){
두번째();
함수 두 번째(){
제삼();
함수 세 번째(){
네번째();
함수 넷째(){
// 뭔가를 해라
}
}
}
}
첫 번째();
이전 코드를 실행하면 네 번째 함수까지 중첩된 함수가 위에서 아래로 실행됩니다. 이때 위에서 아래로의 범위 체인은 네 번째, 세 번째, 두 번째, 첫 번째, 전역입니다. 네 번째 함수는 자체 변수와 마찬가지로 전역 변수와 첫 번째, 두 번째, 세 번째 함수에 정의된 모든 변수에 액세스할 수 있습니다. 네 번째 함수의 실행이 완료되면 네 번째 컨텍스트가 범위 체인의 상단에서 제거되고 세 번째 함수로 실행이 반환됩니다. 이 프로세스는 모든 코드 실행이 완료될 때까지 계속됩니다.
서로 다른 실행 컨텍스트 간의 변수 이름 지정 충돌은 로컬에서 글로벌로 범위 체인을 올라가서 해결됩니다. 이는 동일한 이름을 가진 지역 변수가 범위 체인에서 더 높은 우선순위를 갖는다는 것을 의미합니다.
간단히 말해서 함수 실행 컨텍스트에서 변수에 액세스하려고 할 때마다 검색 프로세스는 항상 자체 변수 개체에서 시작됩니다. 찾고 있는 변수가 자신의 변수 개체에 없으면 범위 체인을 계속 검색하세요. 범위 체인을 올라가 각 실행 컨텍스트 변수 개체를 검사하여 변수 이름과 일치하는 값을 찾습니다.
폐쇄
클로저는 외부 함수가 반환된 후에 실행될 수 있도록 정의(범위) 외부에서 중첩된 함수에 액세스할 때 형성됩니다. 클로저(클로저)는 외부 함수의 지역 변수, 인수 및 함수 선언에 대한 (내부 함수에서) 액세스를 유지합니다. 캡슐화를 사용하면 외부 범위에서 실행 컨텍스트를 숨기고 보호하는 동시에 추가 작업을 수행할 수 있는 공용 인터페이스를 노출할 수 있습니다. 간단한 예는 다음과 같습니다.
다음과 같이 코드 코드를 복사합니다.
함수 foo(){
var local = '개인 변수';
반환 함수 bar(){
지역 반환;
}
}
var getLocalVariable = foo();
getLocalVariable() // 개인 변수
가장 널리 사용되는 클로저 유형 중 하나는 잘 알려진 모듈 패턴입니다. 공개, 비공개 및 권한 있는 멤버를 모의할 수 있습니다.
다음과 같이 코드 코드를 복사합니다.
var 모듈 = (함수(){
var privateProperty = 'foo';
함수 privateMethod(args){
//뭔가를 해라
}
반품 {
공개속성: "",
공개메소드: 함수(인수){
//뭔가를 해라
},
특권 메서드: 함수(인수){
privateMethod(args);
}
}
})();
모듈은 실제로 싱글톤과 다소 유사합니다. 끝에 괄호 한 쌍을 추가하고 인터프리터가 해석을 마친 후 즉시 실행합니다(함수를 즉시 실행함). 클로저 실행 컨텍스트의 사용 가능한 유일한 외부 멤버는 반환된 객체(예: Module.publicMethod)의 공용 메서드와 속성입니다. 그러나 실행 컨텍스트가 보호되고(클로저) 변수와의 상호 작용이 공용 메서드를 통해 이루어지기 때문에 모든 개인 속성과 메서드는 프로그램의 수명 주기 전반에 걸쳐 존재합니다.
또 다른 유형의 클로저를 즉시 호출 함수 표현식 IIFE라고 하는데, 이는 창 컨텍스트에서 자체 호출 익명 함수에 지나지 않습니다.
다음과 같이 코드 코드를 복사합니다.
함수(창){
var a = 'foo', b = 'bar';
함수 비공개(){
// 뭔가를 해라
}
창.모듈 = {
공개: 함수(){
//뭔가를 해라
}
};
})(이것);
이 표현식은 전역 네임스페이스를 보호하는 데 매우 유용합니다. 함수 본문 내에서 선언된 모든 변수는 지역 변수이며 클로저를 통해 전체 런타임 환경에서 지속됩니다. 소스 코드를 캡슐화하는 이러한 방식은 프로그램과 프레임워크 모두에 매우 널리 사용되며 일반적으로 외부 세계와 상호 작용하기 위해 단일 전역 인터페이스를 노출합니다.
전화해서 신청하세요
모든 함수에 내장된 이 두 가지 간단한 메서드를 사용하면 사용자 정의 컨텍스트에서 함수를 실행할 수 있습니다. 호출 함수에는 매개변수 목록이 필요하지만 적용 함수를 사용하면 매개변수를 배열로 전달할 수 있습니다.
다음과 같이 코드 코드를 복사합니다.
함수 사용자(이름, 성, 나이){
// 뭔가를 해라
}
user.call(window, 'John', 'Doe', 30);
user.apply(window, ['John', 'Doe', 30]);
실행 결과는 동일하며, 창 컨텍스트에서 사용자 함수가 호출되고 동일한 세 개의 매개변수가 제공됩니다.
ECMAScript 5(ES5)에서는 컨텍스트를 제어하기 위해 Function.prototype.bind 메서드를 도입했습니다. 이 메서드는 함수 호출 방법에 관계없이 바인딩 메서드의 첫 번째 매개 변수에 영구적으로 바인딩된 새 함수를 반환합니다. 클로저를 통해 함수의 컨텍스트를 수정합니다. 이를 지원하지 않는 브라우저에 대한 솔루션은 다음과 같습니다.
다음과 같이 코드 코드를 복사합니다.
if(!(Function.prototype의 '바인드')){
Function.prototype.bind = 함수(){
var fn = this, context = 인수[0], args = Array.prototype.slice.call(arguments, 1);
반환 함수(){
return fn.apply(context, args);
}
}
}
일반적으로 컨텍스트 손실(객체 지향 및 이벤트 처리)에 사용됩니다. 이는 노드의 addEventListener 메소드가 항상 함수의 실행 컨텍스트를 이벤트 핸들러가 바인딩되는 노드로 유지하기 때문에 필요하며, 이는 중요합니다. 그러나 고급 객체 지향 기술을 사용하고 콜백 함수의 컨텍스트를 메서드의 인스턴스로 유지해야 하는 경우 컨텍스트를 수동으로 조정해야 합니다. 바인딩이 제공하는 편리함은 다음과 같습니다.
다음과 같이 코드 코드를 복사합니다.
함수 MyClass(){
this.element = document.createElement('div');
this.element.addEventListener('click', this.onClick.bind(this), false);
}
MyClass.prototype.onClick = 함수(e){
// 뭔가를 해라
};
바인딩 함수의 소스 코드를 다시 살펴보면 Array에서 메서드를 호출하는 다음과 같은 비교적 간단한 코드 줄을 볼 수 있습니다.
다음과 같이 코드 코드를 복사합니다.
Array.prototype.slice.call(인수, 1);
흥미롭게도 여기서 인수 객체는 실제로 배열이 아니지만 nodelist(document.getElementsByTagName() 메서드에서 반환된 결과)와 매우 유사하게 배열과 유사한 객체로 설명되는 경우가 많다는 점에 유의하는 것이 중요합니다. 길이 속성을 포함하고 값을 인덱싱할 수 있지만, 슬라이스 및 푸시와 같은 기본 배열 방법을 지원하지 않기 때문에 여전히 배열이 아닙니다. 그러나 배열과 유사하게 동작하므로 배열 메서드를 호출하여 하이재킹할 수 있습니다. 배열과 유사한 컨텍스트에서 배열 메서드를 실행하려면 위의 예를 따르세요.
다른 객체의 메서드를 호출하는 이 기술은 JavaScript에서 고전적인 상속(클래스 상속)을 에뮬레이트할 때 객체 지향에도 적용됩니다.
다음과 같이 코드 코드를 복사합니다.
MyClass.prototype.init = 함수(){
// "MyClass" 인스턴스의 컨텍스트에서 슈퍼클래스 init 메소드를 호출합니다.
MySuperClass.prototype.init.apply(this, 인수);
}
하위 클래스(MyClass)의 인스턴스에서 슈퍼클래스(MySuperClass)의 메서드를 호출하여 이 강력한 디자인 패턴을 재현할 수 있습니다.
결론적으로
범위와 컨텍스트는 최신 JavaScript에서 중요하고 기본적인 역할을 하기 때문에 고급 디자인 패턴을 배우기 전에 이러한 개념을 이해하는 것이 매우 중요합니다. 클로저, 객체 지향, 상속 또는 다양한 기본 구현에 관해 이야기할 때 컨텍스트와 범위가 중요한 역할을 합니다. 목표가 JavaScript 언어를 마스터하고 해당 구성 요소를 깊이 이해하는 것이라면 범위와 컨텍스트가 출발점이 되어야 합니다.
번역가의 보충 자료
작성자가 구현한 바인드 함수가 불완전합니다. 바인드에서 반환된 함수를 호출할 때 매개변수를 전달할 수 없습니다. 다음 코드는 이 문제를 해결합니다.
다음과 같이 코드 코드를 복사합니다.
if(!(Function.prototype의 '바인드')){
Function.prototype.bind = 함수(){
var fn = this, context = 인수[0], args = Array.prototype.slice.call(arguments, 1);
반환 함수(){
return fn.apply(context, args.concat(arguments));//고정됨
}
}
}