8. Javascript 함수 호출 (2) - 객체 메서드 호출 시 this 바인딩

 

 

객체의 메서드 호출 시 this 바인딩

우선, 기본적인 내용이라고 생각하실 수도 있겠지만 Javascript에서 칭하는 메서드는 무엇인지 짚고 넘어가야 할 필요성이 있습니다. 기본적으로 객체의 프로퍼티가 함수일 경우, 이를 메서드로 칭합니다. 그리고, 함수 호출과 this 바인딩 과정에서 이 메서드 내부 코드에 사용된 this 키워드는 해당 메서드를 호출한 객체에 바인딩됩니다. 

 

아래의 예제 코드를 살펴보도록 하겠습니다.

var mainObj = {
    name : 'Giriboy',
    printName : function() {
        console.log(this.name);
    }
};

var newObj = {
    name : 'Dean'
};

// newObj에 새로운 printName 메서드 선언
newObj.printName = mainObj.printName;

// 각각의 메서드에서 printName() 호출
mainObj.printName();
newObj.printName();

/ * 출력 
Giriboy
Dean */

 

각각의 객체 안에 선언된 printName( )이라는 메서드의 참조 구조를 확인해 보겠습니다. 일단 mainObj.printName( )이 먼저 선언되었는데, newObj에서도 printName이라는 이름의 메서드를 동적으로 선언하였습니다. 이때, newObj의 메서드를 mainObj.printName 메서드를 참조하도록 선언하였습니다. 결국 두 메서드 모두 this.name을 출력하도록 선언된 것이죠. 

 

출력 결과를 보면 mainObj.printName( )는 'Giriboy'를 출력하였고 newObj.printName( )은 'Dean'을 출력하였습니다. 결국 this.name을 출력하라는 명령에 따라 이런 결과를 보여주고 있는데, 위에서 설명했다시피 여기서의 this는 각각 자신(printName)을 호출한 객체에 바인딩 되었다는 것을 알 수 있습니다. 결국 mainObj.name과 newObj.name을 각각 출력한 것과 동일한 것을 확인할 수 있습니다. 

 

'어찌 보면 당연한 것 아닌가?' 싶어서 대충 이해하고 넘어가실 수도 있을 것 같습니다. 하지만 Javascript 바인딩 구조는 뒤이어 설명할 몇 가지 케이스와 함께 생각해야 해서 의외로 헷갈리는 지점이 많습니다. 다시 한번 '객체의 메서드 내부에서 사용된 this는, 메서드를 호출한 객체와 바인딩된다.'는 점을 명심하시기 바랍니다.

 

사실 C# 등의 다른 언어를 공부하거나 사용해보신 경험이 있으시다면, 당연한 이야기일 수도 있습니다. 하지만, 다음 아티클에서는 객체 메서드가 아닌 함수에서의 this 바인딩, new 키워드 사용 시의 this 바인딩을 살펴보게 되면 기대했던 것과 전혀 다른 바인딩 방식이 적용되기 때문에 주의를 기울여야 합니다. 

 

어쨌든 중요한 내용이기 때문에 다시 한 번 반복하여 기억해 둡시다. 객체의 메서드 내부의 this는 호출한 객체와 바인딩 됩니다.