scope and closure of javascript
Post on 11-Aug-2015
102 Views
Preview:
TRANSCRIPT
자바스크립트의����������� ������������������ 스코프와����������� ������������������ 클로져NHN����������� ������������������ NEXT����������� ������������������ 김다혜
목차• 실행����������� ������������������ 컨텍스트����������� ������������������ (execution����������� ������������������ context)����������� ������������������
• 실행����������� ������������������ 컨텍스트����������� ������������������ 자세히����������� ������������������ 알아보기����������� ������������������
• 스코프����������� ������������������ (scope)����������� ������������������
• 클로져����������� ������������������ (closure)
실행����������� ������������������ 컨텍스트����������� ������������������ execution����������� ������������������ context• 실행����������� ������������������ 컨텍스트란,����������� ������������������ 어떤����������� ������������������ 함수가����������� ������������������ 호출되면����������� ������������������ 해당����������� ������������������ 함수가����������� ������������������ 이용할����������� ������������������ 정보들이����������� ������������������ 저장되어����������� ������������������ 있는����������� ������������������ 공간����������� ������������������
• 함수를����������� ������������������ 호출하면����������� ������������������ 독자적인����������� ������������������ 실행����������� ������������������ 컨텍스트가����������� ������������������ 생성되어,컨텍스트����������� ������������������ 스택(CT)에����������� ������������������ 쌓입니다.����������� ������������������ 함수의����������� ������������������ 코드가����������� ������������������ 모두����������� ������������������ 실행하고����������� ������������������ 나면,����������� ������������������ 해당����������� ������������������ 함수의����������� ������������������ 실행����������� ������������������ 컨텍스트는����������� ������������������ CT에서����������� ������������������ 빠져나오게����������� ������������������ 됩니다.����������� ������������������ ����������� ������������������
• 자바스크립트를����������� ������������������ 시작하면����������� ������������������ 전역공간에서����������� ������������������ 쓰이는����������� ������������������ 전역����������� ������������������ 컨텍스트가����������� ������������������ 가장����������� ������������������ 먼저����������� ������������������ 컨텍스트����������� ������������������ 스택에����������� ������������������ 쌓이게����������� ������������������ 됩니다.����������� ������������������ 이����������� ������������������ 전역����������� ������������������ 컨텍스트는����������� ������������������ 애플리케이션이����������� ������������������ 종료될����������� ������������������ 때,����������� ������������������ 즉����������� ������������������ 웹페이지를����������� ������������������ 나가거나����������� ������������������ 브라우저를����������� ������������������ 종료했을����������� ������������������ 때에����������� ������������������ 사라집니다.
실행����������� ������������������ 컨텍스트����������� ������������������ execution����������� ������������������ context• 예제를����������� ������������������ 통해����������� ������������������ 알아봅시다!
var x = 1; !function foo () { var x = 2; function inner() { return x; } return inner; } !var result = foo(); !console.log(result());
전역����������� ������������������ 실행����������� ������������������ 컨텍스트
컨텍스트����������� ������������������ 스택
코드가����������� ������������������ 실행되기����������� ������������������ 전,����������� ������������������ 전역����������� ������������������ 실행����������� ������������������ 컨텍스트가����������� ������������������ 초기화����������� ������������������ 되고����������� ������������������ 컨텍스트����������� ������������������ 스택에����������� ������������������ 올라옵니다.
var x = 1; !function foo () { var x = 2; function inner() { return x; } return inner; } !var result = foo(); !console.log(result());
전역����������� ������������������ 실행����������� ������������������ 컨텍스트
컨텍스트����������� ������������������ 스택
전역����������� ������������������ 실행����������� ������������������ 컨텍스트의����������� ������������������ 초기화가����������� ������������������ 완료되면,����������� ������������������ 자바스크립트����������� ������������������ 코드가����������� ������������������ 실행됩니다.
foo����������� ������������������ 함수의����������� ������������������ 실행����������� ������������������ 컨텍스트
전역����������� ������������������ 실행����������� ������������������ 컨텍스트
컨텍스트����������� ������������������ 스택
var x = 1; !function foo () { var x = 2; function inner() { return x; } return inner; } !var result = foo(); !console.log(result());
foo함수가����������� ������������������ 실행될����������� ������������������ 때����������� ������������������ foo����������� ������������������ 함수의����������� ������������������ 실행컨텍스트가����������� ������������������ CT에����������� ������������������ 올라옵니다.
전역����������� ������������������ 컨텍스트
컨텍스트����������� ������������������ 스택
var x = 1; !function foo () { var x = 2; function inner() { return x; } return inner; } !var result = foo(); !console.log(result());
foo함수의����������� ������������������ 내용이����������� ������������������ 모두����������� ������������������ 실행되고����������� ������������������ 나면,����������� ������������������ foo함수의����������� ������������������ 실행����������� ������������������ 컨텍스트는����������� ������������������ 파괴되어����������� ������������������
CT에서����������� ������������������ 빠져나오게����������� ������������������ 됩니다.����������� ������������������
실행����������� ������������������ 컨텍스트����������� ������������������ 자세히����������� ������������������ 알아보기• 실행����������� ������������������ 컨텍스트는����������� ������������������ 변수객체(Variable����������� ������������������ Object,����������� ������������������ VO),����������� ������������������ 스코프����������� ������������������ 체인(scope����������� ������������������ chain),����������� ������������������ this����������� ������������������
에����������� ������������������ 대한����������� ������������������ 정보를����������� ������������������ 갖고����������� ������������������ 있습니다.����������� ������������������ ����������� ������������������
• 변수객체는����������� ������������������ 현재����������� ������������������ 함수가����������� ������������������ 사용하는����������� ������������������ 로컬����������� ������������������ 변수들이����������� ������������������ 저장되는����������� ������������������ 객체입니다.����������� ������������������
• 스코프체인이란����������� ������������������ 실행����������� ������������������ 컨텍스트가����������� ������������������ 접근할����������� ������������������ 수����������� ������������������ 있는����������� ������������������ 모든����������� ������������������ 변수와����������� ������������������ 함수����������� ������������������ 집합입니다.����������� ������������������ ����������� ������������������
• this는����������� ������������������ 이����������� ������������������ 함수를����������� ������������������ 호출한����������� ������������������ 객체를����������� ������������������ 가리킵니다.����������� ������������������
전역����������� ������������������ Varible����������� ������������������ Object
foo 함수����������� ������������������ 위치
x undefined
result undefined
코드가����������� ������������������ 실행되기����������� ������������������ 직전에,����������� ������������������ 전역����������� ������������������ 실행����������� ������������������ 컨텍스트를����������� ������������������ 초기화����������� ������������������ 합니다.����������� ������������������ ����������� ������������������
VO에는����������� ������������������ 코드를����������� ������������������ 쭉����������� ������������������ 보고����������� ������������������ 선언된����������� ������������������ 함수와����������� ������������������ 변수를����������� ������������������ 저장할����������� ������������������ 공간을����������� ������������������ 마련한����������� ������������������ 뒤,����������� ������������������ 함수는����������� ������������������ 그����������� ������������������ 함수����������� ������������������ 위치를,����������� ������������������ 변수는����������� ������������������ undefined를����������� ������������������ 저장해둡니다.����������� ������������������ ����������� ������������������
this에는����������� ������������������ window가����������� ������������������ 저장됩니다.
var x = 1; !function foo () { var x = 2; function inner() { return x; } return inner; } !var result = foo(); !console.log(result());
전역����������� ������������������ 실행����������� ������������������ 컨텍스트
VO
scope����������� ������������������ chain
this window
컨텍스트����������� ������������������ 스택
전역����������� ������������������ Varible����������� ������������������ Object
foo 함수����������� ������������������ 위치
x undefined
result undefined실행����������� ������������������ 컨텍스트의����������� ������������������ 스코프����������� ������������������ 체인은����������� ������������������ 변수객체가����������� ������������������ 차례����������� ������������������ 차례����������� ������������������ 담긴����������� ������������������ 배열을����������� ������������������ 가리키게����������� ������������������ 되는데,����������� ������������������ 전역����������� ������������������ 실행����������� ������������������ 컨텍스트의����������� ������������������ Scope����������� ������������������ chain는����������� ������������������ 전역����������� ������������������ 변수����������� ������������������ 객체만����������� ������������������ 담긴����������� ������������������ 배열을����������� ������������������ 가리킵니다.
scope����������� ������������������ chain����������� ������������������ 배열
0
전역����������� ������������������ 실행����������� ������������������ 컨텍스트
VO
scope����������� ������������������ chain
this window
컨텍스트����������� ������������������ 스택
var x = 1; !function foo () { var x = 2; function inner() { return x; } return inner; } !var result = foo(); !console.log(result());
전역����������� ������������������ Varible����������� ������������������ Object
foo 함수����������� ������������������ 위치
x 1
result undefined
전역����������� ������������������ 실행����������� ������������������ 컨텍스트의����������� ������������������ 초기화가����������� ������������������ 모두����������� ������������������ 끝나면,����������� ������������������
코드를����������� ������������������ 실행합니다.����������� ������������������ ����������� ������������������
첫번째����������� ������������������ 줄을����������� ������������������ 실행하여����������� ������������������ x값에����������� ������������������ 1이����������� ������������������ 저장됩니다.
전역����������� ������������������ 실행����������� ������������������ 컨텍스트
VO …⋯
scope����������� ������������������ chain …⋯
this window
컨텍스트����������� ������������������ 스택
var x = 1; !function foo () { var x = 2; function inner() { return x; } return inner; } !var result = foo(); !console.log(result());
foo����������� ������������������ 객체(Function����������� ������������������ 타입)
prototype …⋯
…⋯
[[scope]]
foo함수가����������� ������������������ 선언되면,����������� ������������������ foo라는����������� ������������������ 이름으로����������� ������������������ Function����������� ������������������ 타입����������� ������������������ 객체가����������� ������������������ 만들어집니다.����������� ������������������ Prototype과����������� ������������������ 관련된����������� ������������������ 것들도����������� ������������������ 이����������� ������������������ 객체에����������� ������������������ 저장되게����������� ������������������ 되지요.����������� ������������������ 이����������� ������������������ Function객체엔����������� ������������������ [[scope]]라는����������� ������������������ 프로퍼티도����������� ������������������ 있는데����������� ������������������ 여기에����������� ������������������ 저장되는����������� ������������������ 것은,����������� ������������������ 부모����������� ������������������ 함수에����������� ������������������ 대한����������� ������������������ 스코프����������� ������������������ 체인����������� ������������������ 배열입니다.
scope����������� ������������������ chain����������� ������������������ 배열
0
전역����������� ������������������ Varible����������� ������������������ Object
foo 함수����������� ������������������ 위치
x 1
result undefined
var x = 1; !function foo () { var x = 2; function inner() { return x; } return inner; } !var result = foo(); !console.log(result());
foo함수가����������� ������������������ 호출되면,����������� ������������������ 함수가����������� ������������������ 실행되기����������� ������������������ 직전,����������� ������������������ foo����������� ������������������ 함수의����������� ������������������ 실행����������� ������������������ 컨텍스트가����������� ������������������ 컨텍스트����������� ������������������ 스택에����������� ������������������ 올라가고,����������� ������������������ 실행����������� ������������������ 컨텍스트가����������� ������������������ 초기화됩니다.
var x = 1; !function foo () { var x = 2; function inner() { return x; } return inner; } !var result = foo(); !console.log(result());
foo에����������� ������������������ 선언된����������� ������������������ 변수와����������� ������������������ 함수를����������� ������������������ 살펴봅니다.����������� ������������������ foo의����������� ������������������ VO는����������� ������������������ 개념적으로����������� ������������������ 다음과����������� ������������������ 같이����������� ������������������ 초기화되겠네요.����������� ������������������
{����������� ������������������ x:����������� ������������������ undefined,����������� ������������������ inner:����������� ������������������ 함수의����������� ������������������ 위치}
foo����������� ������������������ 함수의����������� ������������������ 실행����������� ������������������ 컨텍스트
VO
scope����������� ������������������ chain
전역����������� ������������������ 실행����������� ������������������ 컨텍스트
컨텍스트����������� ������������������ 스택
foo����������� ������������������ 객체(Function����������� ������������������ 타입)
prototype …⋯
…⋯
[[scope]]
scope����������� ������������������ chain����������� ������������������ 배열
0 글로벌����������� ������������������ VO
{����������� ������������������ x:����������� ������������������ undefined,����������� ������������������ inner:����������� ������������������ 함수의����������� ������������������ 위치}
foo����������� ������������������ 객체(Function����������� ������������������ 타입)
prototype …⋯
…⋯
[[scope]]
scope����������� ������������������ chain����������� ������������������ 배열
0 글로벌����������� ������������������ VO
foo����������� ������������������ 함수의����������� ������������������ 실행����������� ������������������ 컨텍스트
VO
scope����������� ������������������ chain
전역����������� ������������������ 실행����������� ������������������ 컨텍스트
컨텍스트����������� ������������������ 스택
{����������� ������������������ x:����������� ������������������ undefined,����������� ������������������ inner:����������� ������������������ 함수의����������� ������������������ 위치}
foo����������� ������������������ 실행����������� ������������������ 컨텍스트의����������� ������������������ 스코프����������� ������������������ 체인을����������� ������������������ 초기화할����������� ������������������ 때는����������� ������������������ foo객체의����������� ������������������ [[scope]]를����������� ������������������ 그대로����������� ������������������ 복사하고,����������� ������������������ scope����������� ������������������ chain����������� ������������������ 맨����������� ������������������ 앞에����������� ������������������ 자신의����������� ������������������ VO를����������� ������������������ 삽입합니다.
scope����������� ������������������ chain����������� ������������������ 배열
0 자신의����������� ������������������ VO
1 글로벌����������� ������������������ vO
실행����������� ������������������ 컨텍스트가����������� ������������������ 초기화되면,����������� ������������������ 함수가����������� ������������������ 실행됩니다.
foo����������� ������������������ 함수의����������� ������������������ 실행����������� ������������������ 컨텍스트
VO
scope����������� ������������������ chain
전역����������� ������������������ 실행����������� ������������������ 컨텍스트
컨텍스트����������� ������������������ 스택
{����������� ������������������ x:����������� ������������������ undefined,����������� ������������������ inner:����������� ������������������ 함수의����������� ������������������ 위치}
scope����������� ������������������ chain����������� ������������������ 배열
0 자신의����������� ������������������ VO
1 글로벌����������� ������������������ vO
스코프• 이전의����������� ������������������ 예제에����������� ������������������ 이어서����������� ������������������ 설명드리겠습니다.
var x = 1; !function foo () { var x = 2; function inner() { return x; } return inner; } !var result = foo(); !console.log(result());
foo함수가����������� ������������������ 실행되었을����������� ������������������ 때,����������� ������������������ foo함수가����������� ������������������ 접근할����������� ������������������ 수����������� ������������������ 있는����������� ������������������ 변수와����������� ������������������ 함수의����������� ������������������ 범위와����������� ������������������ 검색순서는����������� ������������������ 스코프����������� ������������������ 체인을����������� ������������������ 통해����������� ������������������ 정의����������� ������������������ 됩니다.
foo����������� ������������������ 함수의����������� ������������������ 실행����������� ������������������ 컨텍스트
VO
scope����������� ������������������ chain
전역����������� ������������������ 실행����������� ������������������ 컨텍스트
컨텍스트����������� ������������������ 스택
scope����������� ������������������ chain����������� ������������������ 배열
0 자신의����������� ������������������ VO
1 글로벌����������� ������������������ vO
{����������� ������������������ x:����������� ������������������ 2,����������� ������������������ inner:����������� ������������������ 위치}
{foo:����������� ������������������ 위치,����������� ������������������ x:����������� ������������������ 1,����������� ������������������ result:����������� ������������������ undefined}
foo에서����������� ������������������ x를����������� ������������������ 찾을����������� ������������������ 때엔,����������� ������������������ 스코프����������� ������������������ 체인의����������� ������������������ 배열을����������� ������������������ 순회하면서����������� ������������������ 찾습니다.����������� ������������������ 가장����������� ������������������ 먼저����������� ������������������ 자신의����������� ������������������ VO를����������� ������������������ 살펴보겠지요?����������� ������������������ 그런데����������� ������������������ 자신의����������� ������������������ VO에서����������� ������������������ x를����������� ������������������ 발견합니다.����������� ������������������ 그래서����������� ������������������ 이����������� ������������������ x에����������� ������������������ 값을����������� ������������������ 할당하게����������� ������������������ 됩니다.����������� ������������������
따라서,����������� ������������������ 함수����������� ������������������ 안에서����������� ������������������ 밖에서����������� ������������������ 썼던����������� ������������������ 이름의����������� ������������������ 변수를����������� ������������������ 선언하더라도����������� ������������������ 밖의����������� ������������������ 변수엔����������� ������������������ 영향을����������� ������������������ 주지����������� ������������������ 않게����������� ������������������ 됩니다.����������� ������������������
또한,����������� ������������������ 함수����������� ������������������ 안에서����������� ������������������ 그����������� ������������������ 밖의����������� ������������������ 변수들엔����������� ������������������ 접근����������� ������������������ 가능하지만,����������� ������������������ 함수����������� ������������������ 밖에서����������� ������������������ 함수����������� ������������������ 안의����������� ������������������ 지역변수에����������� ������������������ 접근할����������� ������������������ 수����������� ������������������ 없게되는����������� ������������������ 것입니다.����������� ������������������
foo����������� ������������������ 함수의����������� ������������������ 실행����������� ������������������ 컨텍스트
VO
scope����������� ������������������ chain
전역����������� ������������������ 실행����������� ������������������ 컨텍스트
컨텍스트����������� ������������������ 스택
클로져• 클로져란����������� ������������������ 다른����������� ������������������ 함수의����������� ������������������ 스코프에����������� ������������������ 있는����������� ������������������ 변수에����������� ������������������ 접근����������� ������������������ 가능한����������� ������������������ 함수입니다.����������� ������������������
• 특히,����������� ������������������ inner����������� ������������������ function이����������� ������������������ 언제나����������� ������������������ 자신의����������� ������������������ outer����������� ������������������ function에����������� ������������������ 접근할����������� ������������������ 수����������� ������������������ 있는����������� ������������������ 성질을����������� ������������������ 이용합니다.����������� ������������������ (outer����������� ������������������ function이����������� ������������������ 실행이����������� ������������������ 완료된����������� ������������������ 이후에도����������� ������������������ 말이죠!)
var x = 1; !function foo () { var x = 2; function inner() { return x; } return inner; } !var result = foo(); !console.log(result());
inner����������� ������������������ 객체(Function����������� ������������������ 타입)
prototype …⋯
…⋯
[[scope]]
scope����������� ������������������ chain����������� ������������������ 배열
0 foo����������� ������������������ VO
1 글로벌����������� ������������������ vO
foo����������� ������������������ 함수의����������� ������������������ 실행����������� ������������������ 컨텍스트
VO …⋯
scope����������� ������������������ chain
전역����������� ������������������ 실행����������� ������������������ 컨텍스트
컨텍스트����������� ������������������ 스택
inner()함수가����������� ������������������ 선언될����������� ������������������ 때,����������� ������������������ inner객체가����������� ������������������ 생기고,����������� ������������������ 그����������� ������������������ 객체의����������� ������������������ [[scope]]는����������� ������������������ 현재����������� ������������������ 실행����������� ������������������ 컨텍스트의����������� ������������������ 스코프체인을����������� ������������������ 가리키게����������� ������������������ 됩니다.
foo함수가����������� ������������������ 반환된����������� ������������������ 후����������� ������������������ 컨텍스트����������� ������������������ 스택에서����������� ������������������ foo의����������� ������������������ 실행����������� ������������������ 컨텍스트는����������� ������������������ 사라집니다.����������� ������������������ ����������� ������������������ var x = 1;
!function foo () { var x = 2; function inner() { return x; } return inner; } !var result = foo(); !console.log(result());
inner����������� ������������������ 객체(Function����������� ������������������ 타입)
prototype …⋯
…⋯
[[scope]]
scope����������� ������������������ chain����������� ������������������ 배열
0 foo����������� ������������������ VO
1 글로벌����������� ������������������ vO
전역����������� ������������������ 실행����������� ������������������ 컨텍스트
컨텍스트����������� ������������������ 스택
foo에서����������� ������������������ 반환된����������� ������������������ inner함수가����������� ������������������ ����������� ������������������ result����������� ������������������ 변수에����������� ������������������ 저장되게����������� ������������������ 됩니다.����������� ������������������
var x = 1; !function foo () { var x = 2; function inner() { return x; } return inner; } !var result = foo(); !console.log(result());
inner����������� ������������������ 객체(Function����������� ������������������ 타입)
prototype …⋯
…⋯
[[scope]]
scope����������� ������������������ chain����������� ������������������ 배열
0 foo����������� ������������������ VO
1 글로벌����������� ������������������ vO
inner함수가����������� ������������������ 실행되기����������� ������������������ 전,����������� ������������������ 실행����������� ������������������ 컨텍스트가����������� ������������������ 초기화����������� ������������������ 됩니다.����������� ������������������ vO에는����������� ������������������ inner함수����������� ������������������ 내에����������� ������������������ 선언된����������� ������������������ 지역변수가����������� ������������������ 없으므로����������� ������������������ 빈����������� ������������������ 객체가����������� ������������������ 저장되겠군요.����������� ������������������
scope����������� ������������������ chain은����������� ������������������ ����������� ������������������ inner����������� ������������������ ����������� ������������������ 객체의����������� ������������������ [[scope]]가����������� ������������������ 가리키고����������� ������������������ 있는����������� ������������������ 객체를����������� ������������������ 복사한����������� ������������������ 뒤,����������� ������������������ 맨����������� ������������������ 앞에����������� ������������������ 자신의����������� ������������������ VO를����������� ������������������ 추가합니다.
inner����������� ������������������ 함수의����������� ������������������ 실행����������� ������������������ 컨텍스트
VO
scope����������� ������������������ chain
전역����������� ������������������ 실행����������� ������������������ 컨텍스트
컨텍스트����������� ������������������ 스택
scope����������� ������������������ chain����������� ������������������ 배열
0 자신의����������� ������������������ VO
1 foo����������� ������������������ VO
2 글로벌����������� ������������������ vO
var x = 1; !function foo () { var x = 2; function inner() { return x; } return inner; } !var result = foo(); !console.log(result());
inner����������� ������������������ 객체(Function����������� ������������������ 타입)
prototype …⋯
…⋯
[[scope]]
scope����������� ������������������ chain����������� ������������������ 배열
0 foo����������� ������������������ VO
1 글로벌����������� ������������������ vO
inner함수는����������� ������������������ 자신의����������� ������������������ VO에는����������� ������������������ 없는����������� ������������������ x변수를,����������� ������������������ scope����������� ������������������ chain을����������� ������������������ 통해����������� ������������������ foo의����������� ������������������ VO에서����������� ������������������ 찾은����������� ������������������ 뒤����������� ������������������ 2라는����������� ������������������ 값을����������� ������������������ 반환하게����������� ������������������ 됩니다.
inner����������� ������������������ 함수의����������� ������������������ 실행����������� ������������������ 컨텍스트
VO
scope����������� ������������������ chain
전역����������� ������������������ 실행����������� ������������������ 컨텍스트
컨텍스트����������� ������������������ 스택
scope����������� ������������������ chain����������� ������������������ 배열
0 자신의����������� ������������������ VO
1 foo����������� ������������������ VO
2 글로벌����������� ������������������ vO
참고• 프론트엔드����������� ������������������ 개발자를����������� ������������������ 위한����������� ������������������ 자바스크립트����������� ������������������ 프로그래밍����������� ������������������ (니콜라스����������� ������������������ 자카스����������� ������������������ 저,����������� ������������������ 한선용����������� ������������������ 역,����������� ������������������ 인사이트����������� ������������������ 출판)����������� ������������������
• Identifier����������� ������������������ Resolution����������� ������������������ and����������� ������������������ Closures����������� ������������������ in����������� ������������������ the����������� ������������������ JavaScript����������� ������������������ Scope����������� ������������������ Chain����������� ������������������ (http://davidshariff.com/blog/javascript-scope-chain-and-closures/)����������� ������������������
• Javascript의����������� ������������������ 함수와����������� ������������������ 스코프����������� ������������������ 체인(Scope����������� ������������������ Chain)����������� ������������������ (http://blog.naver.com/jjoommnn/130149113595)
top related