목적은 this를 이용해서, 함수를 호출한 오브젝트의 프로퍼티에 접근을 가능하게 하는 것.
obj.boo() 형태에서 this로 obj를 참조할 수 있도록 this 바인딩 컴포넌트에 obj의 참조를 설정해두는 것이다.
obj의 프로퍼티가 변경되면 동적으로 참조하게 된다. 실행 중에 obj의 프로퍼티나 값이 변경될 수 있기 때문에 동적으로 참조한다. (설정,캡쳐링이 아니라) 참조를 하고 있기 때문에 동적으로 사용 가능하다.
This Binding 컴포넌트 설정과 사용
var obj = { point: 100 };
obj.getPoint = function () {
return this.point;
};
obj.getPoint();
obj.getPoint()함수 호출
실행 컨텍스트 생성단계에서 실행 컨텍스트에 3개의 컴포넌트(렉시컬, 변수 환경, this 바인딩)를 붙인다.
this 바인딩 컴포넌트에, getPoint()에서 this로 obj 프로퍼티를 사용할 수 있도록 바인딩한다.
this바인딩컴포넌트 : {
point : 100,
getPoint : function(){}
}
이제 실행 컨텍스트 초기화 단계
파라미터, 함수 선언문, 변수 선언이나 표현식이 없으므로 넘어간다.
이제 실행 컨텍스트 실행 단계
return this.point를 실행하기 위해서, this 바인딩 컴포넌트에서 point를 검색한다.
this 바인딩 컴포넌트에 point 프로퍼티가 있으므로 값을 반환할 수 있다.
함수 안에 없지만 사용가능한 것은 외부 렉시컬 환경 참조에만 존재하는 것이 아니다. 이렇게 this를 바인딩해서 참조할수도 있다.
우리는 현재 obj.getPoint로 바인딩을 했다. 그러나 규모가 있는 프로젝트에서는 obj.aaa.getPoint()와 같이 사용하기도 한다.
따라서, 원하는 환경의 "프로퍼티"가 this 바인딩 컴포넌트에 바인딩되도록 의도적으로 설계해야한다.
obj.aa.bb.cc.getPoint()의 경우 getPoint는 this로 cc만 참조한다. 그 앞에 있는것들은 경로로의 역할만 갖는다. 따라서 설계를 잘 해야 한다. this로 바인딩하는 곳에서 원하는 변수를 찾을 수 없다면, 엔진은 메모리를 벗어나서 다른 메모리 공간을 참조하기 때문이다.
