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

[먼저 보면 좋은 게시글]

- [자바스크립트] 개념정리② - 스코프, 실행컨텍스트, 스코프체인 : 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는 전역객체

function sum(){
     console.log(this == window)
}
 
sum(); // true
 

- 메서드는 참조하고 있는 객체가 this, 실행컨텍스트가 생성될 때 this는 바인딩된다(메서드 호출)

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

- 자기호출함수, 함수표현식은 this가 전역객체 : 컨텍스트(실행 환경) 상 참조 객체 this 바인딩

(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

[참고자료]

- 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

- ECMA 스크립트 명세 : http://www.ecma-international.org/ecma-262/5.1/#sec-10.3