javascript 실행 가능한 코드(executable code)와 실행 콘텍스트(execution context),...
TRANSCRIPT
스파르탄 스터디CH.03. Execution context & Closure
1. 개요2. Execution Context
3. Lexical Environment
4. Variable Environment, This Binding
5. Declaration Binding Instantiation
6. Closure
Execution context실행 가능 코드 (Executable Code)1. Global code 2. eval code3. Function code
를 만났을 때 , Execution context 가 하나씩 생성이 때 , 세 가지 Components 를 생성4. LexicalEnvironment5. VariableEnvironment6. ThisBinding
=> Running execution context 이 대상
1. 개요
running execution context2. Execution Context
=> the top of the execution context stack
Execution Contexts
=> Executable Code(global, function, eval) 의 개수만큼 Execution Context 가 생성된다 .
2. Execution Context
함수가 실행될때 , Execu-tionContext(3 개의 Component 로 구성 ) 생성ExecutionContexts = { LexicalEnvironment : {} , VariableEnvironment : {} , ThisBinding : {}}
debugger;
var sayHello = 'Hello, ';
function person(){ var first = 'David', last = 'Shariff';
function firstName(){ return first; }
function lastName(){ return last; }
console.log(sayhello + firstName() + ' ' + lastName());}
person();
2. Execution Context
Lexical Environment => 자바스크립트 코드의 실행환경 , 범위를 구조적으로 엮으면서 독립적으로 실행하기 위한 환경
LexicalEnvironment = { EnvironmentRecords : {} // 실행 중인 함수 안의 함수 , 변수 저장 , outerEnvironmentRecords : {} // 가장 근접한 스코프 }
3. Lexical Environment
firstName() 이 실행중이라면 ,
outerEnvironmentRecords 는 person() 의 Environmen-tRecords 가 된다
Environment Records => 함수와 변수를 기록하는 곳
EnvironmentRecords : { DeclarativeEnvironmentRecord : {} , ObjectEnvironmentRecord : {} }
DeclarativeEnvironmentRecord : function, 변수 , catch 문ObjectEnvironmentRecord : binding object 의 function, 변수 , with 문
person() 이 실행중이라면 ,
DeclarativeEnvironmen-tRecord 에는 first, last, first-Name, lastName 이 binding
ObjectEnvironmentRecord 에는 sayHello 이 binding
3. Lexical Environment
VariableEnvironment=> LexicalEnvironment 와 같지만 다르다 ?
4. Variable Environment, This Binding
function, 변수 식별자 (Identifier) 이 binding 되는 점은 같다 .
LexicalEnvironment 의 값은 실행 중에 변하지만 , VariableEnvironment 는 변하지 않는다 .ThisBinding2 번째 시간에 배웠던 호출한 함수가 속한 오브젝트를 참조한다는 기본원리와 동일
VariableEnvironment=> LexicalEnvironment 와 같지만 다르다 ?
4. Variable Environment, This Binding
function, 변수 식별자 (Identifier) 이 binding 되는 점은 같다 .
LexicalEnvironment 의 값은 실행 중에 변하지만 , VariableEnvironment 는 변하지 않는다 .ThisBinding2 번째 시간에 배웠던 호출한 함수가 속한 오브젝트를 참조한다는 기본원리와 동일
ExecutionContext 정리ExecutionContext = { LexicalEnvironment : { EnvironmentRecords : { // 실행 중인 함수 안의 함수 , 변수 저장 DeclarativeEnvironmentRecord : {} // function, 변수 , catch 문 , ObjectEnvironmentRecord : {} // 글로벌 오브젝트의 function, 변수 , with 문 } , outerEnvironmentRecords : {} // 가장 근접한 스코프 } , VariableEnvironment : {} // function, 변수 식별자 (Identifier) 가 binding , ThisBinding : {} // 호출한 함수가 속한 오브젝트를 참조} 좋은 코딩 방식 = outerEnvironmentRecords 참조의 최소화
1. 함수에서 사용할 함수 , 변수를 함수 안에 작성2. 어렵다면 한 단계 위의 Scope 에 작성3. 전역 변수사용 최소화
3. Lexical Environment
Declaration Binding Instantia-tion모든 Execution context 는 선언된 function, 변수를 Vari-ableEnvironment 의 Environment Record 에 바인딩 한다 .특별히 function 은 parameter 또한 바인딩 한다 .
5. Declaration Binding Instantiation
debugger;var sayHello = 'Hello, ';
function person(){ var first = 'David', last = 'Shariff';
function firstName(){ return first; }
function lastName(){ return last; } console.log(sayhello + firstName() + ' ' + lastName());}
person();
Declaration Binding Instantia-tionQuiz.
debugger;var obj = {};obj.sports = function(one, two, two){ console.log(one + two);}obj.sports(11, 22, 33);
5. Declaration Binding Instantiation
모든 파라미터가 순차적으로 binding
Declaration Binding Instantia-tionQuiz.
debugger;var obj = {};obj.sports = function(one, two, two){ console.log(one + two);}obj.sports(11, 22, 33);
5. Declaration Binding Instantiation
모든 파라미터가 순차적으로 binding
Declaration Binding Instantia-tionQuiz.
debugger;var obj = {};obj.sports = function(one, two, two){ console.log(one + two); function one(){};}obj.sports(11, 22, 33);
5. Declaration Binding Instantiation
FunctionDeclaration 을 모두 찾아서 binding
Declaration Binding Instantia-tionQuiz.
debugger;var obj = {};obj.sports = function(one, two, argu-ments){ console.log(arguments); // ?}obj.sports(11, 22, 33);
5. Declaration Binding Instantiation
DeclarativeEnvironmentRecord 에 이미 존재하는 것들은 설정하지 않는다 .
Declaration Binding Instantia-tionQuiz.
debugger;var obj = {};obj.sports = function(one, two, argu-ments){ console.log(arguments); // ?}obj.sports(11, 22, 33);
5. Declaration Binding Instantiation
DeclarativeEnvironmentRecord 에 이미 존재하는 것들은 설정하지 않는다 .
Closure – Closure 를 사용하지 않았을 때var uniqueId = function(){ if(!arguments.callee.id){ arguments.callee.id = 0; } return arguments.callee.id++;}
uniqueId(); // 0uniqueId(); // 1uniqueId(); // 2
// id 를 0 으로 초기화 할 수 있을까 ?
6. Closure
Closure – Closure 를 사용하지 않았을 때var uniqueId = function(){ if(!arguments.callee.id){ arguments.callee.id = 0; } return arguments.callee.id++;}
uniqueId(); // 0uniqueId(); // 1uniqueId(); // 2
// id 를 0 으로 초기화 할 수 있을까 ?uniqueId.id = 0;
uniqueId(); // 0
6. Closure
Closure – Closure 를 사용했을 때var uniqueId = (function(){ var id = 0; return function(){ return id++; }})();
uniqueId(); // 0uniqueId(); // 1uniqueId(); // 2
// id 를 0 으로 초기화 할 수 있을까 ?
6. Closure
var uniqueId = (function(){ var id = 0; return function(){ return id++; }})();
uniqueId(); // 0uniqueId(); // 1uniqueId(); // 2
// 0 으로 초기화uniqueId.id = 0 // ?
6. Closure
Closure – Closure 를 사용했을 때
선언되어 있는 id 에는 접근할 수 없다
x
=> Closure 를 통해 모듈화를 할 수 있다 .
Closure6. Closure
- 생명주기가 끝난 변수 (id) 가 계속 참조 가능한 이유 : 중첩된 함수에 대한 참조가 전역 유효범위 (uniqueId) 안에 저장되어 있기 때문- 전제 조건 : 바깥 함수 (uniqueId) 의 반환값으로 중첩된 함수 (return 의 함수 )를 사용하거나 중첩된 함수를 객체의 프로퍼티로 저장
var uniqueId = (function(){ var id = 0; return function(){ return id++; }})();
참고자료- http://www.ecma-international.org/ecma-262/5.1/#
sec-10
- http://davidshariff.com/blog/what-is-the-execution-c
ontext-in-javascript
/
- 몰입 ! 자바스크립트 김영보- 자바스크립트 완벽 가이드 데이비드 플래너건
* 참고사항 : 이 자료는 함수와 관련된 Execution Context 와 그 하위 사항만을 다루고 있습니다 . global, eval 코드의 실행과 그와 관련된 사항 , strict 모드 , try catch 문에서의 처리 등등에 관해서는 위의 링크를 참고하시기 바랍니다 .