자바스크립트 스코프 사용법과 클로저에 대한 자세한 설명_기본지식

범위 중첩은 범위 체인을 형성하고, 함수 중첩은 클로저를 형성합니다. 클로저와 범위 체인은 JavaScript를 다른 언어와 구별하는 중요한 기능 중 하나입니다.

범위
자바스크립트에는 함수 범위와 전역 범위라는 두 가지 범위가 있습니다.

함수에 선언된 변수와 함수의 매개변수는 동일한 범위, 즉 함수 범위를 공유합니다. 함수 범위의 간단한 예:

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

function foo() {
var bar = 1 ;
{
var bar = 2;
}
return bar; // 2
}

C와 같은 다른 블록 범위 언어와 달리 이는 항상 2를 반환합니다.

브라우저의 경우 전역 범위는 창 개체로 이해될 수 있습니다(Node.js는 전역입니다).

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

var bar = 1;
function foo() {}
alert(window.bar) // 1
alert(window.foo) ) ; // "함수 foo() {}"

bar 변수와 foo 함수는 모두 전역 범위에 속하며 둘 다 window의 속성입니다.

스코프 체인
자바스크립트에서 변수에 접근할 때는 지역 변수와 매개변수에서 시작하여 전역 범위에 도달할 때까지 단계적으로 범위를 순회합니다.

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

varscope = 0, zero = "global -scope" ;
(function(){
var 범위 = 1, one = "scope-1";
(function(){
var 범위 = 2, two = "scope-2 ";
(function(){
var 범위 = 3, 3 = "scope-3";
범위-1 전역 범위
console.log([3, 2, 1, 0 ].join(" "));
             console.log(scope); // 3
           })() 🎜> console.log(scope);
console.log(typeof two); // 정의되지 않음
console.log(scope); // 1
})();
console.log(typeof one); 🎜>console.log(범위); // 0



가장 안쪽 함수에서는 각 변수를 단계별로 탐색하여 출력할 수 있습니다. 두 번째 함수 계층에서는 순회를 통해 변수 3을 찾을 수 없으므로 정의되지 않음이 출력됩니다.

간단히 예를 들자면, 물건을 사려고 돈을 쓸 때 먼저 지갑을 만져보고, 없으면 아빠한테 달라고 하면 됩니다. 그거, 할아버지한테 물어봐도 돼... 그리고 당신의 아버지는 물건을 살 돈이 없으면 당신에게 와서 그것을 요구하지 않을 것입니다.

클로저

한 함수에서 다른 함수를 정의하는 것을 함수 중첩이라고 합니다. 함수의 중첩은 클로저를 형성합니다.

클로저와 범위 체인은 서로를 보완합니다. 함수의 중첩은 체인 관계에서 여러 범위를 생성할 뿐만 아니라 클로저를 형성합니다.

코드 복사

코드는 다음과 같습니다.functionbind(func, target) { return function() {

func.apply(target, 인수);

};
}



그럼 클로저를 어떻게 이해하나요?

외부 함수는 내장 함수에 접근할 수 없습니다외부 함수는 내장 함수의 매개변수와 변수에 접근할 수 없습니다

그러나 내장 함수는 외부 함수의 매개변수와 변수에 접근할 수 있습니다

즉, 내장 함수는 외부 함수

앞서 언급한 스코프 체인 예시를 살펴보겠습니다. 이번에는 클로저의 관점에서 이해해 보겠습니다.

코드 복사

코드는 다음과 같습니다.

var 범위 = 0, zero = "전역 범위";
(function(){
var 범위 = 1, one = "scope-1";
(함수() {
var 범위 = 2, two = "scope-2";
(function(){
var range = 3, three = "scope-3";
// 범위-3 범위 -2 범위-1 전역 범위
console.log([3, 2, 1, 0].join(" "));
console.log(scope) // 3
}) ();
console.log(typeof three); // 정의되지 않음
console.log(scope) // 2
})();
console.log(typeof two); / 정의되지 않음
console.log(scope); // 1
})();
console.log(typeof one); // 정의되지 않음
console.log(scope);

가장 안쪽 함수는 내부 및 외부에 정의된 모든 변수에 액세스할 수 있습니다. 두 번째 레이어 함수는 가장 안쪽 레이어에 접근할 수 없습니다. 동시에 가장 안쪽 레이어의 범위 = 3 할당 작업은 동일한 이름의 외부 변수에 영향을 주지 않습니다.

다른 각도에서 클로저를 이해해 봅시다:

외부 함수가 호출될 때마다 내장 함수가 한 번 생성됩니다.
생성되면 외부 함수의 범위(지역 변수, 매개변수 등 컨텍스트 포함)가 각 내장 함수 개체가 됩니다. 외부 함수가 실행을 완료하고 종료한 후에도 내부 상태의 일부
다음 예를 참조하세요.

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

var i, list = [];
for (i = 0; i list.push(function(){
console.log(i);
});
}
list .forEach(function(func){
func();
});

예상된 "1"과 "2" 대신 "2"가 두 번 표시됩니다. 이는 목록의 두 함수에 의해 액세스된 변수 i가 상위 범위에서 동일한 변수이기 때문입니다.

이 문제를 해결하기 위해 클로저를 사용하도록 코드를 변경해 보겠습니다.

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

var i, list = [];
for (i = 0; i list.push((function(j){
) return function(){
console.log(j);
} ;
})(i));
}
list.forEach(function(func){
func();
});

외부 "즉시 실행 함수"는 함수 내에서 매개변수 j의 형태로 존재하는 매개변수 변수 i를 수신합니다. 이는 반환된 내부 함수에서 j라는 이름과 동일한 참조를 가리킵니다. 외부 함수가 실행되고 종료된 후 매개변수 j(그 값은 현재 i의 현재 값)가 내부 함수의 상태의 일부가 되어 저장됩니다.