<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
function outerFunc() {
var x = 10;
var innerFunc = function() {
console.log(x);
}
return innerFunc;
}
var inner = outerFunc();
inner(); // 10
</script>
</head>
<body>
</body>
</html>
스코프 체인은 다음과 같다.
innerFunc()의 [[scope]]은 outerFunc 변수 객체와 전역 객체를 가진다.
그런데 여기서 잠깐 혼란 스러운 부분이 있다.
위 코드에서 innerFunc()은 outerFunc()의 실행이 끝난 후 실행된다.
그렇다면 outerFunc 실행 컨텍스트 사라진 이후에 innerFunc 실행 컨텍스트가 생성되는 것인데,
innerFunc()의 스코프 체인은 outerFunc 변수 객체를 여전히 참조할 수 있을까?
위 코드의 결과를 보면 짐작할 수 있지만, outerFunc 실행 컨텍스트는 사라졌지만, outerFunc 변수 객체는 여전히 남아있고, innerFunc의 스코프 체인으로 참조되고 있다.
이것이 바로 자바스크립트에서 구현한 클로저라는 개념이다.
LIST
'Study > JavaScript' 카테고리의 다른 글
| [JavaScript] GSAP | TweenMax 쉽게 애니메이션을 구현하는 방법 (0) | 2021.07.18 |
|---|---|
| [JAVASCRIPT] Call By Value && Call By Reference에 대해서 알아보자 (0) | 2021.04.08 |
| [JAVASCRIPT] 변수 선언 var,let,const의 차이점을 알아보자. (0) | 2021.03.30 |
| [클로저] 클로저를 활용할 때 주의사항 (0) | 2019.06.16 |
| [클로저] 함수의 캡슐화 (0) | 2019.06.16 |
|
|
|
|
|