일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
- Vue transition
- 자료구조
- sass
- CSS
- 리액트
- webpack
- ES6
- Wecode
- TypeScript
- vuex
- JavaScript
- nodejs
- 자바스크립트
- react
- jsx
- HOC
- express
- MySQL
- scss
- storybook
- input
- App.vue
- Vue.js
- event
- State
- 쉬운설명
- 댓글달기
- v-html
- mapGetters
- Vue
- Today
- Total
익명의 개발노트
this 본문
execution contexts (실행컨텍스트)
1) 정의 : 프로그램이 실행될때, 빌드업 하는 과정에서 메모리 안에 스코프 구조들을 excution context라고 부른다.
2) 어떤 함수가 호출되면 실행 컨텍스트 execution context가 만들어진다.(call stack에 push, 함수 벗어나면 pop됨)
- 함수가 실행되면 실행컨텍스트가 생성되고 => 매개변수의 정보를 가지는 활성객체를 생성(arguments, 유사배열)하고, 함수가 생성될 때 상용된 인자(parameter)를 넣는다. => 활성객체 안에 실행 컨텍스트의 스코프 체인을생성 => 함수가 가지고 있는 변수 및 객체 정보를 담을변수객체 생성한다. 이때의 값은 아직 할당하지 않았으므로, undefined이다. => this에 대한 정보를 저장하고 변수객체에 bind한다. bind 대상없으면 window 객체에 바인딩한다. => 코드 실행 => 실행 후 컨텍스트 파기.
3) scope 별로 생성
4) 여기에 담겨있는 것은?
(1) scope 내 변수 및 함수(local, global)
(2) arguments
(3) caller
(4) this : 모든 함수 scope 내에서 자동으로 설정되는 특수한 identifier, execution context의 구성요소 중 하나로,
함수가 실행되는 동안 이용할 수 있다.
아버지 : 나는 몸이 아프다 (나 = 아버지)
할머니 : 나는 몸이 아프다 (나 = 할머니)
이렇게 나를 가르키는 것임. 어디에 사용되냐에 따라 가르키는 곳이 바뀜. 거의 모든상황에서 객체임. 예외도 있음.
※ in-memory scope = excution context ,
lexical scope = code에서 scope를 통상 지칭함. 같은 뜻인데 다르게 사용하는 용어라 혼란 금지...
This의 5가지 바인딩 패턴. 외워두면 헷갈릴 일 없다.
1) Global Reference : ex) log(this); // window
2) Fee Function Invocation : ex) fun(); // window or `use strict`모드에서는 undefined
3) .call or .apply Invocation : ex) fun.call(obj); or fun.apply(obj); // call, apply의 첫 번째 argument로 명시된 object
4) Construction Mode : new fun(); // 새로생성된 객체
5) Method Invocation : 90% 이것만 사용함. ex) obj.mtd(); //부모 object
'프로그래밍 > javascript' 카테고리의 다른 글
Arguments (0) | 2019.02.28 |
---|---|
IIFE( Immediately Invoked Function Expression) (0) | 2019.02.27 |
Closure (0) | 2019.02.26 |
Scope (0) | 2019.02.26 |
[디버깅] 크롬을 활용한 디버깅하는 법 (0) | 2019.02.22 |