Javascript 실행 가능한 코드(Executable Code)와 실행 콘텍스트(Execution Context),...
-
Upload
young-beom-rhee -
Category
Engineering
-
view
557 -
download
7
Transcript of Javascript 실행 가능한 코드(Executable Code)와 실행 콘텍스트(Execution Context),...
![Page 1: Javascript 실행 가능한 코드(Executable Code)와 실행 콘텍스트(Execution Context), Lexical Environment](https://reader035.fdocument.pub/reader035/viewer/2022081505/587a16661a28abb4238b5415/html5/thumbnails/1.jpg)
스파르탄 스터디CH.03. Execution context & Closure
![Page 2: Javascript 실행 가능한 코드(Executable Code)와 실행 콘텍스트(Execution Context), Lexical Environment](https://reader035.fdocument.pub/reader035/viewer/2022081505/587a16661a28abb4238b5415/html5/thumbnails/2.jpg)
1. 개요2. Execution Context
3. Lexical Environment
4. Variable Environment, This Binding
5. Declaration Binding Instantiation
6. Closure
![Page 3: Javascript 실행 가능한 코드(Executable Code)와 실행 콘텍스트(Execution Context), Lexical Environment](https://reader035.fdocument.pub/reader035/viewer/2022081505/587a16661a28abb4238b5415/html5/thumbnails/3.jpg)
Execution context실행 가능 코드 (Executable Code)1. Global code 2. eval code3. Function code
를 만났을 때 , Execution context 가 하나씩 생성이 때 , 세 가지 Components 를 생성4. LexicalEnvironment5. VariableEnvironment6. ThisBinding
=> Running execution context 이 대상
1. 개요
![Page 4: Javascript 실행 가능한 코드(Executable Code)와 실행 콘텍스트(Execution Context), Lexical Environment](https://reader035.fdocument.pub/reader035/viewer/2022081505/587a16661a28abb4238b5415/html5/thumbnails/4.jpg)
running execution context2. Execution Context
=> the top of the execution context stack
![Page 5: Javascript 실행 가능한 코드(Executable Code)와 실행 콘텍스트(Execution Context), Lexical Environment](https://reader035.fdocument.pub/reader035/viewer/2022081505/587a16661a28abb4238b5415/html5/thumbnails/5.jpg)
Execution Contexts
=> Executable Code(global, function, eval) 의 개수만큼 Execution Context 가 생성된다 .
2. Execution Context
![Page 6: Javascript 실행 가능한 코드(Executable Code)와 실행 콘텍스트(Execution Context), Lexical Environment](https://reader035.fdocument.pub/reader035/viewer/2022081505/587a16661a28abb4238b5415/html5/thumbnails/6.jpg)
함수가 실행될때 , 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
![Page 7: Javascript 실행 가능한 코드(Executable Code)와 실행 콘텍스트(Execution Context), Lexical Environment](https://reader035.fdocument.pub/reader035/viewer/2022081505/587a16661a28abb4238b5415/html5/thumbnails/7.jpg)
Lexical Environment => 자바스크립트 코드의 실행환경 , 범위를 구조적으로 엮으면서 독립적으로 실행하기 위한 환경
LexicalEnvironment = { EnvironmentRecords : {} // 실행 중인 함수 안의 함수 , 변수 저장 , outerEnvironmentRecords : {} // 가장 근접한 스코프 }
3. Lexical Environment
firstName() 이 실행중이라면 ,
outerEnvironmentRecords 는 person() 의 Environmen-tRecords 가 된다
![Page 8: Javascript 실행 가능한 코드(Executable Code)와 실행 콘텍스트(Execution Context), Lexical Environment](https://reader035.fdocument.pub/reader035/viewer/2022081505/587a16661a28abb4238b5415/html5/thumbnails/8.jpg)
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
![Page 9: Javascript 실행 가능한 코드(Executable Code)와 실행 콘텍스트(Execution Context), Lexical Environment](https://reader035.fdocument.pub/reader035/viewer/2022081505/587a16661a28abb4238b5415/html5/thumbnails/9.jpg)
VariableEnvironment=> LexicalEnvironment 와 같지만 다르다 ?
4. Variable Environment, This Binding
function, 변수 식별자 (Identifier) 이 binding 되는 점은 같다 .
LexicalEnvironment 의 값은 실행 중에 변하지만 , VariableEnvironment 는 변하지 않는다 .ThisBinding2 번째 시간에 배웠던 호출한 함수가 속한 오브젝트를 참조한다는 기본원리와 동일
![Page 10: Javascript 실행 가능한 코드(Executable Code)와 실행 콘텍스트(Execution Context), Lexical Environment](https://reader035.fdocument.pub/reader035/viewer/2022081505/587a16661a28abb4238b5415/html5/thumbnails/10.jpg)
VariableEnvironment=> LexicalEnvironment 와 같지만 다르다 ?
4. Variable Environment, This Binding
function, 변수 식별자 (Identifier) 이 binding 되는 점은 같다 .
LexicalEnvironment 의 값은 실행 중에 변하지만 , VariableEnvironment 는 변하지 않는다 .ThisBinding2 번째 시간에 배웠던 호출한 함수가 속한 오브젝트를 참조한다는 기본원리와 동일
![Page 11: Javascript 실행 가능한 코드(Executable Code)와 실행 콘텍스트(Execution Context), Lexical Environment](https://reader035.fdocument.pub/reader035/viewer/2022081505/587a16661a28abb4238b5415/html5/thumbnails/11.jpg)
ExecutionContext 정리ExecutionContext = { LexicalEnvironment : { EnvironmentRecords : { // 실행 중인 함수 안의 함수 , 변수 저장 DeclarativeEnvironmentRecord : {} // function, 변수 , catch 문 , ObjectEnvironmentRecord : {} // 글로벌 오브젝트의 function, 변수 , with 문 } , outerEnvironmentRecords : {} // 가장 근접한 스코프 } , VariableEnvironment : {} // function, 변수 식별자 (Identifier) 가 binding , ThisBinding : {} // 호출한 함수가 속한 오브젝트를 참조} 좋은 코딩 방식 = outerEnvironmentRecords 참조의 최소화
1. 함수에서 사용할 함수 , 변수를 함수 안에 작성2. 어렵다면 한 단계 위의 Scope 에 작성3. 전역 변수사용 최소화
3. Lexical Environment
![Page 12: Javascript 실행 가능한 코드(Executable Code)와 실행 콘텍스트(Execution Context), Lexical Environment](https://reader035.fdocument.pub/reader035/viewer/2022081505/587a16661a28abb4238b5415/html5/thumbnails/12.jpg)
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();
![Page 13: Javascript 실행 가능한 코드(Executable Code)와 실행 콘텍스트(Execution Context), Lexical Environment](https://reader035.fdocument.pub/reader035/viewer/2022081505/587a16661a28abb4238b5415/html5/thumbnails/13.jpg)
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
![Page 14: Javascript 실행 가능한 코드(Executable Code)와 실행 콘텍스트(Execution Context), Lexical Environment](https://reader035.fdocument.pub/reader035/viewer/2022081505/587a16661a28abb4238b5415/html5/thumbnails/14.jpg)
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
![Page 15: Javascript 실행 가능한 코드(Executable Code)와 실행 콘텍스트(Execution Context), Lexical Environment](https://reader035.fdocument.pub/reader035/viewer/2022081505/587a16661a28abb4238b5415/html5/thumbnails/15.jpg)
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
![Page 16: Javascript 실행 가능한 코드(Executable Code)와 실행 콘텍스트(Execution Context), Lexical Environment](https://reader035.fdocument.pub/reader035/viewer/2022081505/587a16661a28abb4238b5415/html5/thumbnails/16.jpg)
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 에 이미 존재하는 것들은 설정하지 않는다 .
![Page 17: Javascript 실행 가능한 코드(Executable Code)와 실행 콘텍스트(Execution Context), Lexical Environment](https://reader035.fdocument.pub/reader035/viewer/2022081505/587a16661a28abb4238b5415/html5/thumbnails/17.jpg)
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 에 이미 존재하는 것들은 설정하지 않는다 .
![Page 18: Javascript 실행 가능한 코드(Executable Code)와 실행 콘텍스트(Execution Context), Lexical Environment](https://reader035.fdocument.pub/reader035/viewer/2022081505/587a16661a28abb4238b5415/html5/thumbnails/18.jpg)
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
![Page 19: Javascript 실행 가능한 코드(Executable Code)와 실행 콘텍스트(Execution Context), Lexical Environment](https://reader035.fdocument.pub/reader035/viewer/2022081505/587a16661a28abb4238b5415/html5/thumbnails/19.jpg)
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
![Page 20: Javascript 실행 가능한 코드(Executable Code)와 실행 콘텍스트(Execution Context), Lexical Environment](https://reader035.fdocument.pub/reader035/viewer/2022081505/587a16661a28abb4238b5415/html5/thumbnails/20.jpg)
Closure – Closure 를 사용했을 때var uniqueId = (function(){ var id = 0; return function(){ return id++; }})();
uniqueId(); // 0uniqueId(); // 1uniqueId(); // 2
// id 를 0 으로 초기화 할 수 있을까 ?
6. Closure
![Page 21: Javascript 실행 가능한 코드(Executable Code)와 실행 콘텍스트(Execution Context), Lexical Environment](https://reader035.fdocument.pub/reader035/viewer/2022081505/587a16661a28abb4238b5415/html5/thumbnails/21.jpg)
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 를 통해 모듈화를 할 수 있다 .
![Page 22: Javascript 실행 가능한 코드(Executable Code)와 실행 콘텍스트(Execution Context), Lexical Environment](https://reader035.fdocument.pub/reader035/viewer/2022081505/587a16661a28abb4238b5415/html5/thumbnails/22.jpg)
Closure6. Closure
- 생명주기가 끝난 변수 (id) 가 계속 참조 가능한 이유 : 중첩된 함수에 대한 참조가 전역 유효범위 (uniqueId) 안에 저장되어 있기 때문- 전제 조건 : 바깥 함수 (uniqueId) 의 반환값으로 중첩된 함수 (return 의 함수 )를 사용하거나 중첩된 함수를 객체의 프로퍼티로 저장
var uniqueId = (function(){ var id = 0; return function(){ return id++; }})();
![Page 23: Javascript 실행 가능한 코드(Executable Code)와 실행 콘텍스트(Execution Context), Lexical Environment](https://reader035.fdocument.pub/reader035/viewer/2022081505/587a16661a28abb4238b5415/html5/thumbnails/23.jpg)
참고자료- 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 문에서의 처리 등등에 관해서는 위의 링크를 참고하시기 바랍니다 .