자바스크립트 함수 유효범위(Scope) 관리 및 Closer
1. 함수 생성시
함수 객체의 [[Scope]] 속성 :
다른 객체와 마찬 가지로 함수 객체 또한 자신만의 속성을 가지고 있습니다.
하지만 여기서 속성은 코드에서 접근할수있는 속성과 그렇지 않은 속성 2가지로 나뉩니다.
[[Scode]] 속성은 "자바스크립트" 엔진 에서만 접근 가능한 속성이며, 해당 함수 객체의
Scode Chain을 포함 하는 속성 이기도 합니다.
1. 함수 객체 생성시 [[Scope]] 속성이 만들어지며 자신만의 식별자 검색을
위한 Scope chain을 포함 합니다.
2. Scope Chain 에 전역객체(Global object)가 추가 됩니다.
3. 전역 객체(Global object)는 함수에서 접근 할 수 있는 전역 변수 와 함수 전체를
담은 객체이며 이 객체는 this, window, document, function 을 포함 합니다.
위 그림을 코드로 표현하면 아래와 같습니다.
-
function fnScope(num1, num2){
-
-
var sum = num1 + num2;
-
-
return sum;
-
}
2. 함수실행시
Execution Context (실행 문맥) : 함수가 실행되는 환경을 정의 합니다.
여기서 실행환경이란?
함수가 접근 할 수 있는 데이터 목록과 그 데이터를 가져오거나 설정하기 위한 환경 입니다.
1. 함수 실행시 "실행 컨텍스트" 객체가 생성됩니다.
2. 실행 컨텍스트도 자신만의 식별자 검색을 위한 "Scope chain"을 포함 합니다.
3. "Scope Chain"은 함수의 [[Scope]] 속성에 있는 전역 객체(Global object)로
초기화 됩니다.
4. 초기화 과정이 끝나면 Activation object(활성화 객체) "Scope Chain" 에 추가
됩니다.
5. Activation object 는 "this", "Aguments 집합", "지역변수",
"매개변수" 항목을 포함 합니다.
6. Activation object 생명 주기는 함수가 종료 될 때 같이 소멸 됩니다.
위 그림을 코드로 표현하면 아래와 같습니다.
-
function fnScope(num1, num2){
-
-
var sum = num1 + num2;
-
-
return sum;
-
}
-
-
fnScope(5, 10); //함수 실행
3. Scope Chain 의 확장 [ with문 ]
함수 실행시 with문을 만나면 해당 객체의(with문에 선언된 객체)속성 전체를 포함 하는
변수 객체를 Scope chain에 임시적으로 추가 확장 합니다.
1. 함수 실행시 "실행 컨텍스트" 객체가 생성됩니다.
2. 실행 컨텍스트도 자신만의 식별자 검색을 위한 "Scope chain"을 포함 합니다.
3. "Scope Chain"은 함수의 [[Scope]] 속성에 있는 전역 객체(Global object)로
초기화 됩니다.
4. 초기화 과정이 끝나면 Activation object(활성화 객체) "Scope Chain" 에 추가
됩니다.
5. Activation object 는 "this", "Aguments 집합", "지역변수",
"매개변수" 항목을 포함 합니다.
6. with문을 만나면 해당 객체(with문에 선언된 객체)의 속성 전체를 포함하는 변수 객체를
Scope chain에 임시 적으로 추가확장 합니다.
7. Activation object 생명 주기는 함수가 종료될때 같이 소멸됩니다.
위 그림을 코드로 표현 하면 아래와 같습니다.
-
//with object 생성
-
var with_object = {
-
-
name: 'with_object',
-
getName: function(){
-
return 'name';
-
}
-
}
-
-
function fnScope(num1, num2){
-
-
var sum = num1 + num2;
-
-
with (with_object)
-
{
-
alert(name); // with_object
-
alert(getName()); // name
-
}
-
-
return sum;
-
}
-
-
fnScope(5, 10); // 함수 실행
4. Scope Chain 확장 [ catch문 ]
함수 실행시 try 블록에서 에러가 발생하면 실행 흐름은 catch문으로 넘어가고,
catch블록 안의지역변수 전체가 Scope chain에 임시 적으로 추가 확장됩니다.
1. 함수 실행시 "실행 컨텍스트" 객체가 생성됩니다.
2. 실행 컨텍스트도 자신만의 식별자 검색을 위한 "Scope chain"을 포함 합니다.
3. "Scope Chain"은 함수의 [[Scope]] 속성에 있는 전역 객체(Global object)로
초기화 됩니다.
4. 초기화 과정이 끝나면 Activation object(활성화 객체) "Scope Chain" 에 추가
됩니다.
5. Activation object 는 "this", "Aguments 집합", "지역변수",
"매개변수" 항목을 포함 합니다.
6. try 블록에서 에러가 발생하면 실행 흐름은 catch문으로 넘어가고 catch 블록 안의
지역변수 전체가 Scope chain에 임시 적으로 추가 확장 합니다.
7. Activation object 생명주기는 함수가 종료될때 같이 소멸됩니다.
위 그림을 코드로 표현하면 아래와 같습니다.
-
function fnScope(num1, num2){
-
-
var sum = num1 + num2;
-
-
try{
-
}
-
catch(e){
-
var msg = 'msg'; //스코프 확장
-
alert(e.message);
-
}
-
-
return sum;
-
}
-
-
fnScope(5, 10); // 함수 실행
5. closer 생성
closer : 함수가 자신의 스코프 밖에 있는 데이터에 접근하려는 행위.
1. 함수 실행시 "실행 컨텍스트" 객체가 생성됩니다.
2. 실행 컨텍스트도 자신만의 식별자 검색을 위한 "Scope chain"을 포함 합니다.
3. "Scope Chain"은 함수의 [[Scope]] 속성에 있는 전역 객체(Global object)로
초기화 됩니다.
4. 초기화 과정이 끝나면 Activation object(활성화 객체) "Scope Chain" 에 추가
됩니다.
5. Activation object 는 "this", "Aguments 집합", "지역변수",
"매개변수" 항목을 포함 합니다.
6. scopeFunction() 함수 생성시 closer가 발생 합니다.
"
closer 가 발생 하는 이유는? 설명 에서와 같이 scopeFunction 함수가 자신의 유효범위
밖에 있는 함수의 지역변수에 접근하기 때문입니다."
7. closer 생성시 closer의 [[Scope]] 속성은 fnScope의 실행 컨텍스트 객체(Activation object, global object)로 초기화 됩니다.
8.
closer 의 Scope Chain 에 포함된
Activation object 의 생명주기는?
"앞서 Activation object 에 대해 설명 한 것 처럼 Activation object의 생명 주기는
함수가 종료되고 실행 컨텍스트가 소멸 될 때 같이 소멸 됩니다.
즉, 실행 컨텍스트가 소멸 될때 Activation object도 같이 소멸 된다는 말과 같습니다.
하지만, closer 생성시 [[Scope]]속성 초기화 과정에서 포함된 Activation object 는
실행 컨텍스트에 포함 된게 아니라 [[Scope]]에 포함 되었기 때문에 함수 종료시 소멸
되지 않습니다.
즉, 메모리에 영구적으로 적재 된다는 말입니다.
결국 이로인해 IE 메모리 누수 현상이 발생 하는 것 입니다.
9. fnScope의 Activation object 생명 주기는 함수가 종료 될 때 같이 소멸 됩니다.
위 그림을 코드로 표현하면 아래와 같습니다.
-
// 함수 생성
-
function fnScope(num1, num2){
-
-
var sum = num1 + num2;
-
-
//클로져
-
function scopeFunction(){
-
var closer_variable = 2;
-
return sum + closer_variable;
-
}
-
-
return sum;
-
}
6. closer 실행
closer 발생 함수를 실행합니다.
1. closer 실행시 실행 컨텍스트 객체가 생성됩니다.
2. 실행 컨텍스트도 자신만의 식별자 검색을 위한 "Scope chain"을 포함 합니다.
3. "Scope Chain"은 함수의 [[Scope]] 속성에 있는 전역 객체(Global object)로
초기화 됩니다.
4. 초기화 과정이 끝나면 Activation object(활성화 객체) "Scope Chain" 에 추가
됩니다.
5. Activation object 는 "this", "Aguments 집합", "지역변수",
"매개변수" 항목을 포함 합니다.
6. closer의 Activation object 생명 주기는 함수가 종료 될 때 같이 소멸 되며, closer 생성시 closer의 [[Scope]] 속성으로 초기화된 fnScope의 실행 컨텍스트 객체(Activation object, global object)는 소멸되지 않고 영구적으로 메모리에 적재 됩니다.
위 그림을 코드로 표현하면 아래와 같습니다.
-
function fnScope(num1, num2){
-
-
var sum = num1 + num2;
-
-
//클로져
-
function scopeFunction(){
-
var closer_variable = 2;
-
return sum + closer_variable;
-
}
-
-
return sum;
-
}
-
-
fnScope(5, 10); // 함수 실행
자바스크립트 함수 유효범위(Scope)란?
"자바스크립트" 언어의 유효범위는 함수블록에만 존재 합니다.
즉, 타 언어에 대부분 존재하는 블록({})안의 유효범위란 존재하지 않는다는 말과 같습니다.
1. 함수 유효범위에 대한 코드입니다.
-
function x(){
-
-
this.x = 1;
-
-
$x = 1;
-
-
var $y = 2;
-
-
}
-
-
alert(new x().x); // 1
-
alert(window.$x); // 1
-
alert(window['$y']); // undefined
1. x() 함수 객체를 생성합니다.
2. x() 함수 객체의 인스턴스 맴버 this.x가 추가 됩니다.
3. var 선언문이 없는 암묵적 전역변수 $x가 선언 및 정의 됩니다.
4. x() 함수 객체의 지역변수 $y가 선언 및 정의 됩니다.
5. alert(new x().x); : 객체의 인스턴스 맴버 x값 1을 반환 합니다.
6. alert(window.$x); : 객체(window)의 프로퍼티 x값 1을 반환합니다.
7. alert(window['$y']); : x() 함수 객체의 지역변수 $y에 접근할 수 없기 때문에
즉, 정의되지 않았기 떄문에 undefined를 반환 합니다.
자바스크립트 함수 4
먼저 함수와 메소드의 차이점을 알아 보도록 하겠습니다.
-
function x(){
-
-
this.x = 1;
-
this.getX = function(){
-
return this.x;
-
}
-
}
-
-
alert(typeof new x()); // object
-
alert(new x().getX()); // 1
소스를 설명하기에 앞서 먼저 "함수"와 "메소드"의 개념적 차이를 설명 드리겠습니다.
보통 "함수"라는 것은 C언어를 기반으로 했던 코드들을 말하곤 합니다.
그래서 보통 C언어를 "함수지향언어"라고도 부릅니다.
하지만 "메소드"는 OOP 프로그램에서 등장한 개념 입니다.
이는 언어 설계상 태생부터가 다르다는 말이 됩니다.
즉, 함수는 제약을 받지않고 어디서나사용할 수 있는 것입니다.
하지만, 메소드는 위의
new x().getX() 코드처럼 호출 객체(생성된 인스턴스)를 통해 사용할 수 있는 것을
말합니다. 즉, 메소드는 클래스의 맴버로 종속되어 있음을 뜻합니다.
간단히 말해 "호출객체.함수()"로 작성되는 코드는메소드인 것입니다.
