본문 바로가기
javascript

[자바스크립트] this 바인딩

by jinbro 2017. 5. 16.
[먼저 보면 좋은 게시글]
- [자바스크립트] 개념정리② - 스코프, 실행컨텍스트, 스코프체인 : http://jinbroing.tistory.com/116


[this란]
- 해당 함수가 현재 어느 실행컨텍스트에서 구동되고있는지 알려줌
- 현재 컨텍스트가 참조하고 있는 객체를 가리킴, 참조객체가 없다면 전역객체를 가리킴
- this는 최초 실행 시 정의되고, 실행 도중 변경 불가능
- this는 실행컨텍스트를 가리킴


[자바스크립트 실행가능한 코드와 실행컨텍스트]
1) global
2) function
3) eval

- 코드가 실행되면 컨텍스트 생성 및 컨텍스트 스택에 쌓임



- global은 앱이 실행되었을 때 최초 1번, 앱이 종료되었을 때 스택에서 제거됨
- function 함수 호출될 때 생성, 실행이 끝난 후 스택에서 제거, 동일한 function이 여러번 호출되더라도 각각 다른 컨텍스트 생성
- 컨텍스트 구성 요소 : [[Scopes]], Variable Object, thisValue(VO에 포함되는 것이 아니라 독립적임, 컨텍스트를 가리킴)


[this 정의 결정 조건]
1) 어떤 영역에서 수행되었는가 - global 영역, function 영역, eval 영역
2) 호출자가 누구인가 : 참조 객체가 있는가

- function 영역에서 this는 함수가 호출되었을 때(컨텍스트 생성) 정해짐 : function call 발생했을 때


[this 바인딩]
- 기본적으로 this는 global 객체(전역객체 VO) : 브라우저에서는 window, nodejs에서는 global object

- this의 값은 실행컨텍스트가 생성될 때 바인딩됨 : 아래 이미지의 this는 window(전역객체)

- 함수 실행에서 this는 전역객체
1
2
3
4
5
6
function sum(){
     console.log(this == window)
}
 
sum(); // true
 
cs

- 메서드는 참조하고 있는 객체가 this, 실행컨텍스트가 생성될 때 this는 바인딩된다(메서드 호출)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var person = {
     lang: "kor",
     walk: function(){
          console.log(this == person);
     }
 
person.walk(); // true
 
var a = {
     name"jinhyung"
}
 
var b = {
     name"jinbro",
     foo: function(){
          console.log(this.name);
     }
}
 
a.foo = b.foo;
a.foo(); // jinhyung, 메서드는 이때 호출되면서 this가 바인딩됨
b.foo(); // jinbro
cs

- 자기호출함수, 함수표현식은 this가 전역객체 : 컨텍스트(실행 환경) 상 참조 객체 this 바인딩
1
2
3
4
5
6
7
8
9
10
11
12
13
14
(function(){
     console.log(this === window)
})(); // true, 자기호출함수는 생성하자마자 호출되는 함수를 말함
 
var var1 = 10;
 
var foo = function(){
     var var1 = 30;
 
     console.log(this === window); 
     console.log(this.var1);
}
 
foo(); // true 10
cs


[참고자료]
- github FEDevelopers/tech.description, 자바스크립트에서 사용되는 this에 대한 설명 : https://goo.gl/26aSqJ
- _Jbee 개인블로그, 자바스크립트의 함수호출과 this : http://asfirstalways.tistory.com/242
- 코드보관함 개인블로그, 자바스크립트 this 키워드의 모든 것 : https://muckycode.blogspot.kr/2015/04/javascript-this.html



댓글